DocsMenu.tsx83 lines · main

1	import Link from 'next/link'
2	import { cn } from 'ui'
3
4	import { ProductMenuGroup } from '@/components/ui/ProductMenu/ProductMenu.types'
5
6	export const DocsMenu = ({
7	menu,
8	activePage,
9	}: {
10	menu: Array<ProductMenuGroup>
11	activePage?: string
12	}) => {
13	return (
14	<nav className="space-y-6 text-xs">
15	{menu.map((group, idx) => (
16	<div key={group.key || group.title || idx}>
17	{group.title && (
18	<div className="heading-meta mb-2 text-foreground-lighter">{group.title}</div>
19	)}
20	<div className="space-y-2">
21	{group.items.map((item) => {
22	const isActive = item.pages
23	? item.pages.includes(activePage ?? '')
24	: activePage === item.key
25	const isDisabled = !!item.disabled
26	const content = (
27	<span
28	className={cn(
29	'flex items-center',
30	isActive ? 'text-foreground' : 'text-foreground-light hover:text-foreground'
31	)}
32	>
33	<span className="truncate">{item.name}</span>
34	{item.rightIcon && (
35	<span className="ml-auto text-foreground-lighter">{item.rightIcon}</span>
36	)}
37	</span>
38	)
39
40	if (isDisabled) {
41	return (
42	<span
43	key={item.key}
44	className="block pointer-events-none opacity-50"
45	aria-disabled="true"
46	tabIndex={-1}
47	>
48	{content}
49	</span>
50	)
51	}
52
53	if (item.isExternal) {
54	return (
55	<a
56	key={item.key}
57	href={item.url}
58	target="_blank"
59	rel="noopener noreferrer"
60	className="block"
61	>
62	{content}
63	</a>
64	)
65	}
66
67	return (
68	<Link
69	key={item.key}
70	href={item.url}
71	className="block"
72	aria-current={isActive ? 'page' : undefined}
73	>
74	{content}
75	</Link>
76	)
77	})}
78	</div>
79	</div>
80	))}
81	</nav>
82	)
83	}