components/Navbar/DocsLinkList.tsx

"use client";

import useIsDesktop from "@/hooks/useIsDesktop";
import styles from "@/styles/DocsLinkList.module.css";
import { getDocsPages } from "@/utils/pages";
import DocsLinkItem from "./DocsLinkItem";

type DocsLinkListProps = {
    expanded?: boolean;
    desktopOnly?: boolean;
    fragment?: boolean;
    onNavigate?: () => void;
};

export default function DocsLinkList({
    expanded,
    desktopOnly = false,
    fragment = false,
    onNavigate,
}: DocsLinkListProps) {
    const isDesktop = useIsDesktop();

    if (desktopOnly && !isDesktop) {
        return <></>;
    }

    return (
        <>
            {fragment && <div></div>}
            <div
                style={
                    isDesktop
                        ? {
                              borderRight: "1px solid #222",
                              height: "calc(92vh)",
                              maxHeight: "calc(92vh)",
                              overflowY: "scroll",
                              position: "fixed",
                              left: 0,
                          }
                        : {
                              position: "absolute",
                              left: !expanded ? `100vh` : 0,
                              transition: "ease 0.3s",
                              width: "100%",
                          }
                }
                className={`${
                    isDesktop ? styles.scrollbarStyles : ""
                } md:w-[10vw] lg:w-[15vw] xl:w-[20vw]`}
            >
                <ul className="list-none m-3">
                    {getDocsPages().map(page => (
                        <DocsLinkItem
                            key={`${page.name}_${page.url}`}
                            as="li"
                            name={page.name}
                            url={page.url}
                            subpages={page.children}
                            onNavigate={onNavigate}
                        />
                    ))}
                </ul>
            </div>
        </>
    );
}
1	"use client";
2
3	import useIsDesktop from "@/hooks/useIsDesktop";
4	import styles from "@/styles/DocsLinkList.module.css";
5	import { getDocsPages } from "@/utils/pages";
6	import DocsLinkItem from "./DocsLinkItem";
7
8	type DocsLinkListProps = {
9	expanded?: boolean;
10	desktopOnly?: boolean;
11	fragment?: boolean;
12	onNavigate?: () => void;
13	};
14
15	export default function DocsLinkList({
16	expanded,
17	desktopOnly = false,
18	fragment = false,
19	onNavigate,
20	}: DocsLinkListProps) {
21	const isDesktop = useIsDesktop();
22
23	if (desktopOnly && !isDesktop) {
24	return <></>;
25	}
26
27	return (
28	<>
29	{fragment && <div></div>}
30	<div
31	style={
32	isDesktop
33	? {
34	borderRight: "1px solid #222",
35	height: "calc(92vh)",
36	maxHeight: "calc(92vh)",
37	overflowY: "scroll",
38	position: "fixed",
39	left: 0,
40	}
41	: {
42	position: "absolute",
43	left: !expanded ? `100vh` : 0,
44	transition: "ease 0.3s",
45	width: "100%",
46	}
47	}
48	className={`${
49	isDesktop ? styles.scrollbarStyles : ""
50	} md:w-[10vw] lg:w-[15vw] xl:w-[20vw]`}
51	>
52	<ul className="list-none m-3">
53	{getDocsPages().map(page => (
54	<DocsLinkItem
55	key={`${page.name}_${page.url}`}
56	as="li"
57	name={page.name}
58	url={page.url}
59	subpages={page.children}
60	onNavigate={onNavigate}
61	/>
62	))}
63	</ul>
64	</div>
65	</>
66	);
67	}