components/Navbar/SidebarItem.tsx

import Link from "@/components/Navigation/Link";
import useActualPathname from "@/hooks/useActualPathname";
import styles from "@/styles/SidebarItem.module.css";
import { DocsPage, flatten, resolveDocsURL } from "@/utils/pages";
import { Button } from "@mui/material";
import { SyntheticEvent, useMemo, useState } from "react";
import { MdExpandMore } from "react-icons/md";

type SidebarItemProps = {
    as: keyof JSX.IntrinsicElements;
    item: DocsPage;
    onNavigate?: () => void;
};

export default function SidebarItem({
    as = "li",
    onNavigate,
    item,
}: SidebarItemProps) {
    const pathname = useActualPathname();
    const flattenPages = useMemo(() => flatten([item]), [item]);
    const [expanded, setExpanded] = useState(false);
    const isFinalExpanded = useMemo(() => {
        return (
            expanded ||
            flattenPages?.some(page => {
                const link = page.type === "page" ? `${page.href}` : "#";

                return (
                    (link === "/" && pathname === "/") ||
                    (link !== "/" &&
                        pathname !== "/" &&
                        pathname.startsWith(link))
                );
            })
        );
    }, [flattenPages, pathname, expanded]);

    const toggle = (e: SyntheticEvent) => {
        e.preventDefault();
        e.stopPropagation();
        setExpanded(s => !s);
    };
    const Root = as;
    const url = item.type === "page" ? `${item.href}` : undefined;
    const link = url ? resolveDocsURL(url) : "#";
    const LinkComponent = url ? Link : "a";
    const IconWrapperComponent = url === undefined ? "span" : Button;
    const name = item.data?.short_name ?? item.data?.title;

    return (
        <Root
            className={`${styles.root} ${
                pathname === link ? styles.active : ""
            }`}
        >
            <LinkComponent
                className={styles.anchor}
                href={link}
                title={name}
                onClick={url !== undefined ? onNavigate : toggle}
                style={{
                    paddingRight: 2,
                }}
            >
                <span>{name}</span>
                {!!item.children?.length && (
                    <IconWrapperComponent
                        onClick={toggle}
                        style={{
                            minWidth: 0,
                            padding: 2,
                            margin: 0,
                            color: "white",
                        }}
                    >
                        <MdExpandMore
                            size={20}
                            className={`${
                                isFinalExpanded ? "rotate-180" : ""
                            } transition-[0.2s]`}
                        />
                    </IconWrapperComponent>
                )}
            </LinkComponent>

            {!!item.children?.length && (
                <div
                    className="ml-[13px] pl-[10px] [border-left:1px_solid_#444]"
                    style={{
                        maxHeight: isFinalExpanded
                            ? `${
                                  flattenPages.length *
                                  (50 +
                                      Math.max(
                                          flattenPages
                                              .map(
                                                  p =>
                                                      (
                                                          p.data?.short_name ??
                                                          p.name
                                                      ).length,
                                              )
                                              .sort()[0] - 10,
                                          0,
                                      ))
                              }px`
                            : 0,
                        transition: "0.2s",
                        overflowY: "hidden",
                    }}
                >
                    <ul className="list-none">
                        {item.children.map(page => (
                            <SidebarItem
                                key={`${page.name}_${page.href}`}
                                as="li"
                                item={page}
                                onNavigate={onNavigate}
                            />
                        ))}
                    </ul>
                </div>
            )}
        </Root>
    );
}
1	rakinar2	575	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			}