From 489c2712d1d43af2519e314da6070b20462be8c4 Mon Sep 17 00:00:00 2001
From: Mike Cao <moocao@gmail.com>
Date: Thu, 29 Jan 2026 00:44:18 -0800
Subject: [PATCH] Make ShareNav full width on mobile

- Remove fixed width, position, and border on mobile
- Use 100% width when onItemClick is provided (mobile context)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/app/share/[slug]/[[...path]]/ShareNav.tsx | 10 ++++++----
 src/components/input/MobileMenuButton.tsx     |  4 ++--
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/app/share/[slug]/[[...path]]/ShareNav.tsx b/src/app/share/[slug]/[[...path]]/ShareNav.tsx
index c5989f28..e6ca3865 100644
--- a/src/app/share/[slug]/[[...path]]/ShareNav.tsx
+++ b/src/app/share/[slug]/[[...path]]/ShareNav.tsx
@@ -137,15 +137,17 @@ export function ShareNav({
     .flatMap(e => e.items)
     .find(({ path }) => path && pathname.endsWith(path.split('?')[0]))?.id;
 
+  const isMobile = !!onItemClick;
+
   return (
     <Column
-      position="fixed"
+      position={isMobile ? undefined : 'fixed'}
       padding="3"
-      width={collapsed ? '60px' : '240px'}
+      width={isMobile ? '100%' : collapsed ? '60px' : '240px'}
       maxHeight="100vh"
       height="100vh"
-      border="right"
-      borderColor="4"
+      border={isMobile ? undefined : 'right'}
+      borderColor={isMobile ? undefined : '4'}
     >
       <Row as="header" gap alignItems="center" paddingY="3" justifyContent="space-between">
         {!collapsed && (
diff --git a/src/components/input/MobileMenuButton.tsx b/src/components/input/MobileMenuButton.tsx
index 5e59cbbb..8498b05a 100644
--- a/src/components/input/MobileMenuButton.tsx
+++ b/src/components/input/MobileMenuButton.tsx
@@ -9,8 +9,8 @@ export function MobileMenuButton(props: DialogProps) {
           <Menu />
         </Icon>
       </Button>
-      <Modal placement="left" offset="80px">
-        <Dialog variant="sheet" {...props} />
+      <Modal placement="left">
+        <Dialog variant="sheet" {...props} style={{ width: 'auto' }} />
       </Modal>
     </DialogTrigger>
   );