Ulas Kalayci
c4cb52d042
Extracts the tab-bar UI into a reusable renderSubTabs() utility (public/utils/sub-tabs.js + public/styles/sub-tabs.css) so all sub-module navigation shares one implementation and visual style. - Settings: replaces template-literal <nav class="settings-tabs"> with renderSubTabs(); tabs now show icon + label (pill-style), group separators via separatorBefore, panel switching via onChange - Kitchen: renderKitchenTabsBar() becomes a thin wrapper around renderSubTabs(); kitchen-tabs.css keeps only layout adjustment rules - CSS: kitchen-tab* rules removed from kitchen-tabs.css, settings-tab-btn* rules removed from settings.css; both now inherit from sub-tabs.css - tokens.css: adds --sub-tabs-height (52px default; kitchen overrides to --kitchen-tabs-height: 56px) - test-browser-loader.mjs: resolves browser-absolute /utils/*.js imports to public/ directory for Node test compatibility Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
39 lines
1.2 KiB
JavaScript
39 lines
1.2 KiB
JavaScript
import { t } from '/i18n.js';
|
|
import { renderSubTabs } from '/utils/sub-tabs.js';
|
|
|
|
export const KITCHEN_ROUTES = ['/meals', '/recipes', '/shopping'];
|
|
export const KITCHEN_STORAGE_KEY = 'oikos-kitchen-tab';
|
|
|
|
const TABS = () => [
|
|
{ route: '/meals', labelKey: 'nav.meals', icon: 'utensils' },
|
|
{ route: '/recipes', labelKey: 'nav.recipes', icon: 'book-text' },
|
|
{ route: '/shopping', labelKey: 'nav.shopping', icon: 'shopping-cart' },
|
|
];
|
|
|
|
export function getLastKitchenRoute() {
|
|
try {
|
|
const stored = sessionStorage.getItem(KITCHEN_STORAGE_KEY);
|
|
return KITCHEN_ROUTES.includes(stored) ? stored : '/meals';
|
|
} catch {
|
|
return '/meals';
|
|
}
|
|
}
|
|
|
|
export function isKitchenRoute(path) {
|
|
return KITCHEN_ROUTES.includes(path);
|
|
}
|
|
|
|
export function renderKitchenTabsBar(container, activeRoute) {
|
|
container.classList.add('has-kitchen-tabs');
|
|
|
|
renderSubTabs(container, {
|
|
tabs: TABS().map(({ route, labelKey, icon }) => ({ id: route, label: t(labelKey), icon })),
|
|
activeId: activeRoute,
|
|
storageKey: KITCHEN_STORAGE_KEY,
|
|
extraClass: 'kitchen-tabs-bar',
|
|
ariaLabel: t('nav.kitchen'),
|
|
insertPosition: 'afterbegin',
|
|
onChange: (route) => window.oikos?.navigate(route),
|
|
});
|
|
}
|