Integrated buttons für nav

app/static/css/navigation.css

@@ -1,15 +1,20 @@
-/* Dropdown-Menüs verstecken */
+/* Top-Level Dropdown-Menü */
-.dropdown-menu {
+.nav-item .dropdown-menu {
-    display: none;
+    position: absolute; /* Wichtig für Positionierung */
-    opacity: 0;
+    top: 100%; /* Standardmäßige Öffnung nach unten */
-    visibility: hidden;
+    left: 0;
-    width: max-content !important; /* Passt die Breite an das breiteste Item an */
+    z-index: 1050; /* Damit das Menü über anderen Elementen liegt */
-    box-sizing: border-box; /* Berücksichtigt Innenabstand und Rahmen */
 }
 
-/* Positionierung von Submenüs */
+/* Submenu-Position */
 .dropdown-submenu > .dropdown-menu {
     position: absolute;
-    transition: opacity 0.3s ease, visibility 0.3s ease;
     top: 0;
+    left: 100%; /* Öffnen nach rechts */
+    z-index: 1050;
+}
+
+/* Sicherstellen, dass der Übergang smooth ist */
+.dropdown-menu {
+    transition: all 0.3s ease-in-out;
 }

app/static/js/navigation.js

@@ -70,25 +70,32 @@ document.addEventListener('DOMContentLoaded', () => {
     }
   }
 
+function isSmallScreen() {
+  return window.innerWidth < 992; // Bootstrap-Breakpoint für 'lg'
+}
+    
 function adjustMenuPosition(submenu, parent, isTopLevel) {
     const rect = submenu.getBoundingClientRect();
     const parentRect = parent.getBoundingClientRect();
 
-    // Platzberechnung
     const spaceAbove = parentRect.top;
     const spaceBelow = window.innerHeight - parentRect.bottom;
     const spaceLeft = parentRect.left;
     const spaceRight = window.innerWidth - parentRect.right;
 
-    // Standardpositionierung
     submenu.style.top = '';
     submenu.style.bottom = '';
     submenu.style.left = '';
     submenu.style.right = '';
 
     if (isTopLevel) {
-      // Top-Level-Menüs öffnen nur nach oben oder unten
+      if (isSmallScreen && spaceBelow < spaceAbove) {
-      if (spaceBelow < rect.height && spaceAbove > rect.height) {
+        // Für kleine Bildschirme: Menü direkt über dem Eltern-Element öffnen
+        submenu.style.top = 'auto';
+        submenu.style.bottom = `${parentRect.height}px`; // Direkt über dem Eltern-Element
+      } 
+        // Top-Level-Menü
+        else if (spaceBelow < spaceAbove) {
             submenu.style.bottom = `${window.innerHeight - parentRect.bottom - parentRect.height}px`;
             submenu.style.top = 'auto';
         } else {
@@ -96,18 +103,18 @@ document.addEventListener('DOMContentLoaded', () => {
             submenu.style.bottom = 'auto';
         }
     } else {
-      // Submenüs öffnen in die Richtung mit mehr Platz
+        // Submenü
         const prefersRight = spaceRight >= spaceLeft;
         submenu.style.left = prefersRight ? '100%' : 'auto';
         submenu.style.right = prefersRight ? 'auto' : '100%';
 
-      // Öffnen nach oben, wenn unten kein Platz ist
+        // Nach oben öffnen, wenn unten kein Platz ist
-      if (spaceBelow < rect.height && spaceAbove > rect.height) {
+        if (spaceBelow < spaceAbove) {
-        submenu.style.top = 'auto';
+            submenu.style.bottom = `0`;
-        submenu.style.bottom = `${parentRect.bottom - parentRect.top - rect.height}px`; // Höhe des Submenüs wird berücksichtigt
+            submenu.style.top = `auto`;
         } else {
-        submenu.style.top = '0';
+            submenu.style.top = `0`;
-        submenu.style.bottom = 'auto';
+            submenu.style.bottom = '${parentRect.height}px';
         }
     }
 }

app/templates/moduls/navigation.html.j2

@@ -41,19 +41,19 @@
             <span class="navbar-toggler-icon"></span>
         </button>
         <div class="collapse navbar-collapse" id="navbarNav{{menu_type}}">
-            <ul class="navbar-nav {% if menu_type == 'header' %}ms-auto{% endif %}">
+            <ul class="navbar-nav {% if menu_type == 'header' %}ms-auto{% endif %} btn-group">
                 {% for item in navigation[menu_type].children %}
                     {% if item.url %}
                         <!-- Single Item -->
                         <li class="nav-item">
-                            <a class="nav-link" href="{{ item.url }}" target="{{ item.target|default('_blank') }}" data-bs-toggle="tooltip" title="{{ item.description }}">
+                            <a class="nav-link btn btn-light" href="{{ item.url }}" target="{{ item.target|default('_blank') }}" data-bs-toggle="tooltip" title="{{ item.description }}">
                                 {{ render_icon_and_name(item) }}
                             </a>
                         </li>
                     {% else %}
                         <!-- Dropdown Menu -->
                         <li class="nav-item dropdown">
-                            <a class="nav-link dropdown-toggle" id="navbarDropdown{{ loop.index }}" role="button" data-bs-toggle="dropdown" data-bs-display="dynamic" aria-expanded="false">
+                            <a class="nav-link dropdown-toggle btn btn-light" id="navbarDropdown{{ loop.index }}" role="button" data-bs-display="dynamic" aria-expanded="false">
                                 {% if item.icon is defined and item.icon.class is defined %}
                                     {{ render_icon_and_name(item) }}
                                 {% else %}