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>
This commit is contained in:
1 parent
b43e7fd3a7
commit
489c2712d1
2 files changed
+8
-6
No files matched your search
@@ -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 && (
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
Reference in new issue
Block a user