From 1939ff4153d018d7d31ec1aa9941b6f0d5b12c98 Mon Sep 17 00:00:00 2001
From: San45600 <99272387+San45600@users.noreply.github.com>
Date: Fri, 9 Feb 2024 11:11:58 +0800
Subject: [PATCH] fix: mobile sheet ui fix (#20)

---
 web/src/components/Navbar.tsx     |  8 ++++++--
 web/src/components/NavbarMenu.tsx | 11 ++++++++++-
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/web/src/components/Navbar.tsx b/web/src/components/Navbar.tsx
index 52be0c8..3bfe537 100644
--- a/web/src/components/Navbar.tsx
+++ b/web/src/components/Navbar.tsx
@@ -29,6 +29,7 @@ export function Navbar() {
   const { organization } = useOrganization();
   const _isDesktop = useMediaQuery("(min-width: 1024px)");
   const [isDesktop, setIsDesktop] = useState(true);
+  const [isSheetOpen, setSheetOpen] = useState(false);
   useEffect(() => {
     setIsDesktop(_isDesktop);
   }, [_isDesktop]);
@@ -36,7 +37,7 @@ export function Navbar() {
     <>
       <div className="flex flex-row items-center gap-4">
         {!isDesktop && (
-          <Sheet>
+          <Sheet open={isSheetOpen} onOpenChange={(open) => setSheetOpen(open)}>
             <SheetTrigger asChild>
               <button className="flex items-center justify-center w-8 h-8 p-2">
                 <Menu />
@@ -47,7 +48,10 @@ export function Navbar() {
                 <SheetTitle className="text-start">Comfy Deploy</SheetTitle>
               </SheetHeader>
               <div className="grid h-full grid-rows-[1fr_auto]">
-                <NavbarMenu className=" h-full" />
+                <NavbarMenu
+                  className=" h-full"
+                  closeSheet={() => setSheetOpen(false)}
+                />
                 {/* <OrganizationSwitcher
                   appearance={{
                     elements: {
diff --git a/web/src/components/NavbarMenu.tsx b/web/src/components/NavbarMenu.tsx
index 74cc942..804e357 100644
--- a/web/src/components/NavbarMenu.tsx
+++ b/web/src/components/NavbarMenu.tsx
@@ -9,7 +9,13 @@ import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 import { useMediaQuery } from "usehooks-ts";
 
-export function NavbarMenu({ className }: { className?: string }) {
+export function NavbarMenu({
+  className,
+  closeSheet,
+}: {
+  className?: string;
+  closeSheet?: () => void;
+}) {
   const _isDesktop = useMediaQuery("(min-width: 1024px)");
   const [isDesktop, setIsDesktop] = useState(true);
   useEffect(() => {
@@ -68,6 +74,9 @@ export function NavbarMenu({ className }: { className?: string }) {
               <Link
                 key={page.name}
                 href={page.path}
+                onClick={() => {
+                  if (!!closeSheet) closeSheet();
+                }}
                 className="p-2 hover:bg-gray-100/20 hover:underline"
               >
                 {page.name}