changed mobile nav drawer to match builder

src/components/recovery/MobileDrawerContent.tsx

@@ -0,0 +1,90 @@
+import { Box,  Image, Text } from '@0xsequence/design-system'
+import { motion } from 'framer-motion'
+
+import { useStore } from '~/stores'
+import { useObservable } from '~/stores'
+import { WalletStore } from '~/stores/WalletStore'
+
+import networkIcon from '~/assets/icons/chain.svg'
+import externalArrowIcon from '~/assets/icons/external-link-arrow.svg'
+
+import { RECOVERY_HEADER_HEIGHT } from './RecoveryHeader'
+import { navDrawer } from './styles.css'
+
+export const MobileDrawerContent = () => {
+  const walletStore = useStore(WalletStore)
+  const isNetworkModalOpen = useObservable(walletStore.isNetworkModalOpen)
+
+  const toggleNetworkModal = () => {
+    walletStore.isNetworkModalOpen.set(!isNetworkModalOpen)
+  }
+
+  return (
+    <Box
+      as={motion.div}
+      background="backgroundOverlay"
+      className={navDrawer}
+      display={{
+        sm: 'flex',
+        lg: 'none'
+      }}
+      flexDirection="row"
+      transition={{ type: 'just' }}
+      zIndex="20"
+      style={{
+        top: RECOVERY_HEADER_HEIGHT
+      }}
+    >
+      <Box
+        position="absolute"
+        animate={{ left: 0 }}
+        as={motion.div}
+        background="backgroundPrimary"
+        exit={{ left: '-100%' }}
+        flexDirection="column"
+        gap="5"
+        height="full"
+        initial={{ left: '-100%' }}
+        maxHeight="vh"
+        overflowY="scroll"
+        paddingX={{ sm: '3', md: '6' }}
+        paddingY={{ sm: '4', md: '6' }}
+        transition={{ type: 'just' }}
+        borderLeftWidth="thin"
+        borderLeftStyle="solid"
+        borderLeftColor="backgroundBackdrop"
+        style={{ width: '75%' }}
+      >
+          <Box
+            // flexDirection="row"
+            // alignItems="center"
+            // background="buttonGlass"
+            // borderRadius="sm"
+            gap="2"
+            // style={{ cursor: 'pointer', padding: '8px 16px 8px 8px' }}
+            onClick={() => window.open('https://docs.sequence.xyz/')}
+          >
+            <Image src={externalArrowIcon} height="5" />
+            <Text variant="normal" fontWeight="bold" color="text50">
+              Docs
+            </Text>
+          </Box>
+
+          <Box
+            // flexDirection="row"
+            // alignItems="center"
+            // background="buttonGlass"
+            // borderRadius="sm"
+            gap="2"
+            // style={{ cursor: 'pointer', padding: '8px 16px 8px 8px' }}
+            onClick={() => toggleNetworkModal()}
+          >
+            <Image src={networkIcon} height="5" />
+            <Text variant="normal" fontWeight="bold" color="text50">
+              Networks
+            </Text>
+          </Box>
+      </Box>
+    </Box>
+  )
+}

src/components/recovery/RecoveryHeader.tsx

@@ -1,4 +1,5 @@
-import { Box, Button, Divider, Image, Text, useMediaQuery } from '@0xsequence/design-system'
+import { Box, Button, Divider, Image, MenuIcon, Text, useMediaQuery } from '@0xsequence/design-system'
+import { AnimatePresence } from 'framer-motion'
 
 import { useObservable, useStore } from '~/stores'
 import { AuthStore } from '~/stores/AuthStore'
@@ -11,9 +12,9 @@ import externalArrowIcon from '~/assets/icons/external-link-arrow.svg'
 import SequenceRecoveryLogo from '~/assets/images/sequence-wallet-recovery.svg'
 import SequenceLogo from '~/assets/images/sequence.svg'
 
-import MobileMoreMenu from './MobileMoreMenu'
+import { MobileDrawerContent } from './MobileDrawerContent'
 
-export const RECOVERY_HEADER_HEIGHT = 60
+export const RECOVERY_HEADER_HEIGHT = 61
 
 export default function RecoveryHeader() {
   const isMobile = useMediaQuery('isMobile')
@@ -22,13 +23,18 @@ export default function RecoveryHeader() {
   const walletStore = useStore(WalletStore)
 
   const signedIn = useObservable(authStore.accountAddress)
+  const isNavDrawerOpen = useObservable(walletStore.isNavDrawerOpen)
 
   const openNetworkModal = () => {
     walletStore.isNetworkModalOpen.set(true)
   }
 
+  const toggleNavDrawer = () => {
+    walletStore.isNavDrawerOpen.set(!isNavDrawerOpen)
+  }
+
   return (
-    <Box flexDirection="column" style={{ paddingBottom: '60px' }}>
+    <Box flexDirection="column" style={{ paddingBottom: `${RECOVERY_HEADER_HEIGHT}px` }}>
       <Box background="backgroundPrimary" position="fixed" width="full">
         <Box
           flexDirection="row"
@@ -39,7 +45,10 @@ export default function RecoveryHeader() {
           {isMobile ? (
             <>
               <Box paddingLeft="5" flexDirection="row">
-                <MobileMoreMenu />
+                <AnimatePresence>
+                  {isNavDrawerOpen && <MobileDrawerContent />}
+                </AnimatePresence>
+                <Button variant="text" onClick={() => toggleNavDrawer()} leftIcon={MenuIcon} />
 
                 <Image src={SequenceLogo} paddingLeft="5" />
               </Box>

src/components/recovery/styles.css.ts

@@ -0,0 +1,12 @@
+import { atoms } from '@0xsequence/design-system'
+import { style } from '@vanilla-extract/css'
+
+export const navDrawer = style([
+  atoms({
+    position: 'fixed',
+    left: '0',
+
+    width: 'vw',
+    height: 'vh',
+  }),
+])