98 lines
4.9 KiB
TypeScript
98 lines
4.9 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 |