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