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	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	}