From b5e9f7d968d1ca20e7706d022e9017e2f3f36d84 Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@mikecao.com>
Date: Mon, 3 Aug 2026 13:11:57 -0700
Subject: [PATCH] Make mobile menu sheet height responsive and support
 controlled state

---
 src/app/(main)/MobileNav.tsx              |  8 +----
 src/components/input/MobileMenuButton.tsx | 38 ++++++++++++++++++++---
 2 files changed, 34 insertions(+), 12 deletions(-)

diff --git a/src/app/(main)/MobileNav.tsx b/src/app/(main)/MobileNav.tsx
index 1ef458638..85af5e220 100644
--- a/src/app/(main)/MobileNav.tsx
+++ b/src/app/(main)/MobileNav.tsx
@@ -49,13 +49,7 @@ export function MobileNav() {
       <MobileMenuButton>
         {({ close }) => {
           return (
-            <Column
-              gap="2"
-              display="flex"
-              flex-direction="column"
-              padding="1"
-              style={{ height: '100dvh' }}
-            >
+            <Column gap="2" display="flex" flex-direction="column" padding="1" height="100%">
               {isMain &&
                 links.map(link => {
                   return (
diff --git a/src/components/input/MobileMenuButton.tsx b/src/components/input/MobileMenuButton.tsx
index 76809e66f..985486167 100644
--- a/src/components/input/MobileMenuButton.tsx
+++ b/src/components/input/MobileMenuButton.tsx
@@ -1,16 +1,44 @@
-import { Button, Dialog, type DialogProps, DialogTrigger, Icon, Sheet } from '@umami/react-zen';
+import {
+  Button,
+  type DialogRenderProps,
+  DialogTrigger,
+  Icon,
+  Sheet,
+  type SheetProps,
+} from '@umami/react-zen';
+import { type ReactNode, useState } from 'react';
 import { Menu } from '@/components/icons';
 
-export function MobileMenuButton(props: DialogProps) {
+export interface MobileMenuButtonProps extends Omit<SheetProps, 'children' | 'side'> {
+  children?: ReactNode | ((props: DialogRenderProps) => ReactNode);
+}
+
+export function MobileMenuButton({
+  children,
+  isOpen: controlledOpen,
+  onOpenChange,
+  ...props
+}: MobileMenuButtonProps) {
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
+  const isOpen = controlledOpen ?? uncontrolledOpen;
+  const handleOpenChange = (open: boolean) => {
+    if (controlledOpen === undefined) {
+      setUncontrolledOpen(open);
+    }
+    onOpenChange?.(open);
+  };
+
   return (
-    <DialogTrigger>
+    <DialogTrigger isOpen={isOpen} onOpenChange={handleOpenChange}>
       <Button>
         <Icon>
           <Menu />
         </Icon>
       </Button>
-      <Sheet side="left">
-        <Dialog {...props} style={{ width: 'auto' }} />
+      <Sheet {...props} side="left">
+        {typeof children === 'function'
+          ? children({ close: () => handleOpenChange(false) })
+          : children}
       </Sheet>
     </DialogTrigger>
   );