Updates side menu styles for small screens

Protofy-xyz · Jan 14, 2025 · 0b35e85 · 0b35e85
1 parent be04203
commit 0b35e85
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 11 deletions.
diff --git a/packages/protolib/src/components/layout/HeaderContents.tsx b/packages/protolib/src/components/layout/HeaderContents.tsx
@@ -33,7 +33,7 @@ export const HeaderContents = React.memo(({leftArea, centerArea,rightArea, logo,
     <XStack f={1} pt="$3" >
       <XStack ai="center" space="$4">
         {(logo || themeSwitcher || tintSwitcher) &&
-          <XStack f={1} minWidth={210}>
+          <XStack f={1} minWidth={210} $xs={{paddingLeft: "$4"}}>
             {logo && <NextLink href={logoHref}>
               <XStack py={logoSize/4} ai="center" px="$3" cur="pointer" my={-20}>
                 {logo}

diff --git a/packages/protolib/src/components/layout/SideMenu.tsx b/packages/protolib/src/components/layout/SideMenu.tsx
@@ -1,13 +1,12 @@
 import { YStack, useMedia, Button } from 'tamagui'
 import { useState } from 'react'
-import { X, PanelLeftOpen } from '@tamagui/lucide-icons'
+import { X, PanelLeftOpen, PanelLeftClose } from '@tamagui/lucide-icons'
 import { Tinted } from '../Tinted'
 
 export const SideMenu = ({ sideBarColor = '$background', children, ...props }: any) => {
     const isXs = useMedia().xs
     const [open, setOpen] = useState(false)
     const width = 260
-    const xsMenuMargin = 5
 
     return <YStack bw={0} bc={sideBarColor} {...props}>
         <YStack
@@ -25,20 +24,31 @@ export const SideMenu = ({ sideBarColor = '$background', children, ...props }: a
         >
             {children}
         </YStack>
-        {isXs && <Tinted>
+        {isXs && <>
+            <YStack
+                backgroundColor="$background"
+                h="100%"
+                width='100vw'
+                display={open ? 'flex' : 'none'}
+                onPress={e => {
+                    setOpen(false)
+                    e.stopPropagation()
+                }}
+            ></YStack>
+
             <Button
                 onPress={() => setOpen(!open)}
                 position="absolute"
-                zIndex={999}
-                left={open ? (width + xsMenuMargin) : xsMenuMargin}
-                top="$10"
-                icon={open ? X : PanelLeftOpen}
+                zIndex={99999}
+                left={8}
+                top="-40px"
+                icon={open ? PanelLeftClose : PanelLeftOpen}
                 scaleIcon={1.5}
-                size="$5"
-                theme={open ? 'red' : undefined}
+                size="$3"
+                backgroundColor="transparent"
                 circular
             >
             </Button>
-        </Tinted>}
+        </>}
     </YStack>
 }