Extract menu to a separate component

2026-04-06 18:41:23 +02:00
parent 3258965bcc
commit 3c271e1632
3 changed files with 103 additions and 99 deletions
--- a/js/ui/bottomNav.js
+++ b/js/ui/bottomNav.js
@@ -0,0 +1,94 @@
+function syncThemeToggleButton(btn, isDark) {
+    if (!btn) return;
+    const icon = btn.querySelector('i');
+    if (icon) icon.className = isDark ? 'fas fa-sun' : 'fas fa-moon';
+    btn.setAttribute('aria-label', isDark ? 'Włącz jasny motyw' : 'Włącz ciemny motyw');
+    btn.title = isDark ? 'Jasny motyw' : 'Ciemny motyw';
+}
+
+function setupThemeToggle() {
+    const btn = document.getElementById('nav-theme-toggle');
+    if (!btn) return;
+
+    btn.addEventListener('click', () => {
+        const html = document.documentElement;
+        const isDark = html.classList.toggle('dark');
+        localStorage.setItem('theme', isDark ? 'dark' : 'light');
+
+        syncThemeToggleButton(btn, isDark);
+
+        const meta = document.querySelector('meta[name="theme-color"]');
+        if (meta) meta.setAttribute('content', isDark ? '#161513' : '#f3efe9');
+    });
+}
+
+export function getBottomNavHTML() {
+    const isDark = document.documentElement.classList.contains('dark');
+    return `
+    <nav id="app-bottom-nav" aria-label="Główna nawigacja">
+        <div class="bottom-dock">
+            <div class="nav-slot">
+                <button type="button" data-tab="recipes" id="nav-recipes" class="nav-tab is-active" aria-label="Przepisy" aria-current="page">
+                    <i class="fas fa-book" aria-hidden="true"></i>
+                </button>
+            </div>
+            <div class="nav-slot">
+                <button type="button" data-tab="planner" id="nav-planner" class="nav-tab" aria-label="Planer">
+                    <i class="far fa-calendar-alt" aria-hidden="true"></i>
+                </button>
+            </div>
+            <div class="nav-slot">
+                <button type="button" data-tab="pantry" id="nav-pantry" class="nav-tab" aria-label="Spiżarnia">
+                    <i class="fas fa-warehouse" aria-hidden="true"></i>
+                </button>
+            </div>
+            <div class="nav-slot">
+                <button type="button" id="nav-theme-toggle" class="nav-action" aria-label="${isDark ? 'Włącz jasny motyw' : 'Włącz ciemny motyw'}" title="${isDark ? 'Jasny motyw' : 'Ciemny motyw'}">
+                    <i class="${isDark ? 'fas fa-sun' : 'fas fa-moon'}" aria-hidden="true"></i>
+                </button>
+            </div>
+        </div>
+    </nav>
+    `;
+}
+
+export function setupBottomNav({ refreshPantry } = {}) {
+    const main = document.getElementById('main-view');
+    const planner = document.getElementById('planner-view');
+    const pantry = document.getElementById('pantry-view');
+    const nav = document.getElementById('app-bottom-nav');
+    if (!main || !planner || !pantry || !nav) return;
+
+    const apply = (tab) => {
+        main.classList.toggle('hidden', tab !== 'recipes');
+        planner.classList.toggle('hidden', tab !== 'planner');
+        pantry.classList.toggle('hidden', tab !== 'pantry');
+
+        if (tab === 'pantry' && typeof refreshPantry === 'function') refreshPantry();
+
+        nav.querySelectorAll('.nav-tab[data-tab]').forEach((btn) => {
+            const id = btn.getAttribute('data-tab');
+            if (btn.hasAttribute('disabled')) return;
+            if (id === 'recipes' || id === 'planner' || id === 'pantry') {
+                const isActive = id === tab;
+                btn.classList.toggle('is-active', isActive);
+                if (isActive) btn.setAttribute('aria-current', 'page');
+                else btn.removeAttribute('aria-current');
+            }
+        });
+    };
+
+    nav.addEventListener('click', (e) => {
+        const btn = e.target.closest('.nav-tab[data-tab]');
+        if (!btn || btn.hasAttribute('disabled')) return;
+        const tab = btn.getAttribute('data-tab');
+        if (tab === 'recipes' || tab === 'planner' || tab === 'pantry') apply(tab);
+    });
+
+    setupThemeToggle();
+    apply('recipes');
+
+    window.refreshStockViews = () => {
+        if (typeof refreshPantry === 'function') refreshPantry();
+    };
+}