From 77803c8470b0cbe0708892478029cd5bd52c0145 Mon Sep 17 00:00:00 2001
From: Dwiky Rizky Ananditya <kyzsuki@gnuweeb.org>
Date: Mon, 15 Apr 2024 10:13:38 +0700
Subject: [PATCH] refactor: responsive dashboard

---
 src/components/dashboard-header.tsx     |  4 ++
 src/components/dashboard-mobile-nav.tsx | 92 +++++++++++++++++++++++++
 src/routes/_admin.tsx                   |  4 +-
 3 files changed, 98 insertions(+), 2 deletions(-)
 create mode 100644 src/components/dashboard-mobile-nav.tsx

diff --git a/src/components/dashboard-header.tsx b/src/components/dashboard-header.tsx
index 339323d..c1fd23f 100644
--- a/src/components/dashboard-header.tsx
+++ b/src/components/dashboard-header.tsx
@@ -1,6 +1,7 @@
 import { Button } from "./ui/button";
 import { useRouter } from "@tanstack/react-router";
 import { BiHome } from "react-icons/bi";
+import { DashboardMobileNav } from "./dashboard-mobile-nav";
 
 export default function DashboardHeader() {
   const router = useRouter();
@@ -18,6 +19,9 @@ export default function DashboardHeader() {
             Home
           </Button>
         </div>
+        <div className="mr-4 block md:hidden">
+          <DashboardMobileNav />
+        </div>
       </div>
     </header>
   );
diff --git a/src/components/dashboard-mobile-nav.tsx b/src/components/dashboard-mobile-nav.tsx
new file mode 100644
index 0000000..b09274a
--- /dev/null
+++ b/src/components/dashboard-mobile-nav.tsx
@@ -0,0 +1,92 @@
+import { useState } from "react";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
+import { Home, Menu } from "lucide-react";
+import { Link, useRouter } from "@tanstack/react-router";
+
+export function DashboardMobileNav() {
+  const [open, setOpen] = useState(false);
+
+  const data = [
+    {
+      title: "Products",
+      to: "/dashboard/products",
+    },
+    {
+      title: "Users",
+      to: "/dashboard/users",
+    },
+    {
+      title: "Orders",
+      to: "/dashboard/orders",
+    },
+    {
+      title: "Upload",
+      to: "/dashboard/upload",
+    },
+  ];
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>
+        <Button
+          variant="ghost"
+          className="mr-2 px-0 text-base hover:bg-transparent focus-visible:bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 md:hidden"
+        >
+          <Menu />
+          <span className="sr-only">Toggle Menu</span>
+        </Button>
+      </SheetTrigger>
+      <SheetContent side="left" className="pr-0">
+        <MobileLink
+          to="/"
+          className="flex items-center gap-2"
+          onOpenChange={setOpen}
+        >
+          <Home className="h-4 w-4" />
+          <span className="font-bold">Home</span>
+        </MobileLink>
+        <div className="my-4 h-[calc(100vh-8rem)] pb-10 pl-6">
+          <div className="flex flex-col space-y-3">
+            {data.map((nav, index) => (
+              <MobileLink key={index} to={nav.to} onOpenChange={setOpen}>
+                {nav.title}
+              </MobileLink>
+            ))}
+          </div>
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+}
+
+interface MobileLinkProps {
+  to: any;
+  onOpenChange?: (open: boolean) => void;
+  children: React.ReactNode;
+  className?: string;
+}
+
+function MobileLink({
+  to,
+  onOpenChange,
+  className,
+  children,
+  ...props
+}: MobileLinkProps) {
+  const router = useRouter();
+  return (
+    <Link
+      to={to}
+      onClick={() => {
+        router.navigate({ to: to.toString() });
+        onOpenChange?.(false);
+      }}
+      className={cn(className)}
+      {...props}
+    >
+      {children}
+    </Link>
+  );
+}
diff --git a/src/routes/_admin.tsx b/src/routes/_admin.tsx
index 87966b6..936d4e9 100644
--- a/src/routes/_admin.tsx
+++ b/src/routes/_admin.tsx
@@ -9,7 +9,7 @@ export const Route = createFileRoute("/_admin")({
     }
   },
   component: () => (
-    <div className="block lg:grid lg:grid-cols-[230px,1fr]">
+    <div className="block md:grid md:grid-cols-[0.2fr,1fr]">
       <Sidebar />
       <div>
         <Outlet />
@@ -20,7 +20,7 @@ export const Route = createFileRoute("/_admin")({
 
 export function Sidebar() {
   return (
-    <div className="pb-12 hidden lg:block">
+    <div className="pb-12 hidden md:block">
       <div className="space-y-4 py-4">
         <div className="px-3 py-2">
           <h2 className="mb-2 px-4 text-lg font-semibold tracking-tight">