Added dynamic submenus

app/static/css/default.css

@@ -106,3 +106,11 @@ h3.footer-title{
   left: 100%; /* Positioniert das Submenü rechts vom Hauptmenü */
   margin-top: -1px;
 }
+
+.dropdown-menu.collapse {
+  display: none;
+}
+
+.dropdown-menu.collapse.show {
+  display: block;
+}

app/static/js/close-submenus.js

@@ -0,0 +1,21 @@
+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/templates/moduls/base.html.j2

@@ -39,6 +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/tooltip.js') }}"></script>
     </body>
 </html>

app/templates/moduls/navigation.html.j2

@@ -3,33 +3,34 @@
     {% for subitem in subitems %}
         {% if subitem.subitems %}
             <li class="dropdown-submenu">
-                <a class="dropdown-item" title="{{ subitem.description }}">
+                <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 }}">
                     <i class="{{ subitem.icon.class }}"></i> {{ subitem.name }}
                 </a>
-                <ul class="dropdown-submenu">
+                <ul class="dropdown-menu collapse" id="submenu-content-{{menu_type}}-{{ loop.index }}">
                     {{ render_subitems(subitem.subitems) }}
                 </ul>
             </li>
         {% elif subitem.popup %}
             <li>
-                <a class="dropdown-item" onclick='openDynamicPopup({{subitem|tojson|safe}})' data-bs-toggle="tooltip" title="{{ subitem.description }}">
+                <a class="dropdown-item" onclick='openDynamicPopup({{ subitem|tojson|safe }})' data-bs-toggle="tooltip" title="{{ subitem.description }}">
                     <i class="{{ subitem.icon.class }}"></i> {{ subitem.name }}
                 </a>
             </li>
         {% else %}
             <li>
                 <a class="dropdown-item" href="{{ subitem.href }}" target="{{ subitem.target|default('_blank') }}" data-bs-toggle="tooltip" title="{{ subitem.description }}">
-                {% if subitem.icon is defined and subitem.icon.class is defined %}
+                    {% if subitem.icon is defined and subitem.icon.class is defined %}
-                    <i class="{{ subitem.icon.class }}"></i> {{ subitem.name }}
+                        <i class="{{ subitem.icon.class }}"></i> {{ subitem.name }}
-                {% else %}
+                    {% else %}
-                    <p>Fehlendes Icon im Subitem: {{ subitem }}</p>
+                        <p>Fehlendes Icon im Subitem: {{ subitem }}</p>
-                {% endif %} 
+                    {% endif %}
                 </a>
             </li>
         {% endif %}
     {% endfor %}
 {% endmacro %}
 
+
  <!-- Navigation Bar -->
 <nav class="navbar navbar-expand-lg navbar-light bg-light">
     <div class="container-fluid">