File size: 2,908 Bytes
f4102c2 | 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 | "use client";
import Link from "next/link";
import Image from "next/image";
import { usePathname } from "next/navigation";
import {
LayoutDashboard,
HeartPulse,
Users,
BarChart3,
Brain,
Settings,
} from "lucide-react";
import { useT } from "@/i18n/context";
import { cn } from "@/lib/utils";
export function Sidebar() {
const { dict, locale } = useT();
const pathname = usePathname();
const items = [
{ href: "", label: dict.nav.dashboard, icon: LayoutDashboard },
{ href: "new-evaluation", label: dict.nav.newEvaluation, icon: HeartPulse },
{ href: "patients", label: dict.nav.patients, icon: Users },
{ href: "eda", label: dict.nav.eda, icon: BarChart3 },
{ href: "model", label: dict.nav.model, icon: Brain },
{ href: "settings", label: dict.nav.settings, icon: Settings },
];
return (
<aside className="sticky top-0 hidden h-screen w-64 flex-col border-r border-sidebar-border bg-sidebar text-sidebar-foreground lg:flex">
<div className="flex items-center gap-3 border-b border-sidebar-border px-5 py-5">
<div className="flex h-11 w-11 items-center justify-center overflow-hidden rounded-lg bg-white/5 ring-1 ring-white/10">
<Image
src="/logu1.png"
alt="BeatSense"
width={40}
height={40}
className="h-9 w-9 object-contain"
priority
/>
</div>
<div className="leading-tight">
<div className="text-sm font-bold tracking-wide text-white">
{dict.app.name}
</div>
<div className="text-[10px] uppercase tracking-widest text-sidebar-foreground/60">
{dict.app.tagline}
</div>
</div>
</div>
<nav className="flex-1 space-y-1 px-3 py-4">
{items.map(({ href, label, icon: Icon }) => {
const full = `/${locale}${href ? `/${href}` : ""}`;
const active =
href === ""
? pathname === `/${locale}` || pathname === `/${locale}/`
: pathname.startsWith(full);
return (
<Link
key={href}
href={full}
className={cn(
"group flex items-center gap-3 rounded-md px-3 py-2.5 text-sm font-medium transition-colors",
active
? "bg-sidebar-accent text-white"
: "text-sidebar-foreground/80 hover:bg-sidebar-accent/60 hover:text-white"
)}
>
<Icon className="h-4 w-4" />
{label}
</Link>
);
})}
</nav>
<div className="border-t border-sidebar-border px-5 py-4 text-[11px] leading-relaxed text-sidebar-foreground/60">
<div className="font-mono">{dict.app.institution}</div>
<div className="mt-1">v1.0 · {new Date().getFullYear()}</div>
</div>
</aside>
);
}
|