File size: 4,355 Bytes
65d68f5 | 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 100 101 102 103 104 | import Image from "next/image";
import { ChevronsLeft } from "lucide-react";
import LiquidGlass from "liquid-glass-react";
import { cn } from "@/lib/utils";
import {
primaryWorkspaceNavItems,
settingsWorkspaceNavItem,
type DashboardSection,
} from "@/components/dashboard/workspaceNavigation";
type WorkspaceSidebarProps = {
activeSection: DashboardSection;
onSelectSection: (section: DashboardSection) => void;
};
export function WorkspaceSidebar({ activeSection, onSelectSection }: WorkspaceSidebarProps) {
const SettingsIcon = settingsWorkspaceNavItem.icon;
return (
<LiquidGlass
blurAmount={0.03}
saturation={110}
elasticity={0.12}
displacementScale={24}
aberrationIntensity={1.0}
cornerRadius={0}
mode="standard"
className="hidden h-svh w-[92px] shrink-0 flex-col border-r border-white/[0.075] bg-black/40 px-3 py-4 shadow-[12px_0_38px_rgba(0,0,0,0.3)] lg:flex"
>
<button
type="button"
onClick={() => onSelectSection("home")}
aria-label="DocDoe AI home"
className="mx-auto grid size-12 cursor-pointer place-items-center overflow-hidden rounded-2xl border border-white/[0.14] bg-[#030303] shadow-[0_0_24px_rgba(255,255,255,0.09)] transition hover:border-white/25 hover:bg-white/[0.035] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/25"
>
<Image
src="/docdoe-logo-mark.png"
alt=""
width={30}
height={30}
className="scale-[1.08] object-contain"
priority
/>
</button>
<nav className="mt-6 flex flex-1 flex-col items-stretch gap-1" aria-label="Workspace navigation">
{primaryWorkspaceNavItems.map((item) => {
const Icon = item.icon;
const isActive = activeSection === item.id;
return (
<button
key={item.label}
type="button"
aria-pressed={isActive}
onClick={() => onSelectSection(item.id)}
className={cn(
"group flex h-[58px] cursor-pointer flex-col items-center justify-center gap-1.5 rounded-2xl border text-[10.75px] font-semibold transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/25",
isActive
? "border-white/22 bg-white/[0.08] text-white shadow-[0_0_24px_rgba(255,255,255,0.08),inset_0_1px_0_rgba(255,255,255,0.08)]"
: "border-transparent text-white/58 hover:border-white/10 hover:bg-white/[0.05] hover:text-white/88",
)}
>
<Icon
className={cn(
"size-[18px] transition",
isActive ? "text-white drop-shadow-[0_0_10px_rgba(255,255,255,0.35)]" : "text-current",
)}
strokeWidth={1.9}
aria-hidden="true"
/>
<span>{item.label}</span>
</button>
);
})}
</nav>
<div className="mt-auto flex flex-col gap-2 border-t border-white/[0.07] pt-3">
<button
type="button"
aria-label="Settings"
aria-pressed={activeSection === "settings"}
onClick={() => onSelectSection("settings")}
className={cn(
"grid h-10 cursor-pointer place-items-center rounded-2xl border transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-300/55",
activeSection === "settings"
? "border-violet-300/34 bg-violet-500/[0.14] text-white shadow-[0_0_28px_rgba(124,58,237,0.26)]"
: "border-white/10 bg-white/[0.04] text-white/64 hover:border-violet-300/25 hover:text-white",
)}
>
<SettingsIcon className="size-5" strokeWidth={1.8} aria-hidden="true" />
</button>
<button
type="button"
className="grid h-10 cursor-pointer place-items-center rounded-2xl border border-white/10 bg-white/[0.03] text-white/44 transition hover:border-white/16 hover:text-white/76 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/20"
aria-label="Collapse sidebar"
>
<ChevronsLeft className="size-5" strokeWidth={1.8} aria-hidden="true" />
</button>
</div>
</LiquidGlass>
);
}
|