Fix nav link sizing
Luke Karrys committed
Oct 18, 2023 at 12:36 UTC
72942b57b64dbb84e879d3cc8c021b0393f4bd77
1 file changed
+8
-10
src/components/nav-items.js
+8
-10
@@ -8,7 +8,7 @@ import VisuallyHidden from './visually-hidden'
8
import headerNavItems from '../../content/header-nav.yml'
9
import usePage from '../hooks/use-page'
10
11
-const NavItem = ({item, path, ...props}) => {
11
+const NavItem = ({item, path, depth}) => {
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})
@@ -19,12 +19,12 @@ const NavItem = ({item, path, ...props}) => {
19
to={href}
20
defaultOpen={items && isCurrent}
21
aria-current={isCurrent ? 'page' : null}
22
- sx={{fontSize: 1}}
22
+ sx={{fontSize: depth === 1 ? 2 : 1}}
23
>
24
{item.title}
25
{items ? (
26
<NavList.SubNav>
27
- <NavItems items={items} path={path} {...props} />
27
+ <NavItems items={items} path={path} depth={depth + 1} />
28
</NavList.SubNav>
29
) : null}
30
</NavList.Item>
@@ -34,19 +34,17 @@ const NavItem = ({item, path, ...props}) => {
34
const NavItems = ({items, path, depth = 1}) => (
35
<>
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} />
37
+ React.createElement(
38
+ depth === 1 ? NavList.Group : React.Fragment,
39
+ {key: item.title},
40
+ <NavItem item={item} path={path} depth={depth} />,
41
),
42
)}
43
</>
44
)
45
46
const ExternalNavItem = ({title, ...props}) => (
49
- <NavList.Item {...props}>
47
+ <NavList.Item sx={{fontSize: 2}} {...props}>
48
{title}
49
<NavList.TrailingVisual>
50
<LinkExternalIcon />