- {% block card_header %}{% endblock %}
-
-
-
-
- {% block card_content %}
- {% endblock card_content %}
+
+ {% include 'includes/header.html' %}
+
+
+
+ + {% block page_title %} + Dashboard + {% endblock page_title %} +
+
+ {% for message in messages %}
+ {% include "includes/message.html" %}
+ {% endfor %}
+ {% block content %}
+
+
-
- {% endblock content %}
+
+ {% endblock content %}
+
+ {% block card_header %}{% endblock %}
+
-
+
+ {% block card_content %}
+ {% endblock card_content %}
+
+
+ {% include 'includes/menu.html' %}
+
+
+
+
+
+
+ 
+ 
+
+
+ {% if request.user.is_authenticated %}
+ {# request.user.is_authenticated #}
+ {% if user_organizations.count %}
+
+
+ {% else %}
+
+
+ {% translate "Create organization" %}
+
+ {% endif %}
+ {% endif %}
+
+
+
+
+
+
+
+
+ {% if request.user and request.user.is_authenticated %}
+
+ {% else %}
+
+
+ {% translate 'Login' %}
+
+ {% endif %}
+
+
+
+
+
+
+
+
+
-
-
-
diff --git a/src/servala/static/css/servala.css b/src/servala/static/css/servala.css
index 97d103e..e2eb044 100644
--- a/src/servala/static/css/servala.css
+++ b/src/servala/static/css/servala.css
@@ -1,3 +1,55 @@
+:root, html[data-bs-theme="dark"]:root {
+ --bs-primary: #9A63EC;
+ --bs-link-color: var(--bs-primary);
+ --bs-link-color-rgb: 154, 99, 236;
+ --bs-link-hover-color-rgb: 154, 99, 236;
+ --brand-black: #333333;
+ --brand-mid: #C4ACE0;
+ --brand-light: #FCEAFF;
+ --brand-success: #64BAAA;
+}
+.dropdown-menu, html[data-bs-theme="dark"] .dropdown-menu {
+ --bs-dropdown-link-active-bg: var(--bs-primary);
+}
+.layout-horizontal .main-navbar {
+ background-color: var(--bs-primary);
+}
+html[data-bs-theme="dark"] .btn-primary, .btn-primary {
+ --bs-btn-bg: var(--bs-primary);
+ --bs-btn-border-color: var(--bs-primary);
+ --bs-btn-hover-bg: var(--bs-primary);
+ --bs-btn-hover-border-color: var(--bs-primary);
+ --bs-btn-active-bg: var(--bs-primary);
+ --bs-btn-active-border-color: var(--bs-primary);
+ --bs-btn-disabled-bg: var(--bs-primary);
+ --bs-btn-disabled-border-color: var(--bs-primary);
+}
+.btn.btn-light-primary {
+ background-color: var(--brand-light);
+ color: var(--bs-primary);
+}
+html[data-bs-theme="dark"] .btn.btn-light-primary {
+ background-color: var(--brand-light);
+}
+html[data-bs-theme="dark"] .btn-outline-primary, .btn-outline-primary {
+ --bs-btn-color: var(--bs-primary);
+ --bs-btn-border-color: var(--bs-primary);
+ --bs-btn-hover-bg: var(--bs-primary);
+ --bs-hover-border-color: var(--bs-primary);
+ --bs-btn-active-bg: var(--bs-primary);
+ --bs-btn-active-border-color: var(--bs-primary);
+ --bs-btn-disabled-color: var(--bs-primary);
+ --bs-btn-disabled-color: var(--bs-primary);
+ --bs-btn-disabled-border-color: var(--bs-primary);
+}
+
+.header-top-left {
+ display: flex;
+ align-items: baseline;
+}
+#main .header-top .logo img {
+ height: 32px;
+}
.form-group.d-inline {
margin-bottom: 0;
}
@@ -9,3 +61,27 @@
flex-grow: 1;
}
}
+
+[data-bs-theme="light"] {
+ header #logo-dark {
+ display: none;
+ }
+ header #logo-light {
+ display: inline-block;
+ }
+}
+[data-bs-theme="dark"] {
+ header #logo-light {
+ display: none;
+ }
+ header #logo-dark {
+ display: inline-block;
+ }
+}
+.btn-keycloak {
+ display: flex;
+ align-items: center;
+}
+a.btn-keycloak {
+ display: inline-flex;
+}
diff --git a/src/servala/static/img/Servala-1.png b/src/servala/static/img/Servala-1.png
new file mode 100644
index 0000000..af5de89
Binary files /dev/null and b/src/servala/static/img/Servala-1.png differ
diff --git a/src/servala/static/img/Servala-2.png b/src/servala/static/img/Servala-2.png
new file mode 100644
index 0000000..6718612
Binary files /dev/null and b/src/servala/static/img/Servala-2.png differ
diff --git a/src/servala/static/img/keycloak.svg b/src/servala/static/img/keycloak.svg
index cdcd0fa..3ce0651 100644
--- a/src/servala/static/img/keycloak.svg
+++ b/src/servala/static/img/keycloak.svg
@@ -1,6 +1 @@
-
+
\ No newline at end of file
diff --git a/src/servala/static/js/sidebar.js b/src/servala/static/js/sidebar.js
index f541788..ce607c8 100644
--- a/src/servala/static/js/sidebar.js
+++ b/src/servala/static/js/sidebar.js
@@ -1,13 +1,12 @@
/**
- * This script marks the current path as active in the sidebar.
+ * This script marks the current path as active in the menu.
*/
const markActive = (link) => {
- const parentItem = link.closest('.sidebar-item');
+ const parentItem = link.closest('.menu-item');
+ link.classList.add('active');
if (parentItem) {
parentItem.classList.add('active');
- } else {
- link.classList.add('active');
}
}
@@ -16,13 +15,13 @@ const checkLink = (fuzzy) => {
document.addEventListener('DOMContentLoaded', () => {
const currentPath = window.location.pathname;
- const sidebarLinks = [...document.querySelectorAll('a.sidebar-link')]
+ const menuLinks = [...document.querySelectorAll('a.menu-link')]
- const exactMatches = sidebarLinks.filter(link => link.getAttribute('href') === currentPath)
+ const exactMatches = menuLinks.filter(link => link.getAttribute('href') === currentPath)
if (exactMatches.length > 0) {
markActive(exactMatches[0])
} else {
- fuzzyMatches = sidebarLinks.filter(link => currentPath.startsWith(link.getAttribute('href')))
+ fuzzyMatches = menuLinks.filter(link => currentPath.startsWith(link.getAttribute('href')))
if (fuzzyMatches.length > 0) {
const longestMatch = fuzzyMatches.sort((a, b) => b.href.length - a.href.length)[0]
markActive(longestMatch)
-
-
-
-
-
-
- {% if request.user.is_authenticated %}
- {# request.user.is_authenticated #}
- {% if user_organizations.count %}
-
-
- {% else %}
-
-
- {% translate "Create organization" %}
-
- {% endif %}
- {% endif %}
-
-
- ![{% translate 'Logo' %}]()
-
-
-
-
-
-
-
-
-
-
-
-