feat(nav): küche-super-modul in desktop-sidebar — konsistent mit mobile nav

This commit is contained in:
Ulas Kalayci
2026-04-29 21:04:26 +02:00
parent 6974d7a86d
commit 8e75a2584b
+56 -9
View File
@@ -465,7 +465,13 @@ function renderAppShell(container) {
const sidebarItems = document.createElement('div'); const sidebarItems = document.createElement('div');
sidebarItems.className = 'nav-sidebar__items'; sidebarItems.className = 'nav-sidebar__items';
sidebarItems.setAttribute('role', 'list'); 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(sidebarLogo);
sidebar.appendChild(sidebarItems); sidebar.appendChild(sidebarItems);
@@ -547,7 +553,7 @@ function renderAppShell(container) {
dragHandle.className = 'more-sheet__handle'; dragHandle.className = 'more-sheet__handle';
dragHandle.setAttribute('aria-hidden', 'true'); dragHandle.setAttribute('aria-hidden', 'true');
moreSheet.insertAdjacentElement('afterbegin', dragHandle); 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'); const searchOverlay = document.createElement('div');
searchOverlay.className = 'search-overlay'; searchOverlay.className = 'search-overlay';
@@ -945,10 +951,10 @@ function navItems() {
{ path: '/budget', label: t('nav.budget'), icon: 'wallet' }, { path: '/budget', label: t('nav.budget'), icon: 'wallet' },
{ path: '/documents', label: t('nav.documents'), icon: 'folder-lock' }, { path: '/documents', label: t('nav.documents'), icon: 'folder-lock' },
{ path: '/settings', label: t('nav.settings'), icon: 'settings' }, { path: '/settings', label: t('nav.settings'), icon: 'settings' },
// Sidebar only (Küche-Gruppe): // Kitchen-Gruppe: via Küche-Nav-Button (Bottom-Nav + Sidebar) + kitchen-tabs-bar erreichbar
{ path: '/meals', label: t('nav.meals'), icon: 'utensils', sidebarOnly: true }, { path: '/meals', label: t('nav.meals'), icon: 'utensils', kitchenGroup: true },
{ path: '/recipes', label: t('nav.recipes'), icon: 'book-text', sidebarOnly: true }, { path: '/recipes', label: t('nav.recipes'), icon: 'book-text', kitchenGroup: true },
{ path: '/shopping', label: t('nav.shopping'), icon: 'shopping-cart', sidebarOnly: true }, { path: '/shopping', label: t('nav.shopping'), icon: 'shopping-cart', kitchenGroup: true },
]; ];
} }
@@ -972,6 +978,30 @@ function navItemEl({ path, label, icon }) {
return a; 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 }) { function moreItemEl({ path, label, icon }) {
const a = document.createElement('a'); const a = document.createElement('a');
a.href = path; a.href = path;
@@ -1008,9 +1038,18 @@ function updateNav(path) {
kitchenNavBtn.toggleAttribute('aria-current', isKitchen); 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'); const moreBtn = document.querySelector('#more-btn');
if (moreBtn) { 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 activeSecondary = secondaryItems.find((n) => n.path === path);
const inMoreSheet = !!activeSecondary; const inMoreSheet = !!activeSecondary;
@@ -1189,7 +1228,15 @@ window.addEventListener('locale-changed', () => {
if (moreBtnLabel) moreBtnLabel.textContent = t('nav.more'); if (moreBtnLabel) moreBtnLabel.textContent = t('nav.more');
if (navSidebarItems) { 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) { if (bottomItems) {
const kitchenBtnEl = bottomItems.querySelector('#kitchen-btn'); const kitchenBtnEl = bottomItems.querySelector('#kitchen-btn');
@@ -1202,7 +1249,7 @@ window.addEventListener('locale-changed', () => {
} }
if (moreSheet) { if (moreSheet) {
const handle = moreSheet.querySelector('.more-sheet__handle'); 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); moreSheet.replaceChildren(handle, ...newMoreItems);
} }