llink/js/mobile/src/features/networks/Drawer.tsx

import { useEffect, useRef } from "react";
import {
  Animated,
  Dimensions,
  Easing,
  Modal,
  Pressable,
  Text,
  View,
} from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { useAuthStore } from "@/stores/auth-store";

const SCREEN_WIDTH = Dimensions.get("window").width;
const DRAWER_WIDTH = Math.min(320, Math.round(SCREEN_WIDTH * 0.82));
const ANIM_MS = 220;

interface DrawerProps {
  open: boolean;
  onClose: () => void;
  onNavigateAccount: () => void;
  onNavigateSettings: () => void;
}

export function Drawer({
  open,
  onClose,
  onNavigateAccount,
  onNavigateSettings,
}: DrawerProps) {
  const translateX = useRef(new Animated.Value(-DRAWER_WIDTH)).current;
  const backdropOpacity = useRef(new Animated.Value(0)).current;

  useEffect(() => {
    Animated.parallel([
      Animated.timing(translateX, {
        toValue: open ? 0 : -DRAWER_WIDTH,
        duration: ANIM_MS,
        easing: Easing.out(Easing.cubic),
        useNativeDriver: true,
      }),
      Animated.timing(backdropOpacity, {
        toValue: open ? 0.4 : 0,
        duration: ANIM_MS,
        easing: Easing.out(Easing.cubic),
        useNativeDriver: true,
      }),
    ]).start();
  }, [open, translateX, backdropOpacity]);

  const user = useAuthStore((s) => s.user);
  const signOut = useAuthStore((s) => s.signOut);
  const isSigningOut = useAuthStore((s) => s.isSigningOut);

  const initials = user?.email_prefix.slice(0, 2).toUpperCase() ?? "??";

  return (
    <Modal
      visible={open}
      transparent
      animationType="none"
      onRequestClose={onClose}
      statusBarTranslucent
    >
      <View className="flex-1">
        <Animated.View
          pointerEvents={open ? "auto" : "none"}
          style={{ opacity: backdropOpacity }}
          className="absolute inset-0 bg-black"
        >
          <Pressable className="flex-1" onPress={onClose} />
        </Animated.View>

        <Animated.View
          style={{
            width: DRAWER_WIDTH,
            transform: [{ translateX }],
          }}
          className="absolute left-0 top-0 bottom-0 bg-sidebar"
        >
          <SafeAreaView edges={["top", "bottom", "left"]} className="flex-1">
            <View className="border-sidebar-border border-b px-5 py-5 flex-row items-center gap-3">
              <View className="bg-sidebar-accent h-10 w-10 items-center justify-center rounded-full">
                <Text className="text-sidebar-accent-foreground text-sm font-semibold">
                  {initials}
                </Text>
              </View>
              <View className="flex-1">
                <Text
                  className="text-sidebar-foreground text-base font-medium"
                  numberOfLines={1}
                >
                  {user?.email_prefix ?? ""}
                </Text>
                <Text
                  className="text-muted-foreground text-xs"
                  numberOfLines={1}
                >
                  {user?.email ?? ""}
                </Text>
              </View>
            </View>

            <View className="flex-1 py-2">
              <DrawerRow
                label="Account"
                onPress={() => {
                  onClose();
                  onNavigateAccount();
                }}
              />
              <DrawerRow
                label="Settings"
                onPress={() => {
                  onClose();
                  onNavigateSettings();
                }}
              />
            </View>

            <View className="border-sidebar-border border-t px-2 py-2">
              <DrawerRow
                label={isSigningOut ? "Signing out..." : "Sign out"}
                disabled={isSigningOut}
                onPress={() => {
                  void signOut();
                }}
                tone="destructive"
              />
            </View>
          </SafeAreaView>
        </Animated.View>
      </View>
    </Modal>
  );
}

function DrawerRow({
  label,
  onPress,
  disabled,
  tone = "default",
}: {
  label: string;
  onPress: () => void;
  disabled?: boolean;
  tone?: "default" | "destructive";
}) {
  return (
    <Pressable
      onPress={onPress}
      disabled={disabled}
      className="px-5 py-3 active:bg-sidebar-accent"
    >
      <Text
        className={`text-base font-medium ${
          tone === "destructive"
            ? "text-destructive"
            : "text-sidebar-foreground"
        } ${disabled ? "opacity-50" : ""}`}
      >
        {label}
      </Text>
    </Pressable>
  );
}