114 lines
3.2 KiB
TypeScript
114 lines
3.2 KiB
TypeScript
import { Bell, CalendarClock, Database, HardDrive, Settings } from "lucide-react";
|
|
import { Link, NavLink } from "react-router";
|
|
import {
|
|
Sidebar,
|
|
SidebarContent,
|
|
SidebarFooter,
|
|
SidebarGroup,
|
|
SidebarGroupContent,
|
|
SidebarHeader,
|
|
SidebarMenu,
|
|
SidebarMenuButton,
|
|
SidebarMenuItem,
|
|
useSidebar,
|
|
} from "~/client/components/ui/sidebar";
|
|
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "~/client/components/ui/tooltip";
|
|
import { cn } from "~/client/lib/utils";
|
|
import { APP_VERSION } from "~/client/lib/version";
|
|
|
|
const items = [
|
|
{
|
|
title: "Volumes",
|
|
url: "/volumes",
|
|
icon: HardDrive,
|
|
},
|
|
{
|
|
title: "Repositories",
|
|
url: "/repositories",
|
|
icon: Database,
|
|
},
|
|
{
|
|
title: "Backups",
|
|
url: "/backups",
|
|
icon: CalendarClock,
|
|
},
|
|
{
|
|
title: "Notifications",
|
|
url: "/notifications",
|
|
icon: Bell,
|
|
},
|
|
{
|
|
title: "Settings",
|
|
url: "/settings",
|
|
icon: Settings,
|
|
},
|
|
];
|
|
|
|
export function AppSidebar() {
|
|
const { state } = useSidebar();
|
|
const displayVersion = APP_VERSION.startsWith("v") || APP_VERSION === "dev" ? APP_VERSION : `v${APP_VERSION}`;
|
|
const releaseUrl =
|
|
APP_VERSION === "dev"
|
|
? "https://github.com/nicotsx/zerobyte"
|
|
: `https://github.com/nicotsx/zerobyte/releases/tag/${displayVersion}`;
|
|
|
|
return (
|
|
<Sidebar variant="inset" collapsible="icon" className="p-0">
|
|
<SidebarHeader className="bg-card-header border-b border-border/50 hidden md:flex h-16.25 flex-row items-center p-4">
|
|
<Link to="/volumes" className="flex items-center gap-3 font-semibold pl-2">
|
|
<img src="/images/zerobyte.png" alt="Zerobyte Logo" className={cn("h-8 w-8 shrink-0 object-contain -ml-2")} />
|
|
<span
|
|
className={cn("text-base transition-all duration-200 -ml-1", {
|
|
"opacity-0 w-0 overflow-hidden ": state === "collapsed",
|
|
})}
|
|
>
|
|
Zerobyte
|
|
</span>
|
|
</Link>
|
|
</SidebarHeader>
|
|
<SidebarContent className="p-2 border-r">
|
|
<SidebarGroup>
|
|
<SidebarGroupContent>
|
|
<SidebarMenu>
|
|
{items.map((item) => (
|
|
<SidebarMenuItem key={item.title}>
|
|
<TooltipProvider>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<SidebarMenuButton asChild>
|
|
<NavLink to={item.url}>
|
|
{({ isActive }) => (
|
|
<>
|
|
<item.icon className={cn({ "text-strong-accent": isActive })} />
|
|
<span className={cn({ "text-strong-accent": isActive })}>{item.title}</span>
|
|
</>
|
|
)}
|
|
</NavLink>
|
|
</SidebarMenuButton>
|
|
</TooltipTrigger>
|
|
<TooltipContent side="right" className={cn({ hidden: state !== "collapsed" })}>
|
|
<p>{item.title}</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</TooltipProvider>
|
|
</SidebarMenuItem>
|
|
))}
|
|
</SidebarMenu>
|
|
</SidebarGroupContent>
|
|
</SidebarGroup>
|
|
</SidebarContent>
|
|
<SidebarFooter className="p-4 border-r border-t border-border/50">
|
|
<a
|
|
href={releaseUrl}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
className={cn("text-xs text-muted-foreground transition-all duration-200 hover:text-foreground", {
|
|
"opacity-0 w-0 overflow-hidden": state === "collapsed",
|
|
})}
|
|
>
|
|
{displayVersion}
|
|
</a>
|
|
</SidebarFooter>
|
|
</Sidebar>
|
|
);
|
|
}
|