Spaces:
Configuration error
Configuration error
File size: 3,452 Bytes
151ec26 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 | "use client";
import React from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import {
LayoutDashboard,
Cpu,
FileText,
MessageSquareHeart,
User,
History,
ShieldAlert,
Sparkles,
LucideIcon,
} from "lucide-react";
import { useAuth } from "@/lib/auth-context";
interface NavItem {
name: string;
href: string;
icon: LucideIcon;
badge?: string;
highlight?: boolean;
}
export const Sidebar: React.FC = () => {
const pathname = usePathname();
const { user } = useAuth();
const navItems: NavItem[] = [
{ name: "Overview", href: "/dashboard", icon: LayoutDashboard },
{ name: "Biomedical NER", href: "/ner", icon: Cpu, badge: "Local ML" },
{ name: "Medical Reports", href: "/reports", icon: FileText },
{ name: "AI Assistant", href: "/assistant", icon: MessageSquareHeart },
{ name: "Health Profile", href: "/profile", icon: User },
{ name: "Medical History", href: "/history", icon: History },
];
if (user?.role === "ADMIN") {
navItems.push({ name: "Admin & Audit", href: "/admin", icon: ShieldAlert });
}
// Demo walkthrough always available
navItems.push({ name: "Mentor Demo Mode", href: "/demo", icon: Sparkles, highlight: true });
return (
<aside className="w-64 bg-white border-r border-slate-200/80 min-h-[calc(100vh-61px)] p-4 flex flex-col justify-between hidden md:flex">
<div className="space-y-1">
<p className="px-3 text-[11px] font-bold text-slate-400 uppercase tracking-wider mb-2">
Clinical Workspace
</p>
{navItems.map((item) => {
const isActive = pathname === item.href || (item.href !== "/" && pathname.startsWith(item.href));
const Icon = item.icon;
return (
<Link
key={item.href}
href={item.href}
className={`flex items-center justify-between px-3 py-2.5 rounded-xl text-sm font-medium transition-all ${
item.highlight
? "bg-gradient-to-r from-teal-50 to-emerald-50 text-teal-800 border border-teal-200 font-semibold"
: isActive
? "bg-teal-600 text-white shadow-xs"
: "text-slate-600 hover:bg-slate-100 hover:text-slate-900"
}`}
>
<div className="flex items-center gap-3">
<Icon className={`w-4 h-4 ${isActive && !item.highlight ? "text-white" : "text-teal-600"}`} />
<span>{item.name}</span>
</div>
{item.badge && (
<span
className={`text-[10px] uppercase font-bold px-1.5 py-0.5 rounded ${
isActive ? "bg-teal-700 text-teal-100" : "bg-teal-100 text-teal-800"
}`}
>
{item.badge}
</span>
)}
</Link>
);
})}
</div>
<div className="pt-4 border-t border-slate-100 space-y-3">
<div className="bg-slate-50 border border-slate-200/80 rounded-xl p-3 text-xs text-slate-600">
<p className="font-semibold text-slate-900 mb-1 flex items-center gap-1.5">
<span className="w-2 h-2 rounded-full bg-emerald-500"></span>
Local Model Loaded
</p>
<p className="text-[11px] text-slate-500 font-mono">tner/roberta-large-bc5cdr</p>
</div>
</div>
</aside>
);
};
|