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

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

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

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

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

@ -37,7 +37,7 @@
<!-- Navigation Bar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<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>
</button>
<div class="collapse navbar-collapse" id="navbarNav{{menu_type}}">
@ -53,7 +53,7 @@
{% else %}
<!-- Dropdown Menu -->
<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 %}
{{ render_icon_and_name(item) }}
{% else %}