113 lines
5.0 KiB
TypeScript
113 lines
5.0 KiB
TypeScript
"use client";
|
|
import React from "react";
|
|
import { ScrollArea } from "@/components/ui/scroll-area";
|
|
import DashCodeLogo from "@/components/dascode-logo";
|
|
import { Group, Submenu } from "@/lib/menus";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Icon } from "@/components/ui/icon";
|
|
import {
|
|
Tooltip,
|
|
TooltipContent,
|
|
TooltipProvider,
|
|
TooltipTrigger,
|
|
} from "@/components/ui/tooltip";
|
|
import { Link } from "@/i18n/routing";
|
|
import { cn } from "@/lib/utils";
|
|
import { useConfig } from "@/hooks/use-config";
|
|
|
|
interface IconNavProps {
|
|
menuList: Group[];
|
|
}
|
|
const IconNav = ({ menuList }: IconNavProps) => {
|
|
const [config, setConfig] = useConfig();
|
|
|
|
return (
|
|
<div className=" h-full bg-sidebar border-r border-default-200 dark:border-secondary border-dashed w-[72px]">
|
|
<div className="text-center py-5">
|
|
<DashCodeLogo className=" text-default-900 h-8 w-8 [&>path:nth-child(3)]:text-background [&>path:nth-child(2)]:text-background mx-auto" />
|
|
</div>
|
|
<ScrollArea className="[&>div>div[style]]:!block h-full">
|
|
<nav className="mt-8 h-full w-full ">
|
|
<ul className=" h-full flex flex-col min-h-[calc(100vh-48px-36px-16px-32px)] lg:min-h-[calc(100vh-32px-40px-32px)] items-start space-y-2 ">
|
|
{menuList?.map(({ groupLabel, menus }, index) => (
|
|
<li key={index} className=" block w-full">
|
|
{menus?.map(
|
|
({ href, label, icon, active, id, submenus }, menuIndex) => (
|
|
<TooltipProvider disableHoverableContent key={menuIndex}>
|
|
<Tooltip delayDuration={100}>
|
|
<TooltipTrigger asChild>
|
|
{submenus.length === 0 ? (
|
|
<Button
|
|
onClick={() =>
|
|
setConfig((prevConfig) => ({
|
|
...prevConfig,
|
|
hasSubMenu: false,
|
|
subMenu: true,
|
|
}))
|
|
}
|
|
asChild
|
|
size="icon"
|
|
color="secondary"
|
|
variant={active ? "default" : "ghost"}
|
|
className={cn(
|
|
"h-12 w-12 mx-auto mb-2 hover:ring-1 hover:ring-offset-0 hover:ring-default-200 dark:hover:ring-menu-arrow-active hover:bg-default-100 dark:hover:bg-secondary ",
|
|
{
|
|
"bg-default-100 dark:bg-secondary hover:bg-default-200/80 dark:hover:bg-menu-arrow-active ring-1 ring-default-200 dark:ring-menu-arrow-active":
|
|
active,
|
|
}
|
|
)}
|
|
>
|
|
<Link href={href}>
|
|
<Icon
|
|
icon={icon}
|
|
className=" w-6 h-6 text-default-500 dark:text-secondary-foreground "
|
|
/>
|
|
</Link>
|
|
</Button>
|
|
) : (
|
|
<Button
|
|
onClick={() =>
|
|
setConfig((prevConfig) => ({
|
|
...prevConfig,
|
|
hasSubMenu: true,
|
|
subMenu: false,
|
|
}))
|
|
}
|
|
asChild
|
|
size="icon"
|
|
color="secondary"
|
|
variant={active ? "default" : "ghost"}
|
|
className={cn(
|
|
"h-12 w-12 mx-auto mb-2 hover:ring-1 hover:ring-offset-0 hover:ring-default-200 dark:hover:ring-menu-arrow-active hover:bg-default-100 dark:hover:bg-secondary ",
|
|
{
|
|
"bg-default-100 dark:bg-secondary hover:bg-default-200/80 dark:hover:bg-menu-arrow-active ring-1 ring-default-200 dark:ring-menu-arrow-active":
|
|
active,
|
|
}
|
|
)}
|
|
>
|
|
<Link href={href}>
|
|
<Icon
|
|
icon={icon}
|
|
className=" w-6 h-6 text-default-500 dark:text-secondary-foreground "
|
|
/>
|
|
</Link>
|
|
</Button>
|
|
)}
|
|
</TooltipTrigger>
|
|
|
|
<TooltipContent side="right">{label}</TooltipContent>
|
|
</Tooltip>
|
|
</TooltipProvider>
|
|
)
|
|
)}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</nav>
|
|
</ScrollArea>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default IconNav;
|