89 lines
No EOL
2.9 KiB
TypeScript
89 lines
No EOL
2.9 KiB
TypeScript
import Link from "next/link";
|
|
import { LayoutGrid, FolderKanban, Settings, Users, CalendarRange } from "lucide-react";
|
|
|
|
import { cn } from "@/lib/cn";
|
|
import { KanbanNav } from "@/components/shell/kanban-nav";
|
|
import type { SidebarProjectGroup } from "@/lib/data/board";
|
|
import type { Role } from "@/lib/pb/types";
|
|
|
|
interface NavItem {
|
|
href: string;
|
|
label: string;
|
|
icon: React.ComponentType<{ size?: number; strokeWidth?: number }>;
|
|
ownerOnly?: boolean;
|
|
}
|
|
|
|
const NAV: NavItem[] = [
|
|
{ href: "/", label: "Projects", icon: LayoutGrid },
|
|
{ href: "/plan", label: "Plan", icon: CalendarRange },
|
|
{ href: "/admin/clients", label: "Clients", icon: Users, ownerOnly: true },
|
|
{ href: "/admin/projects", label: "Manage", icon: FolderKanban, ownerOnly: true },
|
|
{ href: "/admin/settings", label: "Settings", icon: Settings, ownerOnly: true },
|
|
];
|
|
|
|
function NavLink({ item, active }: { item: NavItem; active: boolean }) {
|
|
const Icon = item.icon;
|
|
return (
|
|
<Link
|
|
href={item.href}
|
|
aria-current={active ? "page" : undefined}
|
|
className={cn(
|
|
"flex w-[60px] flex-col items-center gap-1 rounded-xl px-1 py-2.5 transition-colors",
|
|
active
|
|
? "bg-panel text-text-primary shadow-[var(--shadow-tile)]"
|
|
: "text-text-muted hover:text-text-secondary"
|
|
)}
|
|
>
|
|
<Icon size={18} strokeWidth={1.75} />
|
|
<span className="text-[10px] font-medium leading-none">{item.label}</span>
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* The icon rail from the reference: an icon over a small label, not an icon
|
|
* alone. Icon-only rails force everyone to learn a private vocabulary, and a
|
|
* client manager visits this maybe twice a month.
|
|
*
|
|
* Owner-only links are filtered out here for tidiness. That is presentation,
|
|
* not security — the pages themselves re-check the role.
|
|
*
|
|
* "Kanban" is not in NAV: it is not a destination, it is a picker (see
|
|
* KanbanNav), so it renders separately between Projects and the rest.
|
|
*/
|
|
export function Sidebar({
|
|
role,
|
|
currentPath,
|
|
kanbanGroups,
|
|
}: {
|
|
role: Role;
|
|
currentPath: string;
|
|
kanbanGroups: SidebarProjectGroup[];
|
|
}) {
|
|
const items = NAV.filter((item) => !item.ownerOnly || role === "owner");
|
|
const isActive = (item: NavItem) =>
|
|
item.href === "/" ? currentPath === "/" : currentPath.startsWith(item.href);
|
|
|
|
return (
|
|
<nav
|
|
aria-label="Main"
|
|
className="flex w-[76px] shrink-0 flex-col items-center gap-1 py-5"
|
|
>
|
|
<div className="mb-5 grid h-9 w-9 place-items-center rounded-xl bg-brand text-brand-fg">
|
|
<span className="text-sm font-semibold">CB</span>
|
|
</div>
|
|
|
|
<NavLink item={items[0]} active={isActive(items[0])} />
|
|
|
|
<KanbanNav
|
|
role={role}
|
|
groups={kanbanGroups}
|
|
active={currentPath.startsWith("/p/")}
|
|
/>
|
|
|
|
{items.slice(1).map((item) => (
|
|
<NavLink key={item.href} item={item} active={isActive(item)} />
|
|
))}
|
|
</nav>
|
|
);
|
|
} |