components/Navbar/Drawer.tsx

import useActualPathname from "@/hooks/useActualPathname";
import styles from "@/styles/Drawer.module.css";
import { pages } from "@/utils/pages";
import { Button } from "@mui/material";
import { useState } from "react";
import { HiArrowTopRightOnSquare } from "react-icons/hi2";
import { MdClose, MdNavigateBefore } from "react-icons/md";
import DocsLink from "./DocsLink";
import DocsLinkList from "./Sidebar";

export default function Drawer({
    onClose,
    isOpen,
}: {
    onClose: () => unknown;
    isOpen: boolean;
}) {
    const pathname = useActualPathname();
    const [docsExpanded, setDocsExpanded] = useState(() =>
        pathname.startsWith("/docs"),
    );

    return (
        <>
            <aside
                className={`${styles.aside} ${
                    isOpen ? styles.open : styles.closed
                }`}
            >
                <div
                    className={styles.controls}
                    data-expanded={docsExpanded ? "true" : "false"}
                >
                    {docsExpanded && (
                        <button
                            onClick={() => setDocsExpanded(false)}
                            className="flex justify-center items-center text-[15px] hover:text-[#ccc]"
                        >
                            <MdNavigateBefore size={20} />
                            <span>Main menu</span>
                        </button>
                    )}

                    <Button
                        style={{ minWidth: 0, color: "white" }}
                        onClick={onClose}
                    >
                        <MdClose size={20} />
                    </Button>
                </div>

                <div className="relative">
                    <ul
                        className={styles.list}
                        style={{
                            position: "absolute",
                            left: docsExpanded ? `-100vw` : 0,
                            transition: "ease 0.3s",
                            width: "90%",
                        }}
                    >
                        {pages.map(link => (
                            <li
                                key={`${link.url}_${link.name}`}
                                className={styles.listItem}
                            >
                                <a
                                    href={link.url}
                                    {...(/^http(s?):\/\//gi.test(link.url)
                                        ? {
                                              target: "_blank",
                                              rel: "noreferrer",
                                          }
                                        : {})}
                                    title={link.name}
                                    className={styles.listItemAnchor}
                                    onClick={onClose}
                                >
                                    <span>{link.name}</span>
                                    {/^http(s?):\/\//gi.test(link.url) && (
                                        <HiArrowTopRightOnSquare />
                                    )}
                                </a>
                            </li>
                        ))}

                        <DocsLink
                            onNavigateNext={() => setDocsExpanded(true)}
                        />
                    </ul>
                </div>

                <DocsLinkList expanded={docsExpanded} onNavigate={onClose} />
            </aside>
            <div
                className={`${styles.overlay} ${
                    isOpen ? styles.openOverlay : styles.closedOverlay
                }`}
                onClick={isOpen ? onClose : undefined}
            ></div>
        </>
    );
}
1	import useActualPathname from "@/hooks/useActualPathname";
2	import styles from "@/styles/Drawer.module.css";
3	import { pages } from "@/utils/pages";
4	import { Button } from "@mui/material";
5	import { useState } from "react";
6	import { HiArrowTopRightOnSquare } from "react-icons/hi2";
7	import { MdClose, MdNavigateBefore } from "react-icons/md";
8	import DocsLink from "./DocsLink";
9	import DocsLinkList from "./Sidebar";
10
11	export default function Drawer({
12	onClose,
13	isOpen,
14	}: {
15	onClose: () => unknown;
16	isOpen: boolean;
17	}) {
18	const pathname = useActualPathname();
19	const [docsExpanded, setDocsExpanded] = useState(() =>
20	pathname.startsWith("/docs"),
21	);
22
23	return (
24	<>
25	<aside
26	className={`${styles.aside} ${
27	isOpen ? styles.open : styles.closed
28	}`}
29	>
30	<div
31	className={styles.controls}
32	data-expanded={docsExpanded ? "true" : "false"}
33	>
34	{docsExpanded && (
35	<button
36	onClick={() => setDocsExpanded(false)}
37	className="flex justify-center items-center text-[15px] hover:text-[#ccc]"
38	>
39	<MdNavigateBefore size={20} />
40	<span>Main menu</span>
41	</button>
42	)}
43
44	<Button
45	style={{ minWidth: 0, color: "white" }}
46	onClick={onClose}
47	>
48	<MdClose size={20} />
49	</Button>
50	</div>
51
52	<div className="relative">
53	<ul
54	className={styles.list}
55	style={{
56	position: "absolute",
57	left: docsExpanded ? `-100vw` : 0,
58	transition: "ease 0.3s",
59	width: "90%",
60	}}
61	>
62	{pages.map(link => (
63	<li
64	key={`${link.url}_${link.name}`}
65	className={styles.listItem}
66	>
67	<a
68	href={link.url}
69	{...(/^http(s?):\/\//gi.test(link.url)
70	? {
71	target: "_blank",
72	rel: "noreferrer",
73	}
74	: {})}
75	title={link.name}
76	className={styles.listItemAnchor}
77	onClick={onClose}
78	>
79	<span>{link.name}</span>
80	{/^http(s?):\/\//gi.test(link.url) && (
81	<HiArrowTopRightOnSquare />
82	)}
83	</a>
84	</li>
85	))}
86
87	<DocsLink
88	onNavigateNext={() => setDocsExpanded(true)}
89	/>
90	</ul>
91	</div>
92
93	<DocsLinkList expanded={docsExpanded} onNavigate={onClose} />
94	</aside>
95	<div
96	className={`${styles.overlay} ${
97	isOpen ? styles.openOverlay : styles.closedOverlay
98	}`}
99	onClick={isOpen ? onClose : undefined}
100	></div>
101	</>
102	);
103	}