From 988f356c7c19d62d9a0cb06e9290e95e964746f6 Mon Sep 17 00:00:00 2001
From: Andrew Lee <andrewlee011@hotmail.com>
Date: Mon, 2 Dec 2024 13:25:16 -0500
Subject: [PATCH] changed mobile nav drawer to match builder

---
 src/assets/icons/chain-white.svg              |  7 --
 .../icons/external-link-arrow-white.svg       |  5 --
 .../recovery/MobileDrawerContent.tsx          | 90 +++++++++++++++++++
 src/components/recovery/MobileMoreMenu.tsx    | 68 --------------
 src/components/recovery/RecoveryHeader.tsx    | 19 ++--
 src/components/recovery/styles.css.ts         | 12 +++
 6 files changed, 116 insertions(+), 85 deletions(-)
 delete mode 100644 src/assets/icons/chain-white.svg
 delete mode 100644 src/assets/icons/external-link-arrow-white.svg
 create mode 100644 src/components/recovery/MobileDrawerContent.tsx
 delete mode 100644 src/components/recovery/MobileMoreMenu.tsx
 create mode 100644 src/components/recovery/styles.css.ts

diff --git a/src/assets/icons/chain-white.svg b/src/assets/icons/chain-white.svg
deleted file mode 100644
index 71153f1..0000000
--- a/src/assets/icons/chain-white.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="chain">
-<path id="Union" fill-rule="evenodd" clip-rule="evenodd" d="M12.2383 3.6704L8.99999 1.80078L5.76172 3.6704V7.40963L8.99999 9.27924L12.2383 7.40963V3.6704ZM6.66172 4.37375V6.89001L8.54994 7.98018V5.33263L6.66172 4.37375ZM9.44994 5.31023V7.98023L11.3383 6.89001V4.3701L9.44994 5.31023Z" fill="white"/>
-<path id="Union_2" fill-rule="evenodd" clip-rule="evenodd" d="M8.27659 10.2798L5.03832 8.41016L1.80005 10.2798V14.019L5.03832 15.8886L8.27659 14.019V10.2798ZM2.70005 10.9831V13.4994L4.58827 14.5896V11.942L2.70005 10.9831ZM5.48827 11.9196V14.5896L7.37659 13.4994V10.9795L5.48827 11.9196Z" fill="white"/>
-<path id="Union_3" fill-rule="evenodd" clip-rule="evenodd" d="M16.3764 10.2798L13.1382 8.41016L9.8999 10.2798V14.019L13.1382 15.8886L16.3764 14.019V10.2798ZM10.7999 10.9831V13.4994L12.6881 14.5896V11.942L10.7999 10.9831ZM13.5881 11.9196V14.5896L15.4764 13.4994V10.9795L13.5881 11.9196Z" fill="white"/>
-</g>
-</svg>
diff --git a/src/assets/icons/external-link-arrow-white.svg b/src/assets/icons/external-link-arrow-white.svg
deleted file mode 100644
index 60db0d9..0000000
--- a/src/assets/icons/external-link-arrow-white.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="External Link Arrow">
-<path id="Union" d="M11.3471 6.07461H6.67672V4.72461H13.6517V11.6996H12.3017V7.0292L5.35401 13.9769L4.39941 13.0223L11.3471 6.07461Z" fill="white"/>
-</g>
-</svg>
diff --git a/src/components/recovery/MobileDrawerContent.tsx b/src/components/recovery/MobileDrawerContent.tsx
new file mode 100644
index 0000000..41e5179
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/src/components/recovery/MobileMoreMenu.tsx b/src/components/recovery/MobileMoreMenu.tsx
deleted file mode 100644
index d99ebc8..0000000
--- a/src/components/recovery/MobileMoreMenu.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import { Box, Button, Card, Image, MenuIcon, Text } from '@0xsequence/design-system'
-import * as PopoverPrimitive from '@radix-ui/react-popover'
-
-import { useObservable, useStore } from '~/stores'
-import { WalletStore } from '~/stores/WalletStore'
-
-import networkIcon from '~/assets/icons/chain-white.svg'
-import externalArrowIcon from '~/assets/icons/external-link-arrow-white.svg'
-
-export default function MobileMoreMenu() {
-  const walletStore = useStore(WalletStore)
-
-  const isNavDrawerOpen = useObservable(walletStore.isNavDrawerOpen)
-  const isNetworkModalOpen = useObservable(walletStore.isNetworkModalOpen)
-  const toggleNavDrawer = () => {
-    walletStore.isNavDrawerOpen.set(!isNavDrawerOpen)
-  }
-
-  const toggleNetworkModal = () => {
-    walletStore.isNetworkModalOpen.set(!isNetworkModalOpen)
-  }
-
-  return (
-    <PopoverPrimitive.Root open={isNavDrawerOpen} onOpenChange={toggleNavDrawer}>
-      <PopoverPrimitive.Trigger asChild>
-        <Button variant="text" onClick={() => toggleNavDrawer()} leftIcon={MenuIcon} />
-      </PopoverPrimitive.Trigger>
-
-      {isNavDrawerOpen && (
-        <PopoverPrimitive.Portal forceMount>
-          <PopoverPrimitive.Content asChild side="bottom" sideOffset={8} align="center">
-            <Card flexDirection="column" backdropFilter="blur" gap="2">
-              <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="text100">
-                  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="text100">
-                  Networks
-                </Text>
-              </Box>
-            </Card>
-          </PopoverPrimitive.Content>
-        </PopoverPrimitive.Portal>
-      )}
-    </PopoverPrimitive.Root>
-  )
-}
diff --git a/src/components/recovery/RecoveryHeader.tsx b/src/components/recovery/RecoveryHeader.tsx
index 9618061..2b6b484 100644
--- a/src/components/recovery/RecoveryHeader.tsx
+++ b/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>
diff --git a/src/components/recovery/styles.css.ts b/src/components/recovery/styles.css.ts
new file mode 100644
index 0000000..b920224
--- /dev/null
+++ b/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',
+  }),
+])