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