kevinveenbirkenbach/homepage.veen.world
1
0
Fork 0
mirror of https://github.com/kevinveenbirkenbach/homepage.veen.world.git synced 2025-01-15 19:23:58 +01:00
Code Issues Packages Projects Releases Wiki Activity

Added dynamic submenus

Browse Source
This commit is contained in:
Kevin Veen-Birkenbach 2025-01-09 14:36:44 +01:00
parent d8ec067675
commit 7a66184a46
4 changed files with 39 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/static/css/default.css
View File

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

21
app/static/js/close-submenus.js Normal file
View File

@ -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');
});
});
});

1
app/templates/moduls/base.html.j2
View File

@ -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>

17
app/templates/moduls/navigation.html.j2
View File

@ -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 %}
<i class="{{ subitem.icon.class }}"></i> {{ subitem.name }}
{% else %}
<p>Fehlendes Icon im Subitem: {{ subitem }}</p>
{% endif %}
{% if subitem.icon is defined and subitem.icon.class is defined %}
<i class="{{ subitem.icon.class }}"></i> {{ subitem.name }}
{% else %}
<p>Fehlendes Icon im Subitem: {{ subitem }}</p>
{% endif %}
</a>
</li>
{% endif %}
{% endfor %}
{% endmacro %}
<!-- Navigation Bar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">