Fix: #bottom-nav aus #app heraus — position:fixed relativ zum echten Viewport, SW by-v532

This commit is contained in:
rene 2026-04-30 08:34:25 +02:00
parent 460cc47844
commit 6e938b9fa1
3 changed files with 26 additions and 25 deletions

View file

@ -434,32 +434,33 @@
</main>
<!-- MOBILE BOTTOM NAVIGATION -->
<nav id="bottom-nav" role="navigation" aria-label="Hauptnavigation">
<div class="nav-item" data-page="map">
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#map-trifold"></use></svg>
<span class="nav-item-label">Karte</span>
</div>
<div class="nav-item" data-page="routes">
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#path"></use></svg>
<span class="nav-item-label">Routen</span>
</div>
<!-- Mittlerer + Button -->
<div class="nav-item nav-item-center" id="nav-add">
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#plus"></use></svg>
</div>
<div class="nav-item active" data-page="diary">
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#book-open"></use></svg>
<span class="nav-item-label">Tagebuch</span>
</div>
<div class="nav-item" data-page="forum">
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#push-pin"></use></svg>
<span class="nav-item-label">Forum</span>
</div>
</nav>
</div><!-- #app -->
<!-- MOBILE BOTTOM NAVIGATION — außerhalb #app damit position:fixed zum echten Viewport -->
<nav id="bottom-nav" role="navigation" aria-label="Hauptnavigation">
<div class="nav-item" data-page="map">
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#map-trifold"></use></svg>
<span class="nav-item-label">Karte</span>
</div>
<div class="nav-item" data-page="routes">
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#path"></use></svg>
<span class="nav-item-label">Routen</span>
</div>
<!-- Mittlerer + Button -->
<div class="nav-item nav-item-center" id="nav-add">
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#plus"></use></svg>
</div>
<div class="nav-item active" data-page="diary">
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#book-open"></use></svg>
<span class="nav-item-label">Tagebuch</span>
</div>
<div class="nav-item" data-page="forum">
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#push-pin"></use></svg>
<span class="nav-item-label">Forum</span>
</div>
</nav>
<!-- TOAST CONTAINER (außerhalb der App, immer sichtbar) -->
<div class="toast-container" id="toast-container" role="alert" aria-live="polite"></div>