);
}
// ── SideNavListSection ───────────────────────────────────────────────────────
// Figma: SideNav.ListSection (node 40007332:8034). A labelled grouping of flat
// nav items — no icons, no children, no expand/collapse. Used for contextual
// link lists (Recent Content, Pinned, Bookmarks). Only shown in expanded sidebar.
export function SideNavListSection({ label, items, activeId, onNavigate }) {
return (
{items.map(item => (
))}
);
}
export function SideNav({
items,
sections,
listSection,
activeId,
onNavigate,
collapsed = false,
onCollapseChange,
hideCollapseButton = false,
defaultExpanded = {},
className = "",
}) {
const [expanded, setExpanded] = useState(defaultExpanded);
const [popoverId, setPopoverId] = useState(null);
const [popoverRect, setPopoverRect] = useState(null);
const timerRef = useRef(null);
// Build a single flat list of all nav items for trail computation, regardless of
// whether the data was passed as flat `items` or as `sections` (which contain items).
// This keeps the active/trail logic unchanged from the flat-items API.
const flatItems = sections
? sections.flatMap(s => s.items)
: (items || []);
const trailParentId = (() => {
const p = flatItems.find(item => item.children && item.children.some(c => c.id === activeId));
return p ? p.id : null;
})();
// Accordion behaviour: opening one grouper auto-closes any other that's open.
// Matches the demo HTML (2026-05-13).
const toggleExpand = id => setExpanded(prev => {
const isNowOpen = !prev[id];
if (isNowOpen) return { [id]: true }; // close all others
const next = { ...prev }; delete next[id]; return next;
});
const onPopoverEnter = (id, rect) => {
clearTimeout(timerRef.current);
setPopoverId(id);
if (rect) setPopoverRect(rect);
};
const onPopoverLeave = () => {
timerRef.current = setTimeout(() => {
setPopoverId(null);
setPopoverRect(null);
}, 300);
};
// Renders one nav item + its animated child list. Shared between flat-items and
// sectioned renders so behaviour is identical regardless of which API is used.
const renderItem = (item) => {
const hasChildren = !!(item.children && item.children.length);
const isActive = item.id === activeId;
const isTrail = item.id === trailParentId;
const isExp = !!expanded[item.id];
return (
{/* Level 1 children — animated accordion. grid-template-rows 0fr→1fr at
340ms easeOutQuart, with inner wrapper opacity fade 240ms (60ms delay
on expand, no delay on collapse for snappier exit). */}
{hasChildren && !collapsed && (
{item.children.map(child => (
{}} />
))}
)}
);
};
return (
);
}
// ─── Built-in chevron icons ───────────────────────────────────────────────────
function ChevDown({ size = 10, color }) {
return (
);
}
function ChevUp({ size = 10, color }) {
return (
);
}
// ─── Collapse / Expand action icons (fetched from Figma 2026-05-12) ──────────
// right_panel_open — used on the collapse button when sidebar is EXPANDED (click to collapse)
// Token: Icon/Action/Secondary Inverse/Base (#6b6b6b)
// Figma component: SideBar Expand/Collapse, Type=Collapse, node 40006793:3783
function RightPanelOpenIcon({ size = 12, color = T.icon.actionSecondary }) {
return (
);
}
// left_panel_open — used on the collapse button when sidebar is COLLAPSED (click to expand)
// Token: Icon/Action/Secondary Inverse/Base (#6b6b6b)
// Figma component: SideBar Expand/Collapse, Type=Expand, node 40006793:3783
function LeftPanelOpenIcon({ size = 12, color = T.icon.actionSecondary }) {
return (
);
}