Animate admin user menu sheet

resources/js/admin/mobile/components/UserMenuSheet.tsx

@@ -1,13 +1,8 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { ChevronRight, CreditCard, FileText, HelpCircle, User, X } from 'lucide-react';
-import { XStack, YStack } from '@tamagui/stacks';
-import { SizableText as Text } from '@tamagui/text';
+import { XStack, YStack, SizableText as Text, ListItem, YGroup, Switch, Separator } from 'tamagui';
 import { Pressable } from '@tamagui/react-native-web-lite';
-import { ListItem } from '@tamagui/list-item';
-import { YGroup } from '@tamagui/group';
-import { Switch } from '@tamagui/switch';
-import { Separator } from 'tamagui';
 
 import { useAppearance } from '@/hooks/use-appearance';
 import { ADMIN_BILLING_PATH, ADMIN_DATA_EXPORTS_PATH, ADMIN_FAQ_PATH, ADMIN_PROFILE_ACCOUNT_PATH, adminPath } from '../../constants';
@@ -23,6 +18,7 @@ type UserMenuSheetProps = {
 };
 
 const MENU_WIDTH = 320;
+const MENU_CLOSED_OFFSET = MENU_WIDTH + 32;
 
 export function UserMenuSheet({ open, onClose, user, isMember, navigate }: UserMenuSheetProps) {
   const { t, i18n } = useTranslation('management');
@@ -84,18 +80,18 @@ export function UserMenuSheet({ open, onClose, user, isMember, navigate }: UserM
       zIndex={100000}
       pointerEvents={open ? 'auto' : 'none'}
     >
-      <Pressable
+      <YStack
         onPress={onClose}
+        opacity={open ? 1 : 0}
+        fullscreen
+        backgroundColor={theme.overlay}
         style={{
-          position: 'absolute',
-          inset: 0,
-          backgroundColor: theme.overlay,
-          opacity: open ? 1 : 0,
-          transition: 'opacity 180ms ease',
+          transition: 'opacity 220ms ease',
         }}
       />
 
       <YStack
+        data-testid="user-menu-sheet-panel"
         position="absolute"
         top={0}
         bottom={0}
@@ -107,9 +103,10 @@ export function UserMenuSheet({ open, onClose, user, isMember, navigate }: UserM
         borderColor={theme.border}
         padding="$4"
         gap="$3"
+        opacity={open ? 1 : 0}
         style={{
-          transform: open ? 'translateX(0)' : 'translateX(100%)',
-          transition: 'transform 220ms ease',
+          transform: `translateX(${open ? 0 : MENU_CLOSED_OFFSET}px)`,
+          transition: 'transform 260ms ease, opacity 260ms ease',
           boxShadow: `-12px 0 24px ${theme.glassShadow ?? theme.shadow}`,
         }}
       >