/* Sidebar shell — sized for breath, animated indicator, route switcher */
const NAV = [
{ id: 'calendar', label: 'Calendar', icon: 'calendar_month' },
{ id: 'compose', label: 'Compose', icon: 'auto_awesome' },
{ id: 'mediathek', label: 'Mediathek', icon: 'photo_library' },
{ id: 'inbox', label: 'Inbox', icon: 'forum', badge: 8 },
{ id: 'accounts', label: 'Accounts', icon: 'link' },
{ id: 'brand', label: 'Brand', icon: 'palette' },
];
function Sidebar({ route, setRoute }) {
const itemRefs = useRef({});
const [indicator, setIndicator] = useState({ top: 0, height: 0, opacity: 0 });
useLayoutEffect(() => {
const el = itemRefs.current[route];
if (el) {
// Center a fixed-height pill on the active item — the pill rides above
// the button background so it stays a clean accent rather than getting
// chewed into corner-notches by the button's rounded corners.
const PILL_H = 20;
const top = el.offsetTop + (el.offsetHeight - PILL_H) / 2;
setIndicator({ top, height: PILL_H, opacity: 1 });
}
}, [route]);
return (
);
}
function TopBar({ route }) {
const titles = {
calendar: { t: 'Calendar', s: 'Plan, schedule and review posts across every market.' },
compose: { t: 'Compose', s: 'Draft a post or generate creative — upload first, AI when you need it.' },
mediathek: { t: 'Mediathek', s: 'Every creative organised by campaign and channel. Drop briefs by email.' },
inbox: { t: 'Inbox', s: 'Unified DMs, comments and mentions from every connected channel.' },
accounts: { t: 'Accounts', s: 'OAuth connections across Instagram and TikTok.' },
brand: { t: 'Brand', s: 'Tone, USPs and per-market overrides.' },
};
const c = titles[route] || titles.calendar;
return (
);
}
function Shell({ route, setRoute, children }) {
return (
);
}
Object.assign(window, { Sidebar, TopBar, Shell, NAV });