OrgMenuItem.tsx64 lines · main

1	import Link from 'next/link'
2	import { cn, sidebarMenuButtonVariants, SidebarMenuItem } from 'ui'
3
4	import type { OrgNavItem } from './OrgMenuContent.utils'
5
6	export interface OrgMenuItemProps {
7	item: OrgNavItem
8	isActive: boolean
9	disabled?: boolean
10	onCloseSheet?: () => void
11	onSubmenuClick?: (item: OrgNavItem) => void
12	onSelect?: () => void
13	}
14
15	export function OrgMenuItem({
16	item,
17	isActive,
18	disabled = false,
19	onCloseSheet,
20	onSubmenuClick,
21	onSelect,
22	}: OrgMenuItemProps) {
23	const menuButtonClass = cn(
24	sidebarMenuButtonVariants({ size: 'default', hasIcon: true }),
25	disabled && 'opacity-50 pointer-events-none'
26	)
27
28	const content = (
29	<>
30	<span className="flex size-5 shrink-0 items-center justify-center [&>svg]:size-5 [&>svg]:shrink-0">
31	{item.icon}
32	</span>
33	<span className="truncate">{item.label}</span>
34	</>
35	)
36
37	return (
38	<SidebarMenuItem key={item.key}>
39	{onSubmenuClick ? (
40	<button
41	type="button"
42	data-active={isActive}
43	onClick={() => onSubmenuClick?.(item)}
44	disabled={disabled}
45	className={menuButtonClass}
46	>
47	{content}
48	</button>
49	) : (
50	<Link
51	href={item.href}
52	onClick={() => {
53	onSelect?.()
54	onCloseSheet?.()
55	}}
56	data-active={isActive}
57	className={menuButtonClass}
58	>
59	{content}
60	</Link>
61	)}
62	</SidebarMenuItem>
63	)
64	}