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	rakinar2	577	"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			}