Live component development with hot reload
@fieldflow360/org-ui
Active tab
sidebar-primitives
Sidebar Primitives
SidebarHeader + NavGroupLink + SidebarCollapseButton
<SidebarHeader title="FieldFlow" logo={<span>FF</span>} />
<NavGroupLink
href="/dashboard"
isActive
isCollapsed={false}
icon={<HomeIcon />}
title="Dashboard"
/>
<SidebarCollapseButton
isCollapsed={collapsed}
onToggle={() => setCollapsed((v) => !v)}
/>Sidebar route config + expandable group
const sidebarRoutes = [
{ id: 'dashboard', title: 'Dashboard', href: '/dashboard', icon: HomeIcon },
{
id: 'tools',
title: 'Tools',
children: [
{ id: 'org-settings', title: 'Organization settings', href: '/settings/org' },
{ id: 'user-settings', title: 'User settings', href: '/settings/user/appearance' },
],
},
];
<button onClick={() => setExpanded((v) => !v)}>Tools</button>
{expanded && (
<>
<NavGroupLink href="/settings/org" title="Organization settings" ... />
<NavGroupLink href="/settings/user/appearance" title="User settings" ... />
</>
)}