Weiter gebaut

bin/main/static/js/mobile-nav.js

@@ -4,7 +4,8 @@
 
     const path = window.location.pathname;
     const I = window.IC || function () { return ''; };
-    const TOPBAR_H = '4.875rem';
+    const TOPBAR_H  = '4.875rem';
+    const BOT_NAV_H = '3.75rem';
 
     // ── CSS ──────────────────────────────────────────────────────────────────
     const style = document.createElement('style');
@@ -82,7 +83,7 @@
             display: none;
             position: fixed;
             top: ${TOPBAR_H};
-            left: 0; right: 0; bottom: 0;
+            left: 0; right: 0; bottom: ${BOT_NAV_H};
             background: rgba(0,0,0,0.55);
             z-index: 998;
         }
@@ -93,7 +94,7 @@
             position: fixed;
             top: ${TOPBAR_H};
             right: 0;
-            bottom: 0;
+            bottom: ${BOT_NAV_H};
             width: min(80%, 360px);
             background: var(--color-card);
             border-left: 1px solid var(--color-secondary);
@@ -155,10 +156,54 @@
         .mnav-link--danger       { color: var(--color-primary); }
         .mnav-link--danger:hover { background: rgba(var(--color-primary-rgb,233,69,96),0.1); color: var(--color-primary); }
 
+        /* ── Bottom Navigation Bar ── */
+        .mob-bottom-nav {
+            display: none;
+            position: fixed;
+            bottom: 0; left: 0; right: 0;
+            height: ${BOT_NAV_H};
+            background: var(--color-card);
+            border-top: 1px solid var(--color-secondary);
+            box-shadow: 0 -2px 12px rgba(0,0,0,0.3);
+            z-index: 500;
+            align-items: stretch;
+        }
+        .mob-bn-tab {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            gap: 0.18rem;
+            text-decoration: none;
+            color: var(--color-muted);
+            font-size: 1.25rem;
+            line-height: 1;
+            cursor: pointer;
+            background: none;
+            border: none;
+            padding: 0.25rem 0;
+            transition: color 0.12s;
+            -webkit-tap-highlight-color: transparent;
+        }
+        .mob-bn-tab.active { color: var(--color-primary); }
+        .mob-bn-tab:hover  { color: var(--color-text); }
+        .mob-bn-label {
+            font-size: 0.6rem;
+            font-weight: 600;
+            line-height: 1;
+            letter-spacing: 0.01em;
+        }
+
         /* ── Show only on mobile ── */
         @media (max-width: 768px) {
             .mobile-topbar { display: flex; }
-            body.app       { padding-top: ${TOPBAR_H}; }
+            .mob-bottom-nav { display: flex; }
+            body.app {
+                padding-top: ${TOPBAR_H};
+                padding-bottom: ${BOT_NAV_H};
+            }
+            #mobMenuToggle { display: none; }
         }
     `;
     document.head.appendChild(style);
@@ -322,6 +367,35 @@
     document.body.appendChild(backdropEl);
     document.body.appendChild(panelEl);
 
+    // ── Bottom Navigation Bar ─────────────────────────────────────────────────
+    const onGames = path.startsWith('/games/');
+    const bottomNavEl = document.createElement('nav');
+    bottomNavEl.className = 'mob-bottom-nav';
+    bottomNavEl.id = 'mobBottomNav';
+    bottomNavEl.innerHTML = `
+        <a href="/userhome.html" class="mob-bn-tab${path === '/userhome.html' ? ' active' : ''}">
+            <span>${I('HOME') || '🏠'}</span>
+            <span class="mob-bn-label">Home</span>
+        </a>
+        <a href="/community/feed.html" class="mob-bn-tab${path.startsWith('/community/') ? ' active' : ''}">
+            <span>${I('GROUPS') || '👥'}</span>
+            <span class="mob-bn-label">Community</span>
+        </a>
+        <a href="/dating/dating.html" class="mob-bn-tab${path.startsWith('/dating/') ? ' active' : ''}" id="mobBnDatingTab">
+            <span>${I('DATING') || '♥'}</span>
+            <span class="mob-bn-label">Dating</span>
+        </a>
+        <button class="mob-bn-tab${onGames ? ' active' : ''}" id="mobBnGamesTab" aria-label="Games">
+            <span>${I('GAMEPAD') || '🕹️'}</span>
+            <span class="mob-bn-label">Games</span>
+        </button>
+        <a href="/konto/einstellungen.html" class="mob-bn-tab${path.startsWith('/konto/') || path.startsWith('/help/') ? ' active' : ''}">
+            <span>${I('SETTINGS') || '⚙️'}</span>
+            <span class="mob-bn-label">Konto</span>
+        </a>
+    `;
+    document.body.appendChild(bottomNavEl);
+
     // ── Accordion (nur eine Sektion gleichzeitig offen) ──────────────────────
     panelEl.querySelectorAll('.mnav-section-header').forEach(h => {
         h.addEventListener('click', () => {
@@ -333,7 +407,13 @@
     });
 
     // ── Open / Close ──────────────────────────────────────────────────────────
-    function openMenu() {
+    function openMenu(focusSectionLabel) {
+        if (focusSectionLabel) {
+            panelEl.querySelectorAll('.mnav-section').forEach(s => {
+                const label = s.querySelector('.mnav-section-header span')?.textContent?.trim();
+                s.classList.toggle('open', label === focusSectionLabel);
+            });
+        }
         panelEl.classList.add('open');
         backdropEl.classList.add('open');
     }
@@ -352,6 +432,22 @@
         l.addEventListener('click', () => { if (l.getAttribute('href') !== '#') closeMenu(); });
     });
 
+    // ── Games-Tab öffnet Panel mit Games-Sektionen ────────────────────────────
+    document.getElementById('mobBnGamesTab').addEventListener('click', e => {
+        e.stopPropagation();
+        if (panelEl.classList.contains('open')) {
+            closeMenu();
+        } else {
+            // Ersten aktiven Game-Bereich öffnen, sonst Vanilla Game als Default
+            const gameLabels = ['Vanilla Game', 'BDSM Game', 'Chastity Game'];
+            const activeLabel = gameLabels.find(lbl => {
+                const prefix = { 'Vanilla Game': '/games/vanilla/', 'BDSM Game': '/games/bdsm/', 'Chastity Game': '/games/chastity/' }[lbl];
+                return path.startsWith(prefix);
+            }) || 'Vanilla Game';
+            openMenu(activeLabel);
+        }
+    });
+
     // ── Badges ────────────────────────────────────────────────────────────────
     function setBadge(id, n) {
         const el = document.getElementById(id);
@@ -406,13 +502,14 @@
             if (el) el.style.display = '';
         }
 
-        // Dating
+        // Dating (Panel-Link + Bottom-Nav-Tab)
+        const datingHref = user.datingAktiv
+            ? '/dating/dating.html'
+            : '/konto/einstellungen.html#sec-dating';
         const datingLink = document.getElementById('mnavDatingLink');
-        if (datingLink) {
-            datingLink.href = user.datingAktiv
-                ? '/dating/dating.html'
-                : '/konto/einstellungen.html#sec-dating';
-        }
+        if (datingLink) datingLink.href = datingHref;
+        const bnDatingTab = document.getElementById('mobBnDatingTab');
+        if (bnDatingTab) bnDatingTab.href = datingHref;
 
         const hide    = id => { const el = document.getElementById(id); if (el) el.style.display = 'none'; };
         const show    = id => { const el = document.getElementById(id); if (el) el.style.display = ''; };