79 lines
No EOL
2.6 KiB
TypeScript
79 lines
No EOL
2.6 KiB
TypeScript
import { Link } from "wouter"
|
|
import { SearchIcon, SettingsIcon, TagsIcon, ArchiveIcon, UserIcon, LayoutListIcon } from "lucide-react"
|
|
import { Button, buttonVariants } from "@/components/ui/button.tsx"
|
|
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip.tsx"
|
|
import { useLogin } from "@/state/user.ts";
|
|
import { useNavItems } from "./navAtom";
|
|
import { Separator } from "../ui/separator";
|
|
|
|
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>
|
|
}
|
|
|
|
interface NavItemButtonProps {
|
|
icon: React.ReactNode;
|
|
onClick: () => void;
|
|
name: string;
|
|
className?: string;
|
|
}
|
|
|
|
export function NavItemButton({
|
|
icon,
|
|
onClick,
|
|
name,
|
|
className
|
|
}: NavItemButtonProps) {
|
|
return <Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<Button
|
|
onClick={onClick}
|
|
variant="ghost"
|
|
className={className}
|
|
>
|
|
{icon}
|
|
<span className="sr-only">{name}</span>
|
|
</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent side="right">{name}</TooltipContent>
|
|
</Tooltip>
|
|
}
|
|
|
|
export function NavList() {
|
|
const loginInfo = useLogin();
|
|
const navItems = useNavItems();
|
|
|
|
return <aside className="h-dvh flex flex-col">
|
|
<nav className="flex flex-col items-center gap-4 px-2 sm:py-5 flex-1">
|
|
{navItems && <>{navItems} <Separator/> </>}
|
|
<NavItem icon={<SearchIcon className="h-5 w-5" />} to="/search" name="Search" />
|
|
<NavItem icon={<TagsIcon className="h-5 w-5" />} to="/tags" name="Tags" />
|
|
<NavItem icon={<ArchiveIcon className="h-5 w-5" />} to="/difference" name="Difference" />
|
|
<NavItem icon={<LayoutListIcon className="h-5 w-5" />} to="/queue" name="Task Queue" />
|
|
</nav>
|
|
<nav className="mt-auto flex flex-col items-center gap-4 px-2 sm:py-5 flex-grow-0">
|
|
<NavItem icon={<UserIcon className="h-5 w-5" />} to={ loginInfo ? "/profile" : "/login"} name={ loginInfo ? "Profiles" : "Login"} />
|
|
<NavItem icon={<SettingsIcon className="h-5 w-5" />} to="/setting" name="Settings" />
|
|
</nav>
|
|
</aside>
|
|
} |