1 import React from 'react'
2 import {Box} from '@primer/react'
3 import Link from '../components/link'
4 import * as getNav from '../util/get-nav'
5 import usePage from '../hooks/use-page'
6
7 const HierarchyItem = ({item, maxDepth, depth, hideVariants}) => {
8 const hierarchy = getNav.getHierarchy(item, null, {hideVariants})
9
10 return (
11 <Box as="li" key={item.url}>
12 <Link key={item.title} to={item.url}>
13 {item.title}
14 </Link>
15 {item.description ? <Box sx={{fontSize: 1, mb: 1}}>{item.description}</Box> : null}
16 {hierarchy ? (
17 <Hierarchy items={hierarchy} maxDepth={maxDepth} depth={depth + 1} hideVariants={hideVariants} />
18 ) : null}
19 </Box>
20 )
21 }
22
23 const Hierarchy = ({items, maxDepth, depth, hideVariants}) => {
24 if (maxDepth && depth > maxDepth) {
25 return null
26 }
27
28 return (
29 <Box as="ul">
30 {items.map(item => (
31 <HierarchyItem key={item.url} item={item} maxDepth={maxDepth} depth={depth} hideVariants={hideVariants} />
32 ))}
33 </Box>
34 )
35 }
36
37 function NavHierarchy({depth, hideVariants}) {
38 const {pathname} = usePage().location
39 const hierarchy = getNav.getHierarchy(getNav.getItem(pathname), null, {hideVariants})
40
41 return <Hierarchy items={hierarchy} maxDepth={depth} depth={1} hideVariants={hideVariants} />
42 }
43
44 export default NavHierarchy