@cryptotaxi247 / documentation
Code Commits Issues Pulls Sessions CI/CD
dependabot/npm_and_yarn/main/npmcli/eslint-config-7.0.0
@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 78 lines 2.2 KB
Raw
1 import React from 'react'
2 import {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 import * as styles from './nav-items.module.css'
12
13 const NavItem = ({item, path, depth}) => {
14 const isCurrent = getNav.isActiveUrl(path, item.url)
15 const items = getNav.getHierarchy(item, item.url, {hideVariants: true})
16
17 return (
18 <NavList.Item
19 as={Link}
20 to={item.url}
21 defaultOpen={items && isCurrent}
22 aria-current={isCurrent ? 'page' : null}
23 className={depth === 1 ? styles.NavList_Item_depth1 : styles.NavList_Item_depth2}
24 >
25 {item.title}
26 {items ? (
27 <NavList.SubNav>
28 <NavItems items={items} path={path} depth={depth + 1} />
29 </NavList.SubNav>
30 ) : null}
31 </NavList.Item>
32 )
33 }
34
35 const NavItems = ({items, path, depth = 1}) => (
36 <>
37 {items.map(item =>
38 React.createElement(
39 depth === 1 ? NavList.Group : React.Fragment,
40 {key: item.title},
41 <NavItem item={item} path={path} depth={depth} />,
42 ),
43 )}
44 </>
45 )
46
47 const ExternalNavItem = ({title, ...props}) => (
48 <NavList.Item className={styles.NavList_Item} {...props}>
49 {title}
50 <NavList.TrailingVisual>
51 <LinkExternalIcon />
52 </NavList.TrailingVisual>
53 </NavList.Item>
54 )
55
56 const Navigation = () => {
57 const {repositoryUrl} = useSiteMetadata()
58 const {pathname} = usePage().location
59 const items = getNav.getHierarchy(null, pathname, {hideVariants: true})
60
61 return (
62 <>
63 <VisuallyHidden as="h3">Site navigation</VisuallyHidden>
64 <NavList aria-label="Site">
65 <NavItems items={items} path={pathname} />
66 <NavList.Divider />
67 {headerNavItems.map(item => (
68 <div key={item.title} className={styles.headerNavItem}>
69 <ExternalNavItem title={item.title} href={item.url} />
70 </div>
71 ))}
72 <ExternalNavItem title="GitHub" href={repositoryUrl} />
73 </NavList>
74 </>
75 )
76 }
77
78 export default Navigation