/* FP&A Copilot — left navigation sidebar */ /* Dark mode — persists in localStorage, applies data-theme on */ function initTheme() { const saved = localStorage.getItem("monthendiq_theme") || "light"; document.documentElement.dataset.theme = saved; } initTheme(); function toggleTheme() { const next = document.documentElement.dataset.theme === "dark" ? "light" : "dark"; document.documentElement.dataset.theme = next; try { localStorage.setItem("monthendiq_theme", next); } catch {} } function Sidebar({ active, onNav, hasData }) { const { Icon, Logo } = window; const [isDark, setIsDark] = React.useState( () => document.documentElement.dataset.theme === "dark" ); const [firmName, setFirmName] = React.useState(() => { try { return localStorage.getItem("meiq_firm_name") || ""; } catch { return ""; } }); // Sync firm name when Settings saves it (same tab or other tabs) React.useEffect(() => { const sync = () => { try { setFirmName(localStorage.getItem("meiq_firm_name") || ""); } catch {} }; window.addEventListener("meiq:firm-updated", sync); window.addEventListener("storage", sync); return () => { window.removeEventListener("meiq:firm-updated", sync); window.removeEventListener("storage", sync); }; }, []); const initials = firmName.trim() ? firmName.trim().split(/\s+/).slice(0, 2).map(w => w[0].toUpperCase()).join("") : "FP"; const handleThemeToggle = () => { toggleTheme(); setIsDark(document.documentElement.dataset.theme === "dark"); }; const nav = [ { id: "dashboard", icon: "layout-dashboard", label: "Dashboard" }, // A custom dashboard is a variant of the dashboard, not a later step in the // analysis, so it sits next to it rather than after Insights. { id: "builder", icon: "layout-grid", label: "Custom dashboard" }, { id: "copilot", icon: "sparkles", label: "AI Analyst" }, { id: "movements", icon: "list-tree", label: "Movements" }, { id: "insights", icon: "lightbulb", label: "Insights" }, { id: "reports", icon: "file-bar-chart", label: "Reports" }, { id: "scenarios", icon: "sliders-horizontal", label: "Scenarios" }, ]; const tools = [ { id: "portfolio", icon: "briefcase", label: "Clients" }, { id: "data", icon: "database", label: "Data & Sources" }, { id: "settings", icon: "settings", label: "Settings" }, ]; // Views that don't require a loaded session const ALWAYS = ["portfolio", "data", "settings"]; // A real ); }; return ( ); } Object.assign(window, { Sidebar });