blob: 604c0021d5e964ec59baadc694f3f275d953e323 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
import iconStyles from './menu-icon.module.css'
import { useMatches } from 'react-router'
import { SideNav, SideNavItem, SideNavItemContent, SideNavItemLink, Text } from '@react-spectrum/s2/SideNav'
import { defaultExpandedKeys, menuItems, type NavigationItem, type PageMetadata } from '../route-config'
function renderItem(item: NavigationItem, level = 0) {
const Icon = item.Icon
const content = (
<>
{Icon && <Icon UNSAFE_className={level === 0 ? iconStyles.icon : undefined} />}
<Text>{item.title}</Text>
</>
)
return (
<SideNavItem key={item.id} id={item.id} href={item.path} textValue={item.title}>
<SideNavItemContent>
{item.path ? <SideNavItemLink>{content}</SideNavItemLink> : content}
</SideNavItemContent>
{item.children?.map((child) => renderItem(child, level + 1))}
</SideNavItem>
)
}
function SidebarMenu() {
const currentPage = useMatches().at(-1)?.handle as PageMetadata | undefined
return (
<SideNav aria-label="Pages" selectedRoute={currentPage?.path ?? null} defaultExpandedKeys={defaultExpandedKeys}>
{menuItems.map((item) => renderItem(item))}
</SideNav>
)
}
export default SidebarMenu
|
