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');
|
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);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user