feat(nav): küche-super-modul in desktop-sidebar — konsistent mit mobile nav
This commit is contained in:
+56
-9
@@ -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);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user