1 |
import Link from "@/components/Navigation/Link"; |
2 |
import useActualPathname from "@/hooks/useActualPathname"; |
3 |
import styles from "@/styles/DocsLinkItem.module.css"; |
4 |
import { DocsPageWithoutChildren, resolveDocsURL } from "@/utils/pages"; |
5 |
import { Button } from "@mui/material"; |
6 |
import { SyntheticEvent, useState } from "react"; |
7 |
import { MdExpandMore } from "react-icons/md"; |
8 |
|
9 |
type DocsLinkItemProps = { |
10 |
as: keyof JSX.IntrinsicElements; |
11 |
url?: string; |
12 |
name: string; |
13 |
subpages?: DocsPageWithoutChildren[]; |
14 |
onNavigate?: () => void; |
15 |
}; |
16 |
|
17 |
export default function DocsLinkItem({ |
18 |
as = "li", |
19 |
url, |
20 |
name, |
21 |
onNavigate, |
22 |
subpages = [], |
23 |
}: DocsLinkItemProps) { |
24 |
const pathname = useActualPathname(); |
25 |
const [expanded, setExpanded] = useState(() => |
26 |
subpages.some(page => { |
27 |
const link = page.url |
28 |
? page.url.startsWith("/") |
29 |
? page.url |
30 |
: `/docs/${page.url}` |
31 |
: "#"; |
32 |
return link === pathname; |
33 |
}), |
34 |
); |
35 |
const toggle = (e: SyntheticEvent) => { |
36 |
e.preventDefault(); |
37 |
e.stopPropagation(); |
38 |
setExpanded(s => !s); |
39 |
}; |
40 |
const Root = as; |
41 |
const link = url ? resolveDocsURL(url) : "#"; |
42 |
const LinkComponent = url ? Link : "a"; |
43 |
const IconWrapperComponent = url === undefined ? "span" : Button; |
44 |
|
45 |
return ( |
46 |
<Root |
47 |
className={`${styles.root} ${ |
48 |
pathname === link ? styles.active : "" |
49 |
}`} |
50 |
> |
51 |
<LinkComponent |
52 |
className={styles.anchor} |
53 |
href={link} |
54 |
title={name} |
55 |
onClick={url !== undefined ? onNavigate : toggle} |
56 |
style={{ |
57 |
paddingRight: url !== undefined ? 2 : undefined, |
58 |
}} |
59 |
> |
60 |
<span>{name}</span> |
61 |
{subpages.length > 0 && ( |
62 |
<IconWrapperComponent |
63 |
onClick={toggle} |
64 |
style={{ |
65 |
minWidth: 0, |
66 |
padding: 2, |
67 |
margin: 0, |
68 |
color: "white", |
69 |
}} |
70 |
> |
71 |
<MdExpandMore |
72 |
size={20} |
73 |
className={`${ |
74 |
expanded ? "rotate-180" : "" |
75 |
} transition-[0.2s]`} |
76 |
/> |
77 |
</IconWrapperComponent> |
78 |
)} |
79 |
</LinkComponent> |
80 |
|
81 |
{subpages.length > 0 && ( |
82 |
<div |
83 |
className="ml-[13px] pl-[10px] [border-left:1px_solid_#444]" |
84 |
style={{ |
85 |
maxHeight: expanded |
86 |
? `${ |
87 |
subpages.length * |
88 |
(50 + |
89 |
Math.max( |
90 |
subpages |
91 |
.map(p => p.name.length) |
92 |
.sort()[0] - 10, |
93 |
0, |
94 |
)) |
95 |
}px` |
96 |
: 0, |
97 |
transition: "0.2s", |
98 |
overflowY: "hidden", |
99 |
}} |
100 |
> |
101 |
<ul className="list-none"> |
102 |
{subpages.map(page => ( |
103 |
<DocsLinkItem |
104 |
key={`${page.name}_${page.url}`} |
105 |
as="li" |
106 |
name={page.name} |
107 |
url={page.url} |
108 |
onNavigate={onNavigate} |
109 |
/> |
110 |
))} |
111 |
</ul> |
112 |
</div> |
113 |
)} |
114 |
</Root> |
115 |
); |
116 |
} |