Optimized menus for smartphone

app/static/css/default.css

@@ -78,66 +78,39 @@ h3.card-title {
 h3.footer-title {
   font-size: 1.3em;
 }
-
-/* Dropdown menu styles */
+/* Dropdown-Menüs verstecken */
 .dropdown-menu {
-  position: absolute !important;
-}
-
-.dropdown-menu-footer {
-  position: absolute !important;
-  top: auto !important;
-  bottom: 100%; /* Positions the menu above the trigger */
-  transform: translateY(-10px); /* Optional spacing for smoother appearance */
-}
-
-/* Dropdown submenu styles */
-.dropdown-submenu {
-  position: relative;
-  list-style: none;
-}
-
-.dropdown-submenu > .dropdown-menu {
-  position: absolute;
-  top: 0;
-  left: 100%; /* Default position: open to the right */
-  margin-top: -1px;
-  z-index: 1050;
-  transition: opacity 0.3s ease-in-out; /* Smooth opacity transition */
-}
-
-/* Handle collapse behavior for dropdowns */
-.dropdown-menu.collapse {
-  display: none;
-}
-
-.dropdown-menu.collapse.show {
-  display: block;
-}
-
-/* Ensure submenus are hidden by default */
-.dropdown-submenu .dropdown-menu {
   display: none;
   opacity: 0;
-  transition: opacity 0.3s ease-in-out;
-  position: absolute;
-  left: 100%;
-  top: 0;
+  visibility: hidden;
+  transition: opacity 0.3s ease, visibility 0.3s ease;
 }
 
-/* Show submenu on hover */
+/* Dropdown-Menü beim Hover anzeigen */
+.nav-item.dropdown:hover > .dropdown-menu,
 .dropdown-submenu:hover > .dropdown-menu {
   display: block;
   opacity: 1;
+  visibility: visible;
 }
 
-/* Ensure submenu remains visible when hovered over */
-.dropdown-submenu:hover > .dropdown-menu:hover {
+/* Dropdown-Menü bei der Klasse "open" anzeigen */
+.nav-item.dropdown.open > .dropdown-menu,
+.dropdown-submenu.open > .dropdown-menu {
   display: block;
   opacity: 1;
+  visibility: visible;
 }
 
-/* Handle dynamic submenu positioning */
-.dropdown-submenu > .dropdown-menu[style*="right: 100%"] {
-  left: auto; /* Override left position for leftward opening */
+/* Positionierung von Submenüs */
+.dropdown-submenu > .dropdown-menu {
+  position: absolute;
+  top: 0;
+  left: 100%; /* Rechts ausklappen */
+}
+
+.dropdown-submenu.open > .dropdown-menu {
+  display: block;
+  opacity: 1;
+  visibility: visible;
 }

app/static/js/submenus.js

@@ -1,41 +1,53 @@
 document.addEventListener('DOMContentLoaded', () => {
-    const dropdownSubmenus = document.querySelectorAll('.dropdown-submenu');
+  const menuItems = document.querySelectorAll('.nav-item.dropdown, .dropdown-submenu');
 
-    dropdownSubmenus.forEach(submenu => {
-        let timeout;
+  menuItems.forEach(item => {
+    let timeout;
 
-        // Zeige das Submenü beim Hover
-        submenu.addEventListener('mouseenter', () => {
-            clearTimeout(timeout);
-            const menu = submenu.querySelector('.dropdown-menu');
-            if (menu) {
-                // Dynamische Positionierung
-                const rect = menu.getBoundingClientRect();
-                const viewportWidth = window.innerWidth;
-
-                // Überprüfen, ob Platz nach rechts ist, sonst nach links öffnen
-                if (rect.right > viewportWidth) {
-                    menu.style.left = 'auto';
-                    menu.style.right = '100%';
-                } else {
-                    menu.style.left = '100%';
-                    menu.style.right = 'auto';
-                }
-
-                menu.style.display = 'block';
-                menu.style.opacity = '1';
-            }
-        });
-
-        // Verstecke das Submenü nach 0.5 Sekunden
-        submenu.addEventListener('mouseleave', () => {
-            const menu = submenu.querySelector('.dropdown-menu');
-            if (menu) {
-                timeout = setTimeout(() => {
-                    menu.style.display = 'none';
-                    menu.style.opacity = '0';
-                }, 500); // 0.5 Sekunden Verzögerung
-            }
-        });
+    // Öffnen beim Hovern
+    item.addEventListener('mouseenter', () => {
+      clearTimeout(timeout);
+      openMenu(item);
     });
+
+    // Verzögertes Schließen beim Verlassen
+    item.addEventListener('mouseleave', () => {
+      timeout = setTimeout(() => closeMenu(item), 500);
+    });
+
+    // Offen lassen beim Klicken
+    item.addEventListener('click', (e) => {
+      e.stopPropagation(); // Verhindert das Schließen von Menüs bei Klick
+      if (item.classList.contains('open')) {
+        closeMenu(item);
+      } else {
+        openMenu(item);
+      }
+    });
+  });
+
+  // Globale Klick-Listener, um Menüs zu schließen, wenn außerhalb geklickt wird
+  document.addEventListener('click', () => {
+    menuItems.forEach(item => closeMenu(item));
+  });
+
+  function openMenu(item) {
+    item.classList.add('open');
+    const submenu = item.querySelector('.dropdown-menu');
+    if (submenu) {
+      submenu.style.display = 'block';
+      submenu.style.opacity = '1';
+      submenu.style.visibility = 'visible';
+    }
+  }
+
+  function closeMenu(item) {
+    item.classList.remove('open');
+    const submenu = item.querySelector('.dropdown-menu');
+    if (submenu) {
+      submenu.style.display = 'none';
+      submenu.style.opacity = '0';
+      submenu.style.visibility = 'hidden';
+    }
+  }
 });