46 lines
No EOL
1.7 KiB
TypeScript
46 lines
No EOL
1.7 KiB
TypeScript
import { Link } from "wouter"
|
|
import { MagnifyingGlassIcon, GearIcon, ActivityLogIcon, ArchiveIcon, PersonIcon } from "@radix-ui/react-icons"
|
|
import { buttonVariants } from "@/components/ui/button.tsx"
|
|
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip.tsx"
|
|
import { useLogin } from "@/state/user.ts";
|
|
|
|
interface NavItemProps {
|
|
icon: React.ReactNode;
|
|
to: string;
|
|
name: string;
|
|
}
|
|
|
|
export function NavItem({
|
|
icon,
|
|
to,
|
|
name
|
|
}: NavItemProps) {
|
|
return <Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<Link
|
|
href={to}
|
|
className={buttonVariants({ variant: "ghost" })}
|
|
>
|
|
{icon}
|
|
<span className="sr-only">{name}</span>
|
|
</Link>
|
|
</TooltipTrigger>
|
|
<TooltipContent side="right">{name}</TooltipContent>
|
|
</Tooltip>
|
|
}
|
|
|
|
export function NavList() {
|
|
const loginInfo = useLogin();
|
|
|
|
return <aside className="h-screen flex flex-col">
|
|
<nav className="flex flex-col items-center gap-4 px-2 sm:py-5 flex-1">
|
|
<NavItem icon={<MagnifyingGlassIcon className="h-5 w-5" />} to="/search" name="Search" />
|
|
<NavItem icon={<ActivityLogIcon className="h-5 w-5" />} to="/tags" name="Tags" />
|
|
<NavItem icon={<ArchiveIcon className="h-5 w-5" />} to="/difference" name="Difference" />
|
|
</nav>
|
|
<nav className="mt-auto flex flex-col items-center gap-4 px-2 sm:py-5 flex-grow-0">
|
|
<NavItem icon={<PersonIcon className="h-5 w-5" />} to={ loginInfo ? "/profile" : "/login"} name={ loginInfo ? "Profiles" : "Login"} />
|
|
<NavItem icon={<GearIcon className="h-5 w-5" />} to="/setting" name="Settings" />
|
|
</nav>
|
|
</aside>
|
|
} |