@cryptotaxi247 / documentation
Code Commits Issues Pulls Sessions CI/CD
@reggi/path-to-regexp
@reggi/path-to-regexp dependabot/npm_and_yarn/main/copy-to-clipboard-4.0.2 dependabot/npm_and_yarn/main/eslint-10.4.0 dependabot/npm_and_yarn/main/npmcli/eslint-config-7.0.0 dependabot/npm_and_yarn/main/proc-log-7.0.0 dependabot/npm_and_yarn/npm_and_yarn-826852524d dependabot/npm_and_yarn/npm_and_yarn-ab9a7f4bc2 deprecate-totp-2fa dhei/classic-tokens gat-bypass-2fa-docs jpg619/fix-accessibility-content-flow jpg619/version-bump-tar-2 kartykp/gat-bypass-2fa-docs kartykp/upgrade-path-to-regex main maitxn/version-bump-tar patch-1 reggi/cache-based-on-version reggi/dev-engines reggi/fix-transform-prettier reggi/overrides update-search-sensitivity
js 76 lines 2.11 KB
Raw
1 import React from 'react'
2 import {Box, NavList} from '@primer/react'
3 import {LinkExternalIcon} from '@primer/octicons-react'
4 import Link from './link'
5 import * as getNav from '../util/get-nav'
6 import VisuallyHidden from './visually-hidden'
7 import headerNavItems from '../../content/header-nav.yml'
8 import usePage from '../hooks/use-page'
9 import useSiteMetadata from '../hooks/use-site-metadata'
10
11 const NavItem = ({item, path, depth}) => {
12 const isCurrent = getNav.isActiveUrl(path, item.url)
13 const items = getNav.getHierarchy(item, item.url, {hideVariants: true})
14
15 return (
16 <NavList.Item
17 as={Link}
18 to={item.url}
19 defaultOpen={items && isCurrent}
20 aria-current={isCurrent ? 'page' : null}
21 sx={{fontSize: depth === 1 ? 2 : 1}}
22 >
23 {item.title}
24 {items ? (
25 <NavList.SubNav>
26 <NavItems items={items} path={path} depth={depth + 1} />
27 </NavList.SubNav>
28 ) : null}
29 </NavList.Item>
30 )
31 }
32
33 const NavItems = ({items, path, depth = 1}) => (
34 <>
35 {items.map(item =>
36 React.createElement(
37 depth === 1 ? NavList.Group : React.Fragment,
38 {key: item.title},
39 <NavItem item={item} path={path} depth={depth} />,
40 ),
41 )}
42 </>
43 )
44
45 const ExternalNavItem = ({title, ...props}) => (
46 <NavList.Item sx={{fontSize: 2}} {...props}>
47 {title}
48 <NavList.TrailingVisual>
49 <LinkExternalIcon />
50 </NavList.TrailingVisual>
51 </NavList.Item>
52 )
53
54 const Navigation = () => {
55 const {repositoryUrl} = useSiteMetadata()
56 const {pathname} = usePage().location
57 const items = getNav.getHierarchy(null, pathname, {hideVariants: true})
58
59 return (
60 <>
61 <VisuallyHidden as="h3">Site navigation</VisuallyHidden>
62 <NavList aria-label="Site">
63 <NavItems items={items} path={pathname} />
64 <NavList.Divider />
65 {headerNavItems.map(item => (
66 <Box key={item.title} sx={{display: ['flex', null, null, 'none']}}>
67 <ExternalNavItem title={item.title} href={item.url} />
68 </Box>
69 ))}
70 <ExternalNavItem title="GitHub" href={repositoryUrl} />
71 </NavList>
72 </>
73 )
74 }
75
76 export default Navigation