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

Refactored code and implemented that menüs open to the top

Browse Source
This commit is contained in:
Kevin Veen-Birkenbach 2025-01-15 13:07:02 +01:00
parent 82c111973d
commit 69fabafd9a
3 changed files with 38 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
app/static/css/navigation.css
View File

@ -1,15 +1,20 @@
/* Dropdown-Menüs verstecken */ /* Top-Level Dropdown-Menü */
.dropdown-menu { .nav-item .dropdown-menu {
display: none; position: absolute; /* Wichtig für Positionierung */
opacity: 0; top: 100%; /* Standardmäßige Öffnung nach unten */
visibility: hidden; left: 0;
width: max-content !important; /* Passt die Breite an das breiteste Item an */ z-index: 1050; /* Damit das Menü über anderen Elementen liegt */
box-sizing: border-box; /* Berücksichtigt Innenabstand und Rahmen */
} }
/* Positionierung von Submenüs */ /* Submenu-Position */
.dropdown-submenu > .dropdown-menu { .dropdown-submenu > .dropdown-menu {
position: absolute; position: absolute;
transition: opacity 0.3s ease, visibility 0.3s ease;
top: 0; 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;
} }

20
app/static/js/navigation.js
View File

@ -74,21 +74,19 @@ document.addEventListener('DOMContentLoaded', () => {
const rect = submenu.getBoundingClientRect(); const rect = submenu.getBoundingClientRect();
const parentRect = parent.getBoundingClientRect(); const parentRect = parent.getBoundingClientRect();
// Platzberechnung
const spaceAbove = parentRect.top; const spaceAbove = parentRect.top;
const spaceBelow = window.innerHeight - parentRect.bottom; const spaceBelow = window.innerHeight - parentRect.bottom;
const spaceLeft = parentRect.left; const spaceLeft = parentRect.left;
const spaceRight = window.innerWidth - parentRect.right; const spaceRight = window.innerWidth - parentRect.right;
// Standardpositionierung
submenu.style.top = ''; submenu.style.top = '';
submenu.style.bottom = ''; submenu.style.bottom = '';
submenu.style.left = ''; submenu.style.left = '';
submenu.style.right = ''; submenu.style.right = '';
if (isTopLevel) { if (isTopLevel) {
// Top-Level-Menüs öffnen nur nach oben oder unten // Top-Level-Menü
if (spaceBelow < rect.height && spaceAbove > rect.height) { if (spaceBelow < spaceAbove) {
submenu.style.bottom = `${window.innerHeight - parentRect.bottom - parentRect.height}px`; submenu.style.bottom = `${window.innerHeight - parentRect.bottom - parentRect.height}px`;
submenu.style.top = 'auto'; submenu.style.top = 'auto';
} else { } else {
@ -96,18 +94,18 @@ document.addEventListener('DOMContentLoaded', () => {
submenu.style.bottom = 'auto'; submenu.style.bottom = 'auto';
} }
} else { } else {
// Submenüs öffnen in die Richtung mit mehr Platz // Submenü
const prefersRight = spaceRight >= spaceLeft; const prefersRight = spaceRight >= spaceLeft;
submenu.style.left = prefersRight ? '100%' : 'auto'; submenu.style.left = prefersRight ? '100%' : 'auto';
submenu.style.right = prefersRight ? 'auto' : '100%'; submenu.style.right = prefersRight ? 'auto' : '100%';
// Öffnen nach oben, wenn unten kein Platz ist // Nach oben öffnen, wenn unten kein Platz ist
if (spaceBelow < rect.height && spaceAbove > rect.height) { if (spaceBelow < spaceAbove) {
submenu.style.top = 'auto'; submenu.style.bottom = `0`;
submenu.style.bottom = `${parentRect.bottom - parentRect.top - rect.height}px`; // Höhe des Submenüs wird berücksichtigt submenu.style.top = `auto`;
} else { } else {
submenu.style.top = '0'; submenu.style.top = `0`;
submenu.style.bottom = 'auto'; submenu.style.bottom = '${parentRect.height}px';
} }
} }
} }

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

@ -37,7 +37,7 @@
<!-- Navigation Bar --> <!-- Navigation Bar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light"> <nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid"> <div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav{{menu_type}}" aria-controls="navbarNav{{menu_type}}" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler" type="button" data-bs-target="#navbarNav{{menu_type}}" aria-controls="navbarNav{{menu_type}}" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<div class="collapse navbar-collapse" id="navbarNav{{menu_type}}"> <div class="collapse navbar-collapse" id="navbarNav{{menu_type}}">
@ -53,7 +53,7 @@
{% else %} {% else %}
<!-- Dropdown Menu --> <!-- Dropdown Menu -->
<li class="nav-item dropdown"> <li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdown{{ loop.index }}" role="button" data-bs-toggle="dropdown" data-bs-display="dynamic" aria-expanded="false"> <a class="nav-link dropdown-toggle" id="navbarDropdown{{ loop.index }}" role="button" data-bs-display="dynamic" aria-expanded="false">
{% if item.icon is defined and item.icon.class is defined %} {% if item.icon is defined and item.icon.class is defined %}
{{ render_icon_and_name(item) }} {{ render_icon_and_name(item) }}
{% else %} {% else %}