Tyler
89 lines
3.2 KiB
TypeScript
89 lines
3.2 KiB
TypeScript
import { NavLink } from "react-router-dom";
|
|
import {
|
|
Activity,
|
|
LayoutDashboard,
|
|
Receipt,
|
|
Stethoscope,
|
|
Upload as UploadIcon,
|
|
Users,
|
|
} from "lucide-react";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const nav = [
|
|
{ to: "/", label: "Dashboard", icon: LayoutDashboard, end: true },
|
|
{ to: "/claims", label: "Claims", icon: Receipt },
|
|
{ to: "/remittances", label: "Remittances", icon: Stethoscope },
|
|
{ to: "/providers", label: "Providers", icon: Users },
|
|
{ to: "/upload", label: "Upload", icon: UploadIcon },
|
|
{ to: "/activity", label: "Activity Log", icon: Activity },
|
|
];
|
|
|
|
export function Sidebar() {
|
|
return (
|
|
<aside className="hidden md:flex md:w-60 md:flex-col md:fixed md:inset-y-0 z-30 border-r border-border/60 bg-sidebar/60 backdrop-blur-xl">
|
|
<div className="flex h-16 items-center px-6 border-b border-border/60">
|
|
<div className="flex items-center gap-2.5">
|
|
<div className="h-7 w-7 rounded-md bg-accent flex items-center justify-center shadow-sm">
|
|
<svg viewBox="0 0 24 24" className="h-3.5 w-3.5 text-white" fill="none">
|
|
<path
|
|
d="M6 8h8a3 3 0 0 1 0 6h-5a3 3 0 0 0 0 6h9"
|
|
stroke="currentColor"
|
|
strokeWidth="2.4"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div className="leading-none">
|
|
<div className="text-[16px] font-semibold tracking-tight text-foreground">
|
|
Cyclone
|
|
</div>
|
|
<div className="text-[10px] uppercase tracking-[0.14em] text-muted-foreground mt-0.5">
|
|
CuNtx · Claims
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<nav className="flex-1 px-3 py-6">
|
|
<div className="text-[10px] font-semibold uppercase tracking-[0.18em] text-muted-foreground px-3 mb-2">
|
|
Workspace
|
|
</div>
|
|
<ul className="space-y-0.5">
|
|
{nav.map((item) => (
|
|
<li key={item.to}>
|
|
<NavLink
|
|
to={item.to}
|
|
end={item.end}
|
|
className={({ isActive }) =>
|
|
cn(
|
|
"group relative flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors",
|
|
isActive
|
|
? "nav-active"
|
|
: "text-muted-foreground hover:text-foreground hover:bg-muted/40"
|
|
)
|
|
}
|
|
>
|
|
<item.icon className="h-4 w-4" strokeWidth={1.75} />
|
|
<span>{item.label}</span>
|
|
</NavLink>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</nav>
|
|
|
|
<div className="px-3 py-4 border-t border-border/60">
|
|
<div className="flex items-center gap-3 rounded-md p-2 hover:bg-muted/40 cursor-default">
|
|
<div className="h-8 w-8 rounded-full bg-accent flex items-center justify-center text-[11px] font-semibold text-white ring-1 ring-inset ring-white/10">
|
|
JK
|
|
</div>
|
|
<div className="leading-tight">
|
|
<div className="text-sm font-medium">Jordan K.</div>
|
|
<div className="text-[11px] text-muted-foreground">Administrator</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
);
|
|
}
|