Nav list dividers
Luke Karrys committed
Oct 17, 2023 at 15:16 UTC
55d859b7efdd832ef96aa13246b6bed4fc8128fe
3 files changed
+21
-9
src/components/nav-items.js
+19
-7
@@ -8,28 +8,40 @@ import {useLocation, usePageContext} from '../layout'
8
import VisuallyHidden from './visually-hidden'
9
import headerNavItems from '../../content/header-nav.yml'
10
11
-const NavItem = ({item, path}) => {
11
+const NavItem = ({item, path, ...props}) => {
12
const href = getNav.getLocation(item.url)
13
const isCurrent = getNav.isActiveUrl(path, href)
14
const items = getNav.getHierarchy(item, {path: item.url, hideVariants: true})
15
16
return (
17
- <NavList.Item as={GatsbyLink} to={href} defaultOpen={items && isCurrent} aria-current={isCurrent ? 'page' : null}>
17
+ <NavList.Item
18
+ as={GatsbyLink}
19
+ to={href}
20
+ defaultOpen={items && isCurrent}
21
+ aria-current={isCurrent ? 'page' : null}
22
+ sx={{fontSize: 1}}
23
+ >
24
{item.title}
25
{items ? (
26
<NavList.SubNav>
21
- <NavItems items={items} path={path} />
27
+ <NavItems items={items} path={path} {...props} />
28
</NavList.SubNav>
29
) : null}
30
</NavList.Item>
31
)
32
}
33
28
-const NavItems = ({items, path}) => (
34
+const NavItems = ({items, path, depth = 1}) => (
35
<>
30
- {items.map(item => (
31
- <NavItem key={item.title} item={item} path={path} />
32
- ))}
36
+ {items.map(item =>
37
+ depth === 1 ? (
38
+ <NavList.Group key={item.title}>
39
+ <NavItem key={item.title} item={item} path={path} depth={depth + 1} />
40
+ </NavList.Group>
41
+ ) : (
42
+ <NavItem key={item.title} item={item} path={path} depth={depth + 1} />
43
+ ),
44
+ )}
45
</>
46
)
47
src/components/sidebar.js
+1
-1
@@ -34,7 +34,7 @@ const Sidebar = () => (
34
position: 'sticky',
35
top: `${HEADER_HEIGHT}px`,
36
height: `calc(100vh - ${HEADER_HEIGHT}px)`,
37
- width: 260,
37
+ width: 270,
38
}}
39
>
40
<Box
src/mdx/nav-hierarchy.js
+1
-1
@@ -12,7 +12,7 @@ const HierarchyItem = ({item, depth, ...props}) => {
12
<Link as={GatsbyLink} key={item.title} to={item.url}>
13
{item.title}
14
</Link>
15
- {item.description ? <Box sx={{fontSize: '0.85em', marginBottom: '0.5em'}}>{item.description}</Box> : null}
15
+ {item.description ? <Box sx={{fontSize: 1, mb: 1}}>{item.description}</Box> : null}
16
{hierarchy ? <Hierarchy items={hierarchy} depth={depth + 1} {...props} /> : null}
17
</Box>
18
)