mobile sidebar

Took 32 minutes

docs/intro.md

@@ -1,9 +1,8 @@
 ---
-title: 'Home'
+title: '🚀 Introduction'
 published: '10-06-2024'
 summary: 'petentium usu tota noluisse errem elaboraret auctor.'
 ---
 
 # Get started with Pulse App!
-
 petentium usu tota noluisse errem elaboraret auctor.

src/app/layout.tsx

@@ -52,7 +52,9 @@ const RootLayout = ({
                 <div className="px-7 max-w-[90rem] mx-auto min-h-screen flex flex-col">
                     <Navbar />
                     <div className="w-full h-full flex flex-grow gap-5">
-                        <Sidebar />
+                        <div className="hidden xs:flex">
+                            <Sidebar />
+                        </div>
                         {children}
                     </div>
                 </div>

src/components/navbar/navbar.tsx

@@ -4,6 +4,7 @@ import Image from "next/image";
 import { cn } from "@/lib/utils";
 import QuickSearchDialog from "@/components/navbar/search-dialog";
 import { getDocsContent } from "@/lib/mdx";
+import Sidebar from "@/components/sidebar/sidebar";
 
 const Navbar = (): ReactElement => {
     const pages: DocsContentMetadata[] = getDocsContent();
@@ -32,7 +33,9 @@ const Navbar = (): ReactElement => {
             {/* Right */}
             <div className="flex gap-5 sm:gap-7 items-center transition-all transform-gpu">
                 {/* Search */}
-                <QuickSearchDialog pages={pages} />
+                <div className="hidden xs:flex">
+                    <QuickSearchDialog pages={pages} />
+                </div>
 
                 {/* Social */}
                 <div className="flex gap-5 items-center">
@@ -47,6 +50,11 @@ const Navbar = (): ReactElement => {
                         icon="/media/discord.svg"
                     />
                 </div>
+
+                {/* Mobile Sidebar */}
+                <div className="flex xs:hidden">
+                    <Sidebar />
+                </div>
             </div>
         </nav>
     );

src/components/navbar/search-dialog.tsx

@@ -13,7 +13,6 @@ import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
 import { Input } from "@/components/ui/input";
 import { useRouter } from "next/navigation";
 import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
-import { Button } from "@/components/ui/button";
 
 /**
  * The dialog for quickly searching the docs.
@@ -48,31 +47,23 @@ const QuickSearchDialog = ({
                 className="cursor-pointer hover:opacity-85 transition-all transform-gpu select-none"
                 onClick={() => setOpen(true)}
             >
-                {/* Bigger Screens */}
-                <div className="hidden xs:flex">
-                    <div className="absolute top-2.5 left-3 z-10">
-                        <MagnifyingGlassIcon className="w-[1.15rem] h-[1.15rem]" />
-                    </div>
-
-                    <Input
-                        className="pl-10 rounded-lg cursor-pointer"
-                        type="search"
-                        name="search"
-                        placeholder="Search the docs..."
-                        readOnly
-                    />
-
-                    <div className="absolute top-1.5 right-3">
-                        <kbd className="h-5 px-1.5 inline-flex gap-1 items-center bg-muted font-medium text-muted-foreground rounded select-none pointer-events-none">
-                            <span>⌘</span>K
-                        </kbd>
-                    </div>
+                <div className="absolute top-2.5 left-3 z-10">
+                    <MagnifyingGlassIcon className="w-[1.15rem] h-[1.15rem]" />
                 </div>
 
-                {/* Smaller Screens */}
-                <Button className="p-2 flex xs:hidden" variant="outline">
-                    <MagnifyingGlassIcon className="w-5 h-5" />
-                </Button>
+                <Input
+                    className="pl-10 rounded-lg cursor-pointer"
+                    type="search"
+                    name="search"
+                    placeholder="Search the docs..."
+                    readOnly
+                />
+
+                <div className="absolute top-1.5 right-3">
+                    <kbd className="h-5 px-1.5 inline-flex gap-1 items-center bg-muted font-medium text-muted-foreground rounded select-none pointer-events-none">
+                        <span>⌘</span>K
+                    </kbd>
+                </div>
             </div>
 
             {/* Dialog */}

src/components/sidebar/sidebar-links.tsx

@@ -46,12 +46,12 @@ const CategoryItem = ({
 }) => {
     const path = usePathname();
     const active =
-        (path === "/" && node.slug === "home") || path === `/${node.slug}`;
+        (path === "/" && node.slug === "intro") || path === `/${node.slug}`;
     const [isOpen, setIsOpen] = useState(true);
     const hasChildren = Object.keys(node.children).length > 0;
 
     return (
-        <div className={`relative ${depth > 0 ? "ml-4" : ""} select-none`}>
+        <div className={`relative ${depth > 0 ? "ml-2.5" : ""} select-none`}>
             {/* Indentation */}
             {depth > 0 && (
                 <div
@@ -70,12 +70,12 @@ const CategoryItem = ({
                         draggable={false}
                     >
                         <Button
-                            variant="ghost"
                             className={cn(
-                                `relative ${depth > 0 ? "pl-4" : ""} w-full justify-between`,
+                                `relative px-1.5 ${depth > 0 ? "pl-4" : ""} w-full justify-between`,
                                 active &&
                                     "bg-primary/15 hover:bg-primary/20 text-primary/95 hover:text-primary"
                             )}
+                            variant="ghost"
                         >
                             {node.title}
                             {hasChildren && (

src/components/sidebar/sidebar.tsx

@@ -3,13 +3,40 @@ import { Separator } from "@/components/ui/separator";
 import { getDocsContent } from "@/lib/mdx";
 import SidebarLinks from "@/components/sidebar/sidebar-links";
 import ThemeSwitcher from "@/components/theme-switcher";
+import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
+import QuickSearchDialog from "@/components/navbar/search-dialog";
+import { Bars3BottomRightIcon } from "@heroicons/react/24/outline";
 
-const Sidebar = (): ReactElement => {
+const Sidebar = (): ReactElement => (
+    <>
+        {/* Mobile */}
+        <div className="xs:hidden">
+            <Sheet>
+                <SheetTrigger>
+                    <Bars3BottomRightIcon className="w-6 h-6" />
+                </SheetTrigger>
+                <SheetContent className="h-full" side="top">
+                    <SidebarContent />
+                </SheetContent>
+            </Sheet>
+        </div>
+
+        {/* Desktop */}
+        <div className="hidden min-w-32 w-40 sm:w-52 py-3 xs:flex flex-col justify-between transition-all transform-gpu">
+            <SidebarContent />
+        </div>
+    </>
+);
+
+const SidebarContent = (): ReactElement => {
     const pages: DocsContentMetadata[] = getDocsContent();
     return (
-        <div className="min-w-32 w-44 py-3 flex flex-col justify-between">
-            {/* Links */}
+        <div className="h-full flex flex-col justify-between">
+            {/* Top */}
             <div className="flex flex-col">
+                <div className="xs:hidden pb-3">
+                    <QuickSearchDialog pages={pages} />
+                </div>
                 <SidebarLinks pages={pages} />
             </div>
 

src/components/ui/sheet.tsx

@@ -0,0 +1,138 @@
+"use client";
+
+import * as React from "react";
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { Cross2Icon } from "@radix-ui/react-icons";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const Sheet = SheetPrimitive.Root;
+
+const SheetTrigger = SheetPrimitive.Trigger;
+
+const SheetClose = SheetPrimitive.Close;
+
+const SheetPortal = SheetPrimitive.Portal;
+
+const SheetOverlay = React.forwardRef<
+    React.ElementRef<typeof SheetPrimitive.Overlay>,
+    React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+    <SheetPrimitive.Overlay
+        className={cn(
+            "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+            className
+        )}
+        {...props}
+        ref={ref}
+    />
+));
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
+
+const sheetVariants = cva(
+    "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out",
+    {
+        variants: {
+            side: {
+                top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+                bottom: "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+                left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+                right: "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+            },
+        },
+        defaultVariants: {
+            side: "right",
+        },
+    }
+);
+
+interface SheetContentProps
+    extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+        VariantProps<typeof sheetVariants> {}
+
+const SheetContent = React.forwardRef<
+    React.ElementRef<typeof SheetPrimitive.Content>,
+    SheetContentProps
+>(({ side = "right", className, children, ...props }, ref) => (
+    <SheetPortal>
+        <SheetOverlay />
+        <SheetPrimitive.Content
+            ref={ref}
+            className={cn(sheetVariants({ side }), className)}
+            {...props}
+        >
+            <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+                <Cross2Icon className="h-4 w-4" />
+                <span className="sr-only">Close</span>
+            </SheetPrimitive.Close>
+            {children}
+        </SheetPrimitive.Content>
+    </SheetPortal>
+));
+SheetContent.displayName = SheetPrimitive.Content.displayName;
+
+const SheetHeader = ({
+    className,
+    ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+    <div
+        className={cn(
+            "flex flex-col space-y-2 text-center sm:text-left",
+            className
+        )}
+        {...props}
+    />
+);
+SheetHeader.displayName = "SheetHeader";
+
+const SheetFooter = ({
+    className,
+    ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+    <div
+        className={cn(
+            "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+            className
+        )}
+        {...props}
+    />
+);
+SheetFooter.displayName = "SheetFooter";
+
+const SheetTitle = React.forwardRef<
+    React.ElementRef<typeof SheetPrimitive.Title>,
+    React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+>(({ className, ...props }, ref) => (
+    <SheetPrimitive.Title
+        ref={ref}
+        className={cn("text-lg font-semibold text-foreground", className)}
+        {...props}
+    />
+));
+SheetTitle.displayName = SheetPrimitive.Title.displayName;
+
+const SheetDescription = React.forwardRef<
+    React.ElementRef<typeof SheetPrimitive.Description>,
+    React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
+>(({ className, ...props }, ref) => (
+    <SheetPrimitive.Description
+        ref={ref}
+        className={cn("text-sm text-muted-foreground", className)}
+        {...props}
+    />
+));
+SheetDescription.displayName = SheetPrimitive.Description.displayName;
+
+export {
+    Sheet,
+    SheetPortal,
+    SheetOverlay,
+    SheetTrigger,
+    SheetClose,
+    SheetContent,
+    SheetHeader,
+    SheetFooter,
+    SheetTitle,
+    SheetDescription,
+};