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