57 lines
2.0 KiB
TypeScript
57 lines
2.0 KiB
TypeScript
'use client';
|
|
import { UserNav } from '@/components/user-nav';
|
|
import { navs } from '@/config/navs';
|
|
import {
|
|
Sidebar,
|
|
SidebarContent,
|
|
SidebarMenu,
|
|
SidebarMenuButton,
|
|
SidebarMenuItem,
|
|
} from '@workspace/ui/components/sidebar';
|
|
import { Icon } from '@workspace/ui/custom-components/icon';
|
|
import { useTranslations } from 'next-intl';
|
|
import Image from 'next/legacy/image';
|
|
import Link from 'next/link';
|
|
import { usePathname } from 'next/navigation';
|
|
|
|
export function SidebarLeft({ ...props }: React.ComponentProps<typeof Sidebar>) {
|
|
const t = useTranslations('menu');
|
|
const pathname = usePathname();
|
|
return (
|
|
<Sidebar collapsible='none' side='left' {...props} className={'h-auto bg-white'}>
|
|
<div className='pb-7 pt-12'>
|
|
<Image src={'image.png'} width={102} height={49} alt='logo' unoptimized />
|
|
</div>
|
|
<SidebarContent className={''}>
|
|
<SidebarMenu className={'gap-2.5'}>
|
|
{navs.map((nav, navIndex) => (
|
|
<SidebarMenu key={navIndex} className={navIndex === 0 ? 'mb-[42px]' : 'mb-0'}>
|
|
{(nav.items || [nav]).map((item) => (
|
|
<SidebarMenuItem key={item.title} className={''}>
|
|
<SidebarMenuButton
|
|
className={
|
|
'h-[60px] rounded-full px-5 py-[18px] text-xl hover:bg-[#0F2C53] active:bg-[#0F2C53] data-[active=true]:bg-[#0F2C53]'
|
|
}
|
|
asChild
|
|
tooltip={t(item.title)}
|
|
isActive={item.url === pathname}
|
|
>
|
|
<Link href={item.url}>
|
|
{item.icon && <Icon className={'!size-6'} icon={item.icon} />}
|
|
<span>{t(item.title)}</span>
|
|
</Link>
|
|
</SidebarMenuButton>
|
|
</SidebarMenuItem>
|
|
))}
|
|
</SidebarMenu>
|
|
))}
|
|
</SidebarMenu>
|
|
</SidebarContent>
|
|
|
|
<div>
|
|
<UserNav from='profile' />
|
|
</div>
|
|
</Sidebar>
|
|
);
|
|
}
|