// ───────────────────────────────────────────────────────── // ChefVerse · Shell components — sidebar, topbar, locale chip // ───────────────────────────────────────────────────────── const { useState, useEffect, useRef } = React; // Reusable lucide icon (inline SVG so it works without runtime fetch) function Icon({ name, size = 16, strokeWidth = 1.75, style, className }) { const paths = { "panel-left": <>, "panel-top": <>, "bell": <>, "settings": <>, "search": <>, "chevron-down": <>, "chevron-up": <>, "chevron-right":<>, "chevron-left": <>, "chevrons-up-down": <>, "play": <>, "pause": <>, "skip-forward": <>, "skip-back": <>, "list-video": <>, "graduation-cap": <>, "layers": <>, "salad": <>, "book-open": <>, "compass": <>, "shield-check": <>, "message-circle": <>, "briefcase": <>, "users": <>, "user": <>, "help-circle": <>, "log-out": <>, "mail": <>, "music": <>, "camera": <>, "edit": <>, "alert-triangle": <>, "globe": <>, "check": <>, "check-circle": <>, "circle": <>, "lock": <>, "clock": <>, "calendar": <>, "video": <>, "captions": <>, "trending-up": <>, "trending-down":<>, "arrow-right": <>, "arrow-up-right": <>, "filter": <>, "plus": <>, "x": <>, "bookmark": <>, "bookmark-plus":<>, "maximize": <>, "minimize": <>, "instagram": <>, "facebook": <>, "tiktok": <>, "youtube": <>, "moon": <>, "sun": <>, "more-horizontal": <>, "edit-3": <>, "upload": <>, "file-text": <>, "info": <>, "trash-2": <>, "image": <>, "images": <>, "shield": <>, "flame": <>, "award": <>, "external-link": <>, "pin": <>, "send": <>, "download": <>, "refresh-cw": <>, "gift": <>, "circle": <>, "package": <>, "knife": <>, "sparkles": <>, "dot": <>, }; return ( {paths[name] || null} ); } // ───────────────────────────────────────────────────────── // Locale switcher in header // ───────────────────────────────────────────────────────── function LocaleChip({ locale, onChange }) { const [open, setOpen] = useState(false); const ref = useRef(null); useEffect(() => { const onDoc = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }; document.addEventListener("mousedown", onDoc); return () => document.removeEventListener("mousedown", onDoc); }, []); const t = window.I18N[locale]; return (
{open && (
{["en", "de", "id"].map(k => { const o = window.I18N[k]; return ( ); })}
)}
); } // ───────────────────────────────────────────────────────── // Sidebar // ───────────────────────────────────────────────────────── function Sidebar({ route, onRoute, locale, profile, onOpenNotif, hasUnread , onLogout }) { const t = window.I18N[locale].nav; const items = [ { id: "dashboard", icon: "layers", label: t.dashboard }, { id: "courses", icon: "book-open", label: t.learning }, { id: "briefs", icon: "flame", label: t.briefs }, { id: "rewards", icon: "award", label: locale === "de" ? "Belohnungen" : locale === "id" ? "Hadiah" : "Rewards" }, { id: "community", icon: "users", label: t.community }, ]; const accountItems = [ { id: "profile", icon: "user", label: t.profile }, { id: "help", icon: "help-circle", label: t.help }, ]; return ( ); } // ───────────────────────────────────────────────────────── // Sidebar profile menu — opens upward from the sidebar foot avatar. // Items: Profile, Settings, Help, Privacy, Terms, Logout // ───────────────────────────────────────────────────────── function SidebarProfileMenu({ locale, profile, onRoute, onLogout }) { const t = window.I18N[locale].nav; const [open, setOpen] = React.useState(false); const ref = React.useRef(null); React.useEffect(() => { if (!open) return; const onDoc = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }; const onEsc = (e) => { if (e.key === "Escape") setOpen(false); }; document.addEventListener("mousedown", onDoc); document.addEventListener("keydown", onEsc); return () => { document.removeEventListener("mousedown", onDoc); document.removeEventListener("keydown", onEsc); }; }, [open]); const go = (r) => { onRoute(r); setOpen(false); }; const openLegalTab = (kind) => { setOpen(false); try { const url = new URL(window.location.href); url.searchParams.set("p", kind); window.open(url.toString(), "_blank", "noopener,noreferrer"); } catch (e) {} }; const labels = { profile: locale === "de" ? "Profil" : locale === "id" ? "Profil" : "Profile", help: t.help || "Help", privacy: locale === "de" ? "Datenschutz" : locale === "id" ? "Privasi" : "Privacy", terms: locale === "de" ? "AGB" : locale === "id" ? "Ketentuan" : "Terms", logout: locale === "de" ? "Abmelden" : locale === "id" ? "Keluar" : "Log out", }; return (
{open && (
)}
); } // ───────────────────────────────────────────────────────── // UFSLocaleDropdown — design-system styled dropdown for locale/language pickers. // Used in mobile profile sheet, legal page, anywhere else a locale picker is needed. // Same shape as login locale picker but works as a generic embedded form control. // ───────────────────────────────────────────────────────── function UFSLocaleDropdown({ value, onChange, options, ariaLabel, fullWidth }) { const [open, setOpen] = React.useState(false); const ref = React.useRef(null); React.useEffect(() => { if (!open) return; const onDoc = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }; const onEsc = (e) => { if (e.key === "Escape") setOpen(false); }; document.addEventListener("mousedown", onDoc); document.addEventListener("keydown", onEsc); return () => { document.removeEventListener("mousedown", onDoc); document.removeEventListener("keydown", onEsc); }; }, [open]); const cur = options.find(o => o.value === value) || options[0]; return (
{open && (
{options.map(o => ( ))}
)}
); } window.UFSLocaleDropdown = UFSLocaleDropdown; window.SidebarProfileMenu = SidebarProfileMenu; // ───────────────────────────────────────────────────────── // Top bar (used inside sidebar layout) // ───────────────────────────────────────────────────────── function TopBar({ crumbs, locale, onLocaleChange, onOpenNotif, hasUnread, canGoBack, onBack, profile, onOpenProfileSheet }) { // Mobile: [back-arrow-IF-subpage] [page name] ... [profile-avatar] [bell] // Desktop: [panel-left] | [crumbs] ... [search] [locale] [bell] const pageTitle = crumbs && crumbs.length > 1 ? crumbs[crumbs.length - 1] : (crumbs && crumbs[0]) || ""; return (
{/* DESKTOP — panel toggle + crumbs */}
{crumbs.map((c, i) => ( {i > 0 && /} {c} ))}
{/* MOBILE LEFT — back arrow (sub-pages) + page title */}
{canGoBack && ( )}
{pageTitle}
{/* MOBILE CENTER — UFS logo, always visible on mobile/tablet portrait */}
UFS
{/* RIGHT */}
⌘K
{profile && ( )}
); } // Mobile profile sheet — slides up from bottom. Contains language switcher + nav function MobileProfileSheet({ open, onClose, locale, profile, onRoute, onLocaleChange, onLogout }) { const t = window.I18N[locale].nav; if (!open) return null; const go = (r) => { onRoute(r); onClose(); }; const openLegalTab = (kind) => { onClose(); try { const url = new URL(window.location.href); url.searchParams.set("p", kind); window.open(url.toString(), "_blank", "noopener,noreferrer"); } catch (e) {} }; // Just flag + language name (no country, no sub) const langs = ["en", "de", "id"].map(k => { const o = window.I18N[k]; return { code: k, flag: o.flag, label: o.locale.replace(/\s*\(.*\)$/, "") }; }); return ( <>
{/* Language selector — design-system styled dropdown (scalable for 70+) */}
Language
({ value: l.code, flag: l.flag, label: l.label }))} />
© 2026 Unilever Food Solutions
); } window.MobileProfileSheet = MobileProfileSheet; // ───────────────────────────────────────────────────────── // Saved-items store + SaveBtn — toggles Save / Saved label and color // ───────────────────────────────────────────────────────── (function () { if (window.__SAVED) return; const LS_KEY = "chefverse_saved_v1"; // New-chef demo profile: clear saved state on initial load so demo always starts fresh try { const isNewChefStartup = typeof window !== "undefined" && window.__CHEFVERSE_PROFILE === "new"; if (isNewChefStartup) localStorage.removeItem(LS_KEY); } catch (e) {} const load = () => { try { return JSON.parse(localStorage.getItem(LS_KEY) || "{}"); } catch (e) { return {}; } }; const save = (s) => { try { localStorage.setItem(LS_KEY, JSON.stringify(s)); } catch (e) {} }; let state = load(); const listeners = new Set(); window.__SAVED = { is(kind, id) { const key = kind + ":" + id; return !!state[key]; }, toggle(kind, id) { const key = kind + ":" + id; if (state[key]) delete state[key]; else state[key] = true; save(state); listeners.forEach(fn => fn()); }, subscribe(fn) { listeners.add(fn); return () => listeners.delete(fn); }, }; })(); function SaveBtn({ kind, id, label, savedLabel, className, size = 14 }) { const { useState, useEffect } = React; const [, force] = useState(0); useEffect(() => window.__SAVED.subscribe(() => force(n => n + 1)), []); const saved = window.__SAVED.is(kind, id); const lab = saved ? (savedLabel || "Saved") : (label || "Save"); const cls = saved ? ("btn btn-save-active " + (className || "")) : ("btn btn-outline " + (className || "")); return ( ); } window.SaveBtn = SaveBtn; window.Icon = Icon; window.LocaleChip = LocaleChip; window.Sidebar = Sidebar; window.TopBar = TopBar;