Sidebar: group links into Work, Setup and Admin

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
metatroncubeswdev 2026-10-23 10:25:11 -04:00
parent ca42c781fa
commit d9c5b8ccdf

View File

@ -30,12 +30,12 @@ const NAV = [
{ to: "/published", label: "Published", icon: BarChart3 }, { to: "/published", label: "Published", icon: BarChart3 },
{ to: "/competitors", label: "Competitors", icon: Swords }, { to: "/competitors", label: "Competitors", icon: Swords },
{ to: "/inbox", label: "Inbox", icon: MessageCircle }, { to: "/inbox", label: "Inbox", icon: MessageCircle },
{ to: "/connections", label: "Connections", icon: Plug }, { to: "/connections", label: "Connections", icon: Plug, group: "Setup" },
{ to: "/team", label: "Team", icon: Users2 }, { to: "/team", label: "Team", icon: Users2 },
{ to: "/runs", label: "AI runs", icon: Sparkles }, { to: "/runs", label: "AI runs", icon: Sparkles },
{ to: "/admin/health", label: "System health", icon: Activity, admin: true }, { to: "/admin/health", label: "System health", icon: Activity, admin: true, group: "Admin" },
{ to: "/admin/audit", label: "Audit log", icon: History, admin: true }, { to: "/admin/audit", label: "Audit log", icon: History, admin: true },
{ to: "/settings", label: "Settings", icon: Settings2 }, { to: "/settings", label: "Settings", icon: Settings2, group: "" },
]; ];
function Shell({ children }) { function Shell({ children }) {
@ -50,8 +50,9 @@ function Shell({ children }) {
</div> </div>
{agency && <div className="mt-2.5 text-[11px] font-semibold tracking-[0.08em] uppercase text-faint truncate" title={agency}>{agency}</div>} {agency && <div className="mt-2.5 text-[11px] font-semibold tracking-[0.08em] uppercase text-faint truncate" title={agency}>{agency}</div>}
</div> </div>
<nav className="px-2 mt-2 space-y-0.5 flex-1"> <nav className="px-2 mt-2 space-y-0.5 flex-1 overflow-y-auto" aria-label="Main">
{NAV.filter((n) => !n.admin || user.role === "admin").map(({ to, label, icon: Icon, end }) => ( {NAV.filter((n) => !n.admin || user.role === "admin").map(({ to, label, icon: Icon, end, group }) => [
group !== undefined && (group ? <div key={`g-${group}`} className="eyebrow px-2.5 pt-4 pb-1 text-faint">{group}</div> : <div key="g-sep" className="pt-3" />),
<NavLink <NavLink
key={to} key={to}
to={to} to={to}
@ -65,8 +66,8 @@ function Shell({ children }) {
> >
<Icon className="size-4" strokeWidth={2} /> <Icon className="size-4" strokeWidth={2} />
{label} {label}
</NavLink> </NavLink>,
))} ])}
</nav> </nav>
<div className="border-t border-line px-3 py-3 flex items-center gap-2.5"> <div className="border-t border-line px-3 py-3 flex items-center gap-2.5">
<div className="size-8 rounded-full bg-brand-soft text-brand-deep grid place-items-center font-semibold text-[12px]"> <div className="size-8 rounded-full bg-brand-soft text-brand-deep grid place-items-center font-semibold text-[12px]">