From 4c8aa5b264aa2057705b1c5092af73683a21edd3 Mon Sep 17 00:00:00 2001
From: ngc2207 <cfngc3109@gmail.com>
Date: Sun, 2 Feb 2025 01:31:28 +0800
Subject: [PATCH] feat(ui): add mobile sidebar with sheet component

---
 src/components/mobile-sidebar.tsx | 30 ++++++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)
 create mode 100644 src/components/mobile-sidebar.tsx

diff --git a/src/components/mobile-sidebar.tsx b/src/components/mobile-sidebar.tsx
new file mode 100644
index 0000000..c033d27
--- /dev/null
+++ b/src/components/mobile-sidebar.tsx
@@ -0,0 +1,30 @@
+"use client";
+
+import { Sidebar } from "./sidebar";
+import { Button } from "./ui/button";
+import { MenuIcon } from "lucide-react";
+import { useEffect, useState } from "react";
+import { usePathname } from "next/navigation";
+import { Sheet, SheetContent, SheetTrigger } from "./ui/sheet";
+
+export const MobileSidebar = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const pathname = usePathname();
+
+  useEffect(() => {
+    setIsOpen(false);
+  }, [pathname]);
+
+  return (
+    <Sheet modal={false} open={isOpen} onOpenChange={setIsOpen}>
+      <SheetTrigger asChild>
+        <Button variant="secondary" className="lg:hidden">
+          <MenuIcon className="size-4" />
+        </Button>
+      </SheetTrigger>
+      <SheetContent side="left" className="p-0">
+        <Sidebar />
+      </SheetContent>
+    </Sheet>
+  );
+};