96 lines
3.4 KiB
TypeScript
96 lines
3.4 KiB
TypeScript
'use client';
|
|
import LanguageSwitch from '@/components/language-switch';
|
|
import SvgIcon from '@/components/SvgIcon';
|
|
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 { useTranslations } from 'next-intl';
|
|
import Image from 'next/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 pb-8 pt-4 shadow-none md:bg-white md:py-0 md:shadow-lg'}
|
|
>
|
|
<div
|
|
className={
|
|
'relative ml-2.5 flex h-[calc(100dvh-10px-env(safe-area-inset-top))] flex-col rounded-[30px] bg-[#D9D9D9] px-4 md:ml-0 md:h-full md:rounded-none md:bg-white md:px-8'
|
|
}
|
|
>
|
|
<div className={'absolute -right-3 top-[36px] md:hidden'} onClick={toggleSidebar}>
|
|
<Image src={'shrink.png'} height={30} width={30} alt='close' unoptimized></Image>
|
|
</div>
|
|
<div
|
|
className={
|
|
'absolute -left-2.5 top-2.5 -z-10 h-full w-full rounded-[30px] bg-[#225BA9] md:hidden'
|
|
}
|
|
></div>
|
|
<div className='pb-7 pl-4 pt-5 md:pt-9'>
|
|
<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 md:gap-2.5'}>
|
|
{navs
|
|
.filter((v) => !v.hidden)
|
|
.map((nav, navIndex) => (
|
|
<SidebarMenu
|
|
key={navIndex}
|
|
className={navIndex === 0 ? 'mb-4 md: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] md:bg-white md:font-medium'
|
|
}
|
|
asChild
|
|
tooltip={t(nav.title)}
|
|
isActive={nav.url === pathname}
|
|
>
|
|
<Link href={nav.url} onClick={toggleSidebar} className={'gap-4'}>
|
|
<div className={'relative size-4'}>
|
|
<SvgIcon name={nav.image} />
|
|
</div>
|
|
<span>{t(nav.title)}</span>
|
|
</Link>
|
|
</SidebarMenuButton>
|
|
</SidebarMenuItem>
|
|
</SidebarMenu>
|
|
))}
|
|
</SidebarMenu>
|
|
</SidebarContent>
|
|
|
|
<SidebarFooter className={'mb-6 mt-4 gap-0 px-0 pb-0'}>
|
|
<div className={'mb-4 ml-[6px]'}>
|
|
<LanguageSwitch />
|
|
</div>
|
|
<UserNav from='profile' />
|
|
</SidebarFooter>
|
|
</div>
|
|
</Sidebar>
|
|
);
|
|
}
|