mlogclub
87 lines
2.7 KiB
TypeScript
87 lines
2.7 KiB
TypeScript
"use client"
|
|
|
|
import { MessagesSquareIcon, TicketCheckIcon } from "lucide-react"
|
|
import Link from "next/link"
|
|
import { usePathname } from "next/navigation"
|
|
|
|
import { useI18n } from "@/i18n/provider"
|
|
import { cn } from "@/lib/utils"
|
|
import {
|
|
Tooltip,
|
|
TooltipContent,
|
|
TooltipTrigger,
|
|
} from "@/components/ui/tooltip"
|
|
import { WorkspaceSwitcher } from "@/components/workspace-switcher"
|
|
|
|
const workbenchRailItems = [
|
|
{
|
|
key: "conversations",
|
|
titleKey: "nav.conversations",
|
|
href: "/workbench",
|
|
icon: MessagesSquareIcon,
|
|
},
|
|
{
|
|
key: "tickets",
|
|
titleKey: "nav.tickets",
|
|
href: "/workbench/tickets",
|
|
icon: TicketCheckIcon,
|
|
},
|
|
]
|
|
|
|
function normalizePath(path: string | null | undefined) {
|
|
if (!path) {
|
|
return ""
|
|
}
|
|
return path.length > 1 ? path.replace(/\/+$/, "") : path
|
|
}
|
|
|
|
export function WorkbenchRail() {
|
|
const t = useI18n()
|
|
const pathname = usePathname()
|
|
const currentPath = normalizePath(pathname)
|
|
|
|
return (
|
|
<aside className="flex h-svh w-16 shrink-0 flex-col items-center border-r border-border/70 bg-sidebar px-2 py-3 text-sidebar-foreground">
|
|
<div className="mb-4 flex w-full justify-center">
|
|
<WorkspaceSwitcher currentWorkspace="workbench" variant="rail" />
|
|
</div>
|
|
<nav className="flex w-full flex-col items-center gap-2">
|
|
{workbenchRailItems.map((item) => {
|
|
const Icon = item.icon
|
|
const itemPath = normalizePath(item.href)
|
|
const isActive =
|
|
item.key === "conversations"
|
|
? currentPath === "/workbench"
|
|
: currentPath === itemPath || currentPath.startsWith(`${itemPath}/`)
|
|
const title = t(item.titleKey)
|
|
|
|
return (
|
|
<Tooltip key={item.key}>
|
|
<TooltipTrigger
|
|
render={
|
|
<Link
|
|
href={item.href}
|
|
aria-label={title}
|
|
aria-current={isActive ? "page" : undefined}
|
|
className={cn(
|
|
"flex size-11 items-center justify-center rounded-lg bg-transparent text-sidebar-foreground/65 transition-colors hover:text-sidebar-foreground",
|
|
isActive &&
|
|
"bg-sidebar-primary text-sidebar-primary-foreground hover:bg-sidebar-primary hover:text-sidebar-primary-foreground"
|
|
)}
|
|
/>
|
|
}
|
|
>
|
|
<Icon className="size-4" />
|
|
<span className="sr-only">{title}</span>
|
|
</TooltipTrigger>
|
|
<TooltipContent side="right" align="center">
|
|
{title}
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
)
|
|
})}
|
|
</nav>
|
|
</aside>
|
|
)
|
|
}
|