ironmount/app/client/components/app-sidebar.tsx

import { 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: "Settings",
		url: "/settings",
		icon: Settings,
	},
];

export function AppSidebar() {
	const { state } = useSidebar();

	return (
		<Sidebar variant="inset" collapsible="icon" className="p-0">
			<SidebarHeader className="bg-card-header border-b border-border/50 hidden md:flex h-[65px] 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 flex-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">
				<div
					className={cn("text-xs text-muted-foreground transition-all duration-200", {
						"opacity-0 w-0 overflow-hidden": state === "collapsed",
					})}
				>
					{APP_VERSION}
				</div>
			</SidebarFooter>
		</Sidebar>
	);
}