components/Navbar/DocsLinkItem.tsx

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

type DocsLinkItemProps = {
    as: keyof JSX.IntrinsicElements;
    url?: string;
    name: string;
    subpages?: DocsPageWithoutChildren[];
    onNavigate?: () => void;
};

export default function DocsLinkItem({
    as = "li",
    url,
    name,
    onNavigate,
    subpages = [],
}: DocsLinkItemProps) {
    const pathname = useActualPathname();
    const [expanded, setExpanded] = useState(() =>
        subpages.some(page => {
            const link = page.url
                ? page.url.startsWith("/")
                    ? page.url
                    : `/docs/${page.url}`
                : "#";
            return link === pathname;
        }),
    );
    const toggle = (e: SyntheticEvent) => {
        e.preventDefault();
        e.stopPropagation();
        setExpanded(s => !s);
    };
    const Root = as;
    const link = url ? resolveDocsURL(url) : "#";
    const LinkComponent = url ? Link : "a";
    const IconWrapperComponent = url === undefined ? "span" : Button;

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

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