| 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> |
| ); |
| } |
|
|
