From f413d29fa16d5ea39391f5ec421745e441b1f2fd Mon Sep 17 00:00:00 2001
From: mkfain <mk@marykatefain.com>
Date: Sun, 17 May 2026 20:30:45 -0500
Subject: [PATCH] Remove duplicate close X in mobile hamburger menu
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The mobile nav drawer in TopNav has its own X button inside the panel
header, but SheetContent was also rendering the shadcn primitive close
button just outside the panel — two X buttons for the same sheet.

Add an opt-in `hideClose` prop to SheetContent and set it on the
TopNav drawer. Other Sheet consumers (MobileDrawer, etc.) keep the
default built-in close.
---
 src/components/TopNav.tsx   |  2 +-
 src/components/ui/sheet.tsx | 37 +++++++++++++++++++++++--------------
 2 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/src/components/TopNav.tsx b/src/components/TopNav.tsx
index 2d5171e0..76ff9d70 100644
--- a/src/components/TopNav.tsx
+++ b/src/components/TopNav.tsx
@@ -88,7 +88,7 @@ export function TopNav() {
 
       {/* Mobile drawer */}
       <Sheet open={mobileOpen} onOpenChange={setMobileOpen}>
-        <SheetContent side="left" className="w-72 p-0 flex flex-col gap-0">
+        <SheetContent side="left" hideClose className="w-72 p-0 flex flex-col gap-0">
           <div className="flex items-center justify-between px-5 py-4 border-b border-border">
             <Link
               to="/"
diff --git a/src/components/ui/sheet.tsx b/src/components/ui/sheet.tsx
index bd033fb6..d45ccf97 100644
--- a/src/components/ui/sheet.tsx
+++ b/src/components/ui/sheet.tsx
@@ -49,12 +49,19 @@ const sheetVariants = cva(
 
 interface SheetContentProps
   extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
-  VariantProps<typeof sheetVariants> { }
+  VariantProps<typeof sheetVariants> {
+  /**
+   * When true, suppress the built-in close (X) button. Use this when the
+   * sheet content renders its own close affordance to avoid duplicate
+   * dismiss buttons.
+   */
+  hideClose?: boolean;
+}
 
 const SheetContent = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Content>,
   SheetContentProps
->(({ side = "right", className, children, ...props }, ref) => (
+>(({ side = "right", className, children, hideClose = false, ...props }, ref) => (
   <SheetPortal>
     <SheetOverlay />
     <SheetPrimitive.Content
@@ -63,18 +70,20 @@ const SheetContent = React.forwardRef<
       {...props}
     >
       {children}
-      <SheetPrimitive.Close
-        className={cn(
-          "absolute opacity-70 transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none",
-          side === "left"
-            ? "left-full ml-3 top-4"
-            : "right-4 top-4 rounded-sm ring-offset-background focus:ring-2 focus:ring-ring focus:ring-offset-2 data-[state=open]:bg-secondary"
-        )}
-        style={{ top: `calc(var(--safe-area-inset-top, env(safe-area-inset-top, 0px)) + 0.85rem)` }}
-      >
-        <X className={side === "left" ? "h-5 w-5 text-white" : "h-4 w-4"} strokeWidth={side === "left" ? 2.5 : 2} />
-        <span className="sr-only">Close</span>
-      </SheetPrimitive.Close>
+      {!hideClose && (
+        <SheetPrimitive.Close
+          className={cn(
+            "absolute opacity-70 transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none",
+            side === "left"
+              ? "left-full ml-3 top-4"
+              : "right-4 top-4 rounded-sm ring-offset-background focus:ring-2 focus:ring-ring focus:ring-offset-2 data-[state=open]:bg-secondary"
+          )}
+          style={{ top: `calc(var(--safe-area-inset-top, env(safe-area-inset-top, 0px)) + 0.85rem)` }}
+        >
+          <X className={side === "left" ? "h-5 w-5 text-white" : "h-4 w-4"} strokeWidth={side === "left" ? 2.5 : 2} />
+          <span className="sr-only">Close</span>
+        </SheetPrimitive.Close>
+      )}
     </SheetPrimitive.Content>
   </SheetPortal>
 ))