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