From 8e75a2584be97650ad89372e9181c303d5b054c7 Mon Sep 17 00:00:00 2001
From: Ulas Kalayci <ulas.kalayci@googlemail.com>
Date: Wed, 29 Apr 2026 21:04:26 +0200
Subject: [PATCH] =?UTF-8?q?feat(nav):=20k=C3=BCche-super-modul=20in=20desk?=
 =?UTF-8?q?top-sidebar=20=E2=80=94=20konsistent=20mit=20mobile=20nav?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/router.js | 65 +++++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 56 insertions(+), 9 deletions(-)

diff --git a/public/router.js b/public/router.js
index fa2e72b..3878ca5 100644
--- a/public/router.js
+++ b/public/router.js
@@ -465,7 +465,13 @@ function renderAppShell(container) {
   const sidebarItems = document.createElement('div');
   sidebarItems.className = 'nav-sidebar__items';
   sidebarItems.setAttribute('role', 'list');
-  navItems().forEach((item) => sidebarItems.appendChild(navItemEl(item)));
+  navItems()
+    .filter((item) => !item.kitchenGroup)
+    .forEach((item) => {
+      sidebarItems.appendChild(navItemEl(item));
+      if (item.path === '/calendar') sidebarItems.appendChild(sidebarKitchenEl());
+    });
+  if (window.lucide) window.lucide.createIcons({ el: sidebarItems });
   sidebar.appendChild(sidebarLogo);
   sidebar.appendChild(sidebarItems);
 
@@ -547,7 +553,7 @@ function renderAppShell(container) {
   dragHandle.className = 'more-sheet__handle';
   dragHandle.setAttribute('aria-hidden', 'true');
   moreSheet.insertAdjacentElement('afterbegin', dragHandle);
-  navItems().filter((i) => !i.sidebarOnly).slice(PRIMARY_NAV).forEach((item) => moreSheet.appendChild(moreItemEl(item)));
+  navItems().filter((i) => !i.kitchenGroup).slice(PRIMARY_NAV).forEach((item) => moreSheet.appendChild(moreItemEl(item)));
 
   const searchOverlay = document.createElement('div');
   searchOverlay.className = 'search-overlay';
@@ -945,10 +951,10 @@ function navItems() {
     { path: '/budget',    label: t('nav.budget'),    icon: 'wallet'           },
     { path: '/documents', label: t('nav.documents'), icon: 'folder-lock'      },
     { path: '/settings',  label: t('nav.settings'),  icon: 'settings'         },
-    // Sidebar only (Küche-Gruppe):
-    { path: '/meals',     label: t('nav.meals'),     icon: 'utensils',      sidebarOnly: true },
-    { path: '/recipes',   label: t('nav.recipes'),   icon: 'book-text',     sidebarOnly: true },
-    { path: '/shopping',  label: t('nav.shopping'),  icon: 'shopping-cart', sidebarOnly: true },
+    // Kitchen-Gruppe: via Küche-Nav-Button (Bottom-Nav + Sidebar) + kitchen-tabs-bar erreichbar
+    { path: '/meals',     label: t('nav.meals'),     icon: 'utensils',      kitchenGroup: true },
+    { path: '/recipes',   label: t('nav.recipes'),   icon: 'book-text',     kitchenGroup: true },
+    { path: '/shopping',  label: t('nav.shopping'),  icon: 'shopping-cart', kitchenGroup: true },
   ];
 }
 
@@ -972,6 +978,30 @@ function navItemEl({ path, label, icon }) {
   return a;
 }
 
+function sidebarKitchenEl() {
+  const a = document.createElement('a');
+  a.href = '/meals';
+  a.id = 'sidebar-kitchen-nav';
+  a.className = 'nav-item';
+  a.setAttribute('role', 'listitem');
+  a.setAttribute('aria-label', t('nav.kitchen'));
+  a.setAttribute('title', t('nav.kitchen'));
+  const icon = document.createElement('i');
+  icon.dataset.lucide = 'utensils';
+  icon.className = 'nav-item__icon';
+  icon.setAttribute('aria-hidden', 'true');
+  const label = document.createElement('span');
+  label.className = 'nav-item__label';
+  label.textContent = t('nav.kitchen');
+  a.appendChild(icon);
+  a.appendChild(label);
+  a.addEventListener('click', (e) => {
+    e.preventDefault();
+    navigate(getLastKitchenRoute());
+  });
+  return a;
+}
+
 function moreItemEl({ path, label, icon }) {
   const a = document.createElement('a');
   a.href = path;
@@ -1008,9 +1038,18 @@ function updateNav(path) {
     kitchenNavBtn.toggleAttribute('aria-current', isKitchen);
   }
 
+  const sidebarKitchenNav = document.querySelector('#sidebar-kitchen-nav');
+  if (sidebarKitchenNav) {
+    if (isKitchenRoute(path)) {
+      sidebarKitchenNav.setAttribute('aria-current', 'page');
+    } else {
+      sidebarKitchenNav.removeAttribute('aria-current');
+    }
+  }
+
   const moreBtn = document.querySelector('#more-btn');
   if (moreBtn) {
-    const secondaryItems = navItems().filter((i) => !i.sidebarOnly).slice(PRIMARY_NAV);
+    const secondaryItems = navItems().filter((i) => !i.kitchenGroup).slice(PRIMARY_NAV);
     const activeSecondary = secondaryItems.find((n) => n.path === path);
     const inMoreSheet = !!activeSecondary;
 
@@ -1189,7 +1228,15 @@ window.addEventListener('locale-changed', () => {
   if (moreBtnLabel) moreBtnLabel.textContent = t('nav.more');
 
   if (navSidebarItems) {
-    navSidebarItems.replaceChildren(...navItems().map(navItemEl));
+    const sidebarEls = [];
+    navItems()
+      .filter((item) => !item.kitchenGroup)
+      .forEach((item) => {
+        sidebarEls.push(navItemEl(item));
+        if (item.path === '/calendar') sidebarEls.push(sidebarKitchenEl());
+      });
+    navSidebarItems.replaceChildren(...sidebarEls);
+    if (window.lucide) window.lucide.createIcons({ el: navSidebarItems });
   }
   if (bottomItems) {
     const kitchenBtnEl = bottomItems.querySelector('#kitchen-btn');
@@ -1202,7 +1249,7 @@ window.addEventListener('locale-changed', () => {
   }
   if (moreSheet) {
     const handle = moreSheet.querySelector('.more-sheet__handle');
-    const newMoreItems = navItems().filter((i) => !i.sidebarOnly).slice(PRIMARY_NAV).map(moreItemEl);
+    const newMoreItems = navItems().filter((i) => !i.kitchenGroup).slice(PRIMARY_NAV).map(moreItemEl);
     moreSheet.replaceChildren(handle, ...newMoreItems);
   }