feat: enhance sidebar with scroll area and mobile responsiveness

- Added ScrollArea component to make sidebar content scrollable
- Implemented RemoveScroll functionality to prevent background scrolling on mobile
- Created InternalContext to manage sidebar state and nesting levels
- Added useMediaQuery hook for responsive behavior
- Removed redundant sheet.tsx and sidebar.tsx components
- Updated button styling with new variants and rounded corners
- Improved folder state management using useOnChange instea

Author: DarkPhoenix2704

components/layout/Sidebar.tsx

@@ -1,14 +1,18 @@
 "use client";
-import {useTreeContext, useTreePath} from "fumadocs-ui/provider";
-import {createContext, ReactNode, useContext, useMemo, useState, useCallback, useEffect} from "react";
+import {useSidebar, useTreeContext, useTreePath} from "fumadocs-ui/provider";
+import {createContext, ReactNode, useContext, useMemo, useState, useCallback, ReactElement} from "react";
 import {useDocsNavigation} from "@/app/docs/DocsNavigationProvider";
 import * as PageTree from "fumadocs-core/page-tree";
 import Link from "next/link";
 import {usePathname} from "next/navigation";
 import {ChevronDown} from "lucide-react";
 import {cn} from "@/lib/utils";
 import {Collapsible, CollapsibleContent, CollapsibleTrigger,} from "@/components/ui/collapsible";
+import {ScrollArea, ScrollViewport} from "@/components/ui/scroll-area";
+import {useOnChange} from "fumadocs-core/utils/use-on-change";
 import { ncIsObject } from "@/utils/is";
+import { RemoveScroll } from "react-remove-scroll";
+import { useMediaQuery } from "@/utils/use-media-query";
 
 interface FolderContextType {
     open: boolean;
@@ -25,16 +29,70 @@ const useFolderContext = () => {
     return context;
 };
 
+interface InternalContext {
+    level: number;
+    isMobile?: boolean;
+    closeSidebar?: () => void;
+}
+
+const InternalContext = createContext<InternalContext | null>(null);
+
+const useInternalContext = () => {
+    const context = useContext(InternalContext);
+    if (!context) {
+        throw new Error("useInternalContext must be used within an InternalContext Provider");
+    }
+    return context;
+};
+
+
+export const SidebarList = ({
+  as,
+  blockScrollingWidth,
+  removeScrollOn = blockScrollingWidth
+    ? `(width < ${blockScrollingWidth}px)`
+    : undefined,
+  ...props
+}: {
+    as?: string;
+    blockScrollingWidth?: number;
+    removeScrollOn?: string;
+    children: ReactNode;
+} & React.HTMLAttributes<HTMLDivElement>): ReactElement => {
+  const { open } = useSidebar();
+  const isBlocking =
+    useMediaQuery(removeScrollOn ?? '', !removeScrollOn) ?? false;
+
+  return (
+    <RemoveScroll
+      as={as ?? 'aside'}
+      data-open={open}
+      enabled={isBlocking && open}
+      {...props}
+    >
+      {props.children}
+    </RemoveScroll>
+  );
+}
+
 const Sidebar = ({isMobile}: {isMobile?: boolean}) => {
     const {root} = useTreeContext();
     const pathname = usePathname();
     const { setIsOpen } = useDocsNavigation();
 
+    const {open} = useSidebar()
+    
     const closeSidebar = useCallback(() => {
         if (isMobile) {
             setIsOpen(false);
         }
     }, [isMobile, setIsOpen]);
+    
+    const context = useMemo<InternalContext>(() => ({
+        level: 1, 
+        isMobile,
+        closeSidebar
+    }), [isMobile, closeSidebar]);
 
     const children = useMemo(() => {
         function renderItems(items: PageTree.Node[], level: number) {
@@ -54,11 +112,15 @@ const Sidebar = ({isMobile}: {isMobile?: boolean}) => {
     }, [pathname]);
 
     return (
-        <div className={cn("xl:flex sticky py-4 mr-3 flex-col shrink-0 ", isMobile ? 'block' : 'hidden xl:block', isMobile ? 'w-64' : 'top-[120px] h-[calc(100dvh-120px)] w-64')}>
-            <div className="flex flex-col gap-2">
-                {children}
-            </div>
-        </div>
+        <InternalContext.Provider value={context}>
+            <SidebarList removeScrollOn="(width < 768px)" className={cn("xl:flex sticky py-4 mr-3 flex-col shrink-0 ", open ? 'block' : 'hidden xl:block', isMobile ? 'block' : 'hidden top-[120px] h-[calc(100dvh-120px)]  w-64')}>
+                <ScrollArea className="h-full">
+                    <ScrollViewport>
+                        {children}
+                    </ScrollViewport>
+                </ScrollArea>
+            </SidebarList>
+        </InternalContext.Provider>
     );
 };
 
@@ -68,14 +130,14 @@ function SidebarItem({item, children, level,}: {
     pathname: string;
     level: number;
 }) {
+    const context = useInternalContext();
     const path = useTreePath();
-    const active = path.includes(item);
 
+    const active = path.includes(item);
+    
     const handleLinkClick = () => {
-        // Close sidebar on mobile navigation
-        const sidebar = document.querySelector('[data-sidebar="sidebar"]');
-        if (sidebar && window.innerWidth < 768) {
-            // Mobile sidebar close logic will be handled by Shadcn sidebar
+        if (context.closeSidebar) {
+            context.closeSidebar();
         }
     };
 
@@ -91,7 +153,7 @@ function SidebarItem({item, children, level,}: {
                 href={item.url}
                 onClick={handleLinkClick}
             >
-                {ncIsObject(item.icon) ? item.icon : ''}
+                {ncIsObject(item.icon) ? item.icon  : ''}
                 {item.name}
             </Link>
         );
@@ -100,12 +162,11 @@ function SidebarItem({item, children, level,}: {
     if (item.type === "separator") {
         return (
             <p className="text-fd-muted-foreground mt-6 mb-2 first:mt-0">
-                {ncIsObject(item.icon) ? item.icon : ''}
+                {ncIsObject(item.icon) ? item.icon  : ''}
                 {item.name}
             </p>
         );
     }
-
     if (item.type === "folder") {
         return (
             <SidebarFolder defaultOpen={(active || (item.defaultOpen ?? false))}>
@@ -118,14 +179,14 @@ function SidebarItem({item, children, level,}: {
                                     active
                                         ? "text-nc-content-grey-emphasis"
                                         : "text-nc-content-grey-subtle-2 hover:bg-nc-background-grey-light"
-                                )}
-                                href={item.index.url}
-                                onClick={handleLinkClick}
-                            >
-                                {ncIsObject(item.index.icon) ? item.index.icon : ''}
-                                {item.index.name}
-                            </Link>
-                        </div>
+                            )}
+                            href={item.index.url}
+                            onClick={handleLinkClick}
+                        >
+                            {ncIsObject(item.index.icon) ? item.index.icon  : ''}
+                            {item.index.name}                        
+                        </Link>
+                    </div>
                     </SidebarFolderTrigger>
                 ) : (
                     <SidebarFolderTrigger>
@@ -135,7 +196,7 @@ function SidebarItem({item, children, level,}: {
                                 active? "text-nc-content-grey-subtle-2 font-[600]" : ""
                             )}
                         >
-                            {ncIsObject(item.icon) ? item.icon : ''}
+                            {ncIsObject(item.icon) ? item.icon  : ''}
                             {item.name}
                         </div>
                     </SidebarFolderTrigger>
@@ -160,9 +221,9 @@ function SidebarFolder({defaultOpen = false, children}: {
 }) {
     const [open, setOpen] = useState(defaultOpen);
 
-    useEffect(() => {
-        if (defaultOpen) setOpen(defaultOpen);
-    }, [defaultOpen]);
+    useOnChange(defaultOpen, (v) => {
+        if (v) setOpen(v);
+    });
 
     return (
         <Collapsible open={open} onOpenChange={setOpen}>
@@ -197,9 +258,19 @@ function SidebarFolderTrigger({children}: { children: ReactNode }) {
 }
 
 function SidebarFolderContent({children}: { children: ReactNode }) {
+    const ctx = useInternalContext();
+
     return (
         <CollapsibleContent>
-            {children}
+            <InternalContext.Provider
+                value={useMemo(() => ({
+                    level: ctx.level + 1,
+                    isMobile: ctx.isMobile,
+                    closeSidebar: ctx.closeSidebar
+                }), [ctx.level, ctx.isMobile, ctx.closeSidebar])}
+            >
+                {children}
+            </InternalContext.Provider>
         </CollapsibleContent>
     );
 }

components/ui/button.tsx

@@ -5,20 +5,21 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg cursor-pointer text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
   {
     variants: {
       variant: {
         default: "bg-primary text-primary-foreground hover:bg-primary/90",
         destructive:
-          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
         outline:
           "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
         secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+          "bg-nc-background-default text-nc-content-grey-subtle shadow-sm hover:bg-nc-background-grey-light border-1 border-nc-content-grey-medium",
         ghost:
           "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
         link: "text-primary underline-offset-4 hover:underline",
+        none: ""
       },
       size: {
         default: "h-9 px-4 py-2 has-[>svg]:px-3",