Implemented hover submenüs

app/static/css/default.css

@@ -113,4 +113,27 @@ h3.footer-title{
 
 .dropdown-menu.collapse.show {
   display: block;
-}
+}
+
+/* Standardmäßig sind die Submenüs ausgeblendet */
+.dropdown-submenu .dropdown-menu {
+  display: none;
+  opacity: 0;
+  transition: opacity 0.3s ease-in-out;
+  position: absolute;
+  left: 100%;
+  top: 0;
+}
+
+/* Beim Hover auf das Submenü-Element wird das Menü angezeigt */
+.dropdown-submenu:hover > .dropdown-menu {
+  display: block;
+  opacity: 1;
+  z-index: 1050;
+}
+
+/* Um sicherzustellen, dass es nicht sofort verschwindet */
+.dropdown-submenu:hover > .dropdown-menu:hover {
+  display: block;
+  opacity: 1;
+}

app/static/js/close-submenus.js

@@ -1,21 +0,0 @@
-document.addEventListener('DOMContentLoaded', () => {
-    const dropdownSubmenus = document.querySelectorAll('.dropdown-submenu > .dropdown-item');
-
-    dropdownSubmenus.forEach((submenu) => {
-        submenu.addEventListener('click', (event) => {
-            event.preventDefault();
-            const targetMenu = document.querySelector(submenu.getAttribute('data-bs-target'));
-            const allSubmenus = document.querySelectorAll('.dropdown-menu.collapse');
-            
-            // Schließe alle anderen Submenüs
-            allSubmenus.forEach((menu) => {
-                if (menu !== targetMenu) {
-                    menu.classList.remove('show');
-                }
-            });
-
-            // Toggle des aktuellen Submenüs
-            targetMenu.classList.toggle('show');
-        });
-    });
-});

app/static/js/submenus.js

@@ -0,0 +1,28 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const dropdownSubmenus = document.querySelectorAll('.dropdown-submenu');
+
+    dropdownSubmenus.forEach(submenu => {
+        let timeout;
+
+        // Zeige das Submenü beim Hover
+        submenu.addEventListener('mouseenter', () => {
+            clearTimeout(timeout);
+            const menu = submenu.querySelector('.dropdown-menu');
+            if (menu) {
+                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
+            }
+        });
+    });
+});

app/templates/moduls/base.html.j2

@@ -39,7 +39,7 @@
         <!-- Include modal -->
         {% include "moduls/modal.html.j2" %}
         <script src="{{ url_for('static', filename='js/dynamic-modal.js') }}"></script>
-        <script src="{{ url_for('static', filename='js/close-submenus.js') }}"></script>
+        <script src="{{ url_for('static', filename='js/submenus.js') }}"></script>
         <script src="{{ url_for('static', filename='js/tooltip.js') }}"></script>
     </body>
 </html>

app/templates/moduls/navigation.html.j2

@@ -2,11 +2,11 @@
 {% macro render_subitems(subitems) %}
     {% for subitem in subitems %}
         {% if subitem.subitems %}
-            <li class="dropdown-submenu">
-                <a class="dropdown-item dropdown-toggle" href="#" id="submenu-{{ loop.index }}" data-bs-toggle="collapse" data-bs-target="#submenu-content-{{menu_type}}-{{ loop.index }}" aria-expanded="false" title="{{ subitem.description }}">
+            <li class="dropdown-submenu position-relative">
+                <a class="dropdown-item dropdown-toggle" href="#" title="{{ subitem.description }}">
                     <i class="{{ subitem.icon.class }}"></i> {{ subitem.name }}
                 </a>
-                <ul class="dropdown-menu collapse" id="submenu-content-{{menu_type}}-{{ loop.index }}">
+                <ul class="dropdown-menu">
                     {{ render_subitems(subitem.subitems) }}
                 </ul>
             </li>
@@ -30,7 +30,6 @@
     {% endfor %}
 {% endmacro %}
 
-
  <!-- Navigation Bar -->
 <nav class="navbar navbar-expand-lg navbar-light bg-light">
     <div class="container-fluid">