64 lines
1.4 KiB
TypeScript
64 lines
1.4 KiB
TypeScript
'use client'
|
|
|
|
import {
|
|
SidebarGroup,
|
|
SidebarGroupContent,
|
|
SidebarMenu,
|
|
SidebarMenuButton,
|
|
SidebarMenuItem,
|
|
useSidebar
|
|
} from '@repo/ui/components/ui/sidebar'
|
|
import { useIsMobile } from '@repo/ui/hooks/use-mobile'
|
|
|
|
import { type LucideIcon } from 'lucide-react'
|
|
import { NavLink } from 'react-router'
|
|
|
|
type NavItem = {
|
|
title: string
|
|
url: string
|
|
icon?: LucideIcon
|
|
}
|
|
|
|
export function NavMain({ navMain }: { navMain: NavItem[] }) {
|
|
return (
|
|
<>
|
|
<SidebarGroup>
|
|
<SidebarGroupContent>
|
|
<SidebarMenu>
|
|
{navMain.map((props, idx) => (
|
|
<SidebarMenuItemLink key={idx} {...props} />
|
|
))}
|
|
</SidebarMenu>
|
|
</SidebarGroupContent>
|
|
</SidebarGroup>
|
|
</>
|
|
)
|
|
}
|
|
|
|
function SidebarMenuItemLink({ title, url, icon: Icon }: NavItem) {
|
|
const { toggleSidebar } = useSidebar()
|
|
const isMobile = useIsMobile()
|
|
|
|
const onToggle = () => (isMobile ? toggleSidebar() : null)
|
|
|
|
return (
|
|
<SidebarMenuItem key={title} onClick={onToggle}>
|
|
<NavLink to={url}>
|
|
{({ isActive }) => (
|
|
<SidebarMenuButton
|
|
asChild
|
|
className="data-[active=true]:text-lime-500"
|
|
isActive={isActive}
|
|
tooltip={title}
|
|
>
|
|
<span>
|
|
{Icon ? <Icon /> : null}
|
|
<span>{title}</span>
|
|
</span>
|
|
</SidebarMenuButton>
|
|
)}
|
|
</NavLink>
|
|
</SidebarMenuItem>
|
|
)
|
|
}
|