blob: 1748317ff309d434b10c9f82b3ff65496a811e28 (
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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
|
import { NavLink } from 'react-router'
import { ActionButton } from '@react-spectrum/s2/ActionButton'
import { Menu, MenuItem, MenuTrigger, SubmenuTrigger, Text } from '@react-spectrum/s2/Menu'
import { Tooltip, TooltipTrigger } from '@react-spectrum/s2/Tooltip'
import { menuItems, type NavigationItem } from '../route-config'
import iconStyles from './menu-icon.module.css'
import styles from './layout-basic.module.css'
function containsPage(item: NavigationItem, pageId?: string): boolean {
return item.id === pageId || !!item.children?.some((child) => containsPage(child, pageId))
}
function renderMenuItem(item: NavigationItem) {
const Icon = item.Icon
const content = <>{Icon && <Icon />}<Text>{item.title}</Text></>
return item.children ? (
<SubmenuTrigger key={item.id}>
<MenuItem id={item.id} textValue={item.title}>{content}</MenuItem>
<Menu aria-label={item.title}>{item.children.map(renderMenuItem)}</Menu>
</SubmenuTrigger>
) : (
<MenuItem key={item.id} id={item.id} href={item.path} textValue={item.title}>{content}</MenuItem>
)
}
function CollapsedNavigation({ activePageId }: { activePageId?: string }) {
return (
<div className={styles.iconNavigation}>
{menuItems.map((item) => {
const Icon = item.Icon
const icon = Icon ? <Icon UNSAFE_className={iconStyles.icon} /> : item.title.slice(0, 1)
return item.children ? (
<div key={item.id} className={`${styles.iconNavigationGroup}${containsPage(item, activePageId) ? ` ${styles.isActive}` : ''}`}>
<MenuTrigger direction="right" align="start">
<TooltipTrigger placement="right">
<ActionButton aria-label={item.title} isQuiet>{icon}</ActionButton>
<Tooltip>{item.title}</Tooltip>
</TooltipTrigger>
<Menu aria-label={item.title}>{item.children.map(renderMenuItem)}</Menu>
</MenuTrigger>
</div>
) : (
<NavLink key={item.id} className={styles.iconNavigationLink} to={item.path} end aria-label={item.title} title={item.title}>
{icon}
</NavLink>
)
})}
</div>
)
}
export default CollapsedNavigation
|
