From 1a3ecdf6ecb411f7bf0e1a360f0c57d3b3d65f48 Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Wed, 12 Feb 2025 21:51:16 +0000
Subject: Animate drawer menu on mobile web (#7711)

* slide in/out drawer

* increase width slightly

* exponential easing function
---
 src/view/shell/index.web.tsx | 45 ++++++++++++++++++++++++++++++++------------
 1 file changed, 33 insertions(+), 12 deletions(-)

(limited to 'src/view/shell/index.web.tsx')

diff --git a/src/view/shell/index.web.tsx b/src/view/shell/index.web.tsx
index 8c30813ab..e194a49de 100644
--- a/src/view/shell/index.web.tsx
+++ b/src/view/shell/index.web.tsx
@@ -1,4 +1,4 @@
-import React, {useEffect} from 'react'
+import {useEffect, useLayoutEffect, useState} from 'react'
 import {StyleSheet, TouchableWithoutFeedback, View} from 'react-native'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
@@ -33,6 +33,20 @@ function ShellInner() {
   const closeAllActiveElements = useCloseAllActiveElements()
   const {_} = useLingui()
   const showDrawer = !isDesktop && isDrawerOpen
+  const [showDrawerDelayedExit, setShowDrawerDelayedExit] = useState(showDrawer)
+
+  useLayoutEffect(() => {
+    if (showDrawer !== showDrawerDelayedExit) {
+      if (showDrawer) {
+        setShowDrawerDelayedExit(true)
+      } else {
+        const timeout = setTimeout(() => {
+          setShowDrawerDelayedExit(false)
+        }, 160)
+        return () => clearTimeout(timeout)
+      }
+    }
+  }, [showDrawer, showDrawerDelayedExit])
 
   useComposerKeyboardShortcut()
   useIntentHandler()
@@ -56,7 +70,7 @@ function ShellInner() {
       <Lightbox />
       <PortalOutlet />
 
-      {showDrawer && (
+      {showDrawerDelayedExit && (
         <>
           <RemoveScrollBar />
           <TouchableWithoutFeedback
@@ -66,20 +80,27 @@ function ShellInner() {
                 setDrawerOpen(false)
               }
             }}
-            accessibilityLabel={_(msg`Close navigation footer`)}
-            accessibilityHint={_(msg`Closes bottom navigation bar`)}>
+            accessibilityLabel={_(msg`Close drawer menu`)}
+            accessibilityHint="">
             <View
               style={[
                 styles.drawerMask,
                 {
-                  backgroundColor: select(t.name, {
-                    light: 'rgba(0, 57, 117, 0.1)',
-                    dark: 'rgba(1, 82, 168, 0.1)',
-                    dim: 'rgba(10, 13, 16, 0.8)',
-                  }),
+                  backgroundColor: showDrawer
+                    ? select(t.name, {
+                        light: 'rgba(0, 57, 117, 0.1)',
+                        dark: 'rgba(1, 82, 168, 0.1)',
+                        dim: 'rgba(10, 13, 16, 0.8)',
+                      })
+                    : 'transparent',
                 },
+                a.transition_color,
               ]}>
-              <View style={styles.drawerContainer}>
+              <View
+                style={[
+                  styles.drawerContainer,
+                  showDrawer ? a.slide_in_left : a.slide_out_left,
+                ]}>
                 <DrawerContent />
               </View>
             </View>
@@ -109,7 +130,6 @@ const styles = StyleSheet.create({
     backgroundColor: colors.black, // TODO
   },
   drawerMask: {
-    // @ts-ignore web only
     position: 'fixed',
     width: '100%',
     height: '100%',
@@ -118,10 +138,11 @@ const styles = StyleSheet.create({
   },
   drawerContainer: {
     display: 'flex',
-    // @ts-ignore web only
     position: 'fixed',
     top: 0,
     left: 0,
     height: '100%',
+    width: 330,
+    maxWidth: '80%',
   },
 })
-- 
cgit 1.4.1