81 lines
2.7 KiB
TypeScript
81 lines
2.7 KiB
TypeScript
'use client';
|
|
import { navs } from '@/config/navs';
|
|
import useGlobalStore from '@/config/use-global';
|
|
import { Icon } from '@iconify/react';
|
|
import {
|
|
Sidebar,
|
|
SidebarContent,
|
|
SidebarGroup,
|
|
SidebarGroupContent,
|
|
SidebarGroupLabel,
|
|
SidebarHeader,
|
|
SidebarMenu,
|
|
SidebarMenuButton,
|
|
SidebarMenuItem,
|
|
} from '@shadcn/ui/sidebar';
|
|
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 { common } = useGlobalStore();
|
|
const { site } = common;
|
|
const t = useTranslations('menu');
|
|
const pathname = usePathname();
|
|
return (
|
|
<Sidebar className='border-r-0' collapsible='icon' {...props}>
|
|
<SidebarHeader>
|
|
<SidebarMenu>
|
|
<SidebarMenuItem>
|
|
<SidebarMenuButton size='lg' asChild>
|
|
<Link href='/'>
|
|
<div className='flex aspect-square size-8 items-center justify-center rounded-lg'>
|
|
<Image
|
|
src={site.site_logo || '/favicon.svg'}
|
|
alt='logo'
|
|
width={48}
|
|
height={48}
|
|
className='size-full'
|
|
/>
|
|
</div>
|
|
<div className='grid flex-1 text-left text-sm leading-tight'>
|
|
<span className='truncate font-semibold'>{site.site_name}</span>
|
|
<span className='truncate text-xs'>{site.site_desc}</span>
|
|
</div>
|
|
</Link>
|
|
</SidebarMenuButton>
|
|
</SidebarMenuItem>
|
|
</SidebarMenu>
|
|
</SidebarHeader>
|
|
<SidebarContent>
|
|
<SidebarMenu>
|
|
{navs.map((nav) => (
|
|
<SidebarGroup key={nav.title}>
|
|
{nav.items && <SidebarGroupLabel>{t(nav.title)}</SidebarGroupLabel>}
|
|
<SidebarGroupContent>
|
|
<SidebarMenu>
|
|
{(nav.items || [nav]).map((item) => (
|
|
<SidebarMenuItem key={item.title}>
|
|
<SidebarMenuButton
|
|
asChild
|
|
tooltip={t(item.title)}
|
|
isActive={item.url === pathname}
|
|
>
|
|
<Link href={item.url}>
|
|
{item.icon && <Icon icon={item.icon} />}
|
|
<span>{t(item.title)}</span>
|
|
</Link>
|
|
</SidebarMenuButton>
|
|
</SidebarMenuItem>
|
|
))}
|
|
</SidebarMenu>
|
|
</SidebarGroupContent>
|
|
</SidebarGroup>
|
|
))}
|
|
</SidebarMenu>
|
|
</SidebarContent>
|
|
</Sidebar>
|
|
);
|
|
}
|