83 lines
3.0 KiB
TypeScript
83 lines
3.0 KiB
TypeScript
'use client';
|
|
import { UserNav } from '@/components/user-nav';
|
|
import { navs } from '@/config/navs';
|
|
import {
|
|
Sidebar,
|
|
SidebarContent,
|
|
SidebarFooter,
|
|
SidebarMenu,
|
|
SidebarMenuButton,
|
|
SidebarMenuItem,
|
|
useSidebar,
|
|
} from '@workspace/airo-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();
|
|
const { toggleSidebar } = useSidebar();
|
|
return (
|
|
<Sidebar side='left' {...props} className={'border-0 bg-transparent sm:bg-white'}>
|
|
<div
|
|
className={
|
|
'relative ml-2.5 flex h-[calc(100dvh-10px-env(safe-area-inset-top))] flex-col rounded-[30px] bg-[#D9D9D9] px-4 sm:ml-0 sm:h-full sm:rounded-none sm:bg-white'
|
|
}
|
|
>
|
|
<div
|
|
className={
|
|
'absolute -left-2.5 top-2.5 -z-10 h-full w-full rounded-[30px] bg-[#225BA9] sm:hidden'
|
|
}
|
|
></div>
|
|
<div className='pb-7 pl-4 pt-5 sm:pt-12'>
|
|
<Link href={'/dashboard'}>
|
|
<Image
|
|
className={'cursor-pointer'}
|
|
src={'image.png'}
|
|
width={102}
|
|
height={49}
|
|
alt='logo'
|
|
unoptimized
|
|
/>
|
|
</Link>
|
|
</div>
|
|
<SidebarContent className={''}>
|
|
<SidebarMenu className={'gap-1 sm:gap-2.5'}>
|
|
{navs
|
|
.filter((v) => !v.hidden)
|
|
.map((nav, navIndex) => (
|
|
<SidebarMenu
|
|
key={navIndex}
|
|
className={navIndex === 0 ? 'mb-4 sm:mb-[42px]' : 'mb-0'}
|
|
>
|
|
<SidebarMenuItem key={nav.title} className={''}>
|
|
<SidebarMenuButton
|
|
className={
|
|
'h-[40px] rounded-full bg-[#EAEAEA] px-5 font-medium hover:bg-[#EAEAEA] hover:text-[#0F2C53] focus-visible:!outline-none focus-visible:!ring-0 active:bg-[#EAEAEA] active:text-[#0F2C53] data-[active=true]:bg-[#0F2C53] sm:h-[60px] sm:bg-white sm:text-xl sm:font-normal'
|
|
}
|
|
asChild
|
|
tooltip={t(nav.title)}
|
|
isActive={nav.url === pathname}
|
|
>
|
|
<Link href={nav.url} onClick={toggleSidebar} className={'gap-4 sm:gap-0.5'}>
|
|
{nav.icon && <Icon className={'!size-4 sm:!size-6'} icon={nav.icon} />}
|
|
<span>{t(nav.title)}</span>
|
|
</Link>
|
|
</SidebarMenuButton>
|
|
</SidebarMenuItem>
|
|
</SidebarMenu>
|
|
))}
|
|
</SidebarMenu>
|
|
</SidebarContent>
|
|
|
|
<SidebarFooter className={'mt-4'}>
|
|
<UserNav from='profile' />
|
|
</SidebarFooter>
|
|
</div>
|
|
</Sidebar>
|
|
);
|
|
}
|