components/Navbar/Sidebar.tsx

"use client";

import useIsDesktop from "@/hooks/useIsDesktop";
import styles from "@/styles/Sidebar.module.css";
import { getAllDocsPages } from "@/utils/pages";
import SidebarItem from "./SidebarItem";

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

export default function Sidebar({
    expanded,
    desktopOnly = false,
    fragment = false,
    onNavigate,
}: SidebarProps) {
    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">
                    {getAllDocsPages().children.map(item => (
                        <SidebarItem
                            key={`${item.name}_${item.href}`}
                            as="li"
                            item={item}
                            onNavigate={onNavigate}
                        />
                    ))}
                </ul>
            </div>
        </>
    );
}
1	"use client";
2
3	import useIsDesktop from "@/hooks/useIsDesktop";
4	import styles from "@/styles/Sidebar.module.css";
5	import { getAllDocsPages } from "@/utils/pages";
6	import SidebarItem from "./SidebarItem";
7
8	type SidebarProps = {
9	expanded?: boolean;
10	desktopOnly?: boolean;
11	fragment?: boolean;
12	onNavigate?: () => void;
13	};
14
15	export default function Sidebar({
16	expanded,
17	desktopOnly = false,
18	fragment = false,
19	onNavigate,
20	}: SidebarProps) {
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	{getAllDocsPages().children.map(item => (
54	<SidebarItem
55	key={`${item.name}_${item.href}`}
56	as="li"
57	item={item}
58	onNavigate={onNavigate}
59	/>
60	))}
61	</ul>
62	</div>
63	</>
64	);
65	}