app/static/css/navigation.css

@@ -1,20 +1,15 @@
-/* Top-Level Dropdown-Menü */
+/* Dropdown-Menüs verstecken */
-.nav-item .dropdown-menu {
+.dropdown-menu {
-    position: absolute; /* Wichtig für Positionierung */
+    display: none;
-    top: 100%; /* Standardmäßige Öffnung nach unten */
+    opacity: 0;
-    left: 0;
+    visibility: hidden;
-    z-index: 1050; /* Damit das Menü über anderen Elementen liegt */
+    width: max-content !important; /* Passt die Breite an das breiteste Item an */
+    box-sizing: border-box; /* Berücksichtigt Innenabstand und Rahmen */
 }
 
-/* Submenu-Position */
+/* Positionierung von Submenüs */
 .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,32 +70,25 @@ document.addEventListener('DOMContentLoaded', () => {
     }
   }
 
-function isSmallScreen() {
+  function adjustMenuPosition(submenu, parent, isTopLevel) {
-  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) {
-      if (isSmallScreen && spaceBelow < spaceAbove) {
+      // Top-Level-Menüs öffnen nur nach oben oder unten
-        // Für kleine Bildschirme: Menü direkt über dem Eltern-Element öffnen
+      if (spaceBelow < rect.height && spaceAbove > rect.height) {
-        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 {
@@ -103,19 +96,19 @@ function adjustMenuPosition(submenu, parent, isTopLevel) {
         submenu.style.bottom = 'auto';
       }
     } else {
-        // Submenü
+      // Submenüs öffnen in die Richtung mit mehr Platz
       const prefersRight = spaceRight >= spaceLeft;
       submenu.style.left = prefersRight ? '100%' : 'auto';
       submenu.style.right = prefersRight ? 'auto' : '100%';
 
-        // Nach oben öffnen, wenn unten kein Platz ist
+      // Öffnen nach oben, wenn unten kein Platz ist
-        if (spaceBelow < spaceAbove) {
+      if (spaceBelow < rect.height && spaceAbove > rect.height) {
-            submenu.style.bottom = `0`;
+        submenu.style.top = 'auto';
-            submenu.style.top = `auto`;
+        submenu.style.bottom = `${parentRect.bottom - parentRect.top - rect.height}px`; // Höhe des Submenüs wird berücksichtigt
       } else {
-            submenu.style.top = `0`;
+        submenu.style.top = '0';
-            submenu.style.bottom = '${parentRect.height}px';
+        submenu.style.bottom = 'auto';
+      }
     }
   }
-}
 });

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