Ulas Kalayci
69 lines
2.1 KiB
JavaScript
69 lines
2.1 KiB
JavaScript
import { t } from '/i18n.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) {
|
|
try {
|
|
sessionStorage.setItem(KITCHEN_STORAGE_KEY, activeRoute);
|
|
} catch { /* ignore */ }
|
|
|
|
container.classList.add('has-kitchen-tabs');
|
|
|
|
const bar = document.createElement('div');
|
|
bar.className = 'kitchen-tabs-bar';
|
|
bar.setAttribute('role', 'tablist');
|
|
bar.setAttribute('aria-label', t('nav.kitchen'));
|
|
|
|
TABS().forEach(({ route, labelKey, icon }) => {
|
|
const btn = document.createElement('button');
|
|
btn.className = 'kitchen-tab' + (route === activeRoute ? ' kitchen-tab--active' : '');
|
|
btn.dataset.route = route;
|
|
btn.type = 'button';
|
|
btn.setAttribute('role', 'tab');
|
|
btn.setAttribute('aria-selected', route === activeRoute ? 'true' : 'false');
|
|
|
|
const i = document.createElement('i');
|
|
i.dataset.lucide = icon;
|
|
i.className = 'kitchen-tab__icon';
|
|
i.setAttribute('aria-hidden', 'true');
|
|
|
|
const span = document.createElement('span');
|
|
span.className = 'kitchen-tab__label';
|
|
span.textContent = t(labelKey);
|
|
|
|
btn.appendChild(i);
|
|
btn.appendChild(span);
|
|
bar.appendChild(btn);
|
|
});
|
|
|
|
bar.addEventListener('click', (e) => {
|
|
const btn = e.target.closest('[data-route]');
|
|
if (!btn || btn.dataset.route === activeRoute) return;
|
|
window.oikos?.navigate(btn.dataset.route);
|
|
});
|
|
|
|
container.insertAdjacentElement('afterbegin', bar);
|
|
|
|
if (window.lucide) window.lucide.createIcons({ el: bar });
|
|
}
|