menu button rework

app/(auth)/_layout.tsx

@@ -13,7 +13,7 @@ import {
   TouchableOpacity,
   View,
 } from "react-native-ui-lib";
-import { ImageBackground, StyleSheet } from "react-native";
+import { ImageBackground, Pressable, StyleSheet } from "react-native";
 import DrawerButton from "@/components/shared/DrawerButton";
 import NavGroceryIcon from "@/assets/svgs/NavGroceryIcon";
 import NavToDosIcon from "@/assets/svgs/NavToDosIcon";
@@ -99,6 +99,7 @@ export default function TabLayout() {
     navigation: DrawerNavigationProp<DrawerParamList>;
     route: RouteProp<DrawerParamList>;
   }): DrawerNavigationOptions => ({
+    lazy: true,
     headerShown: true,
     headerTitleAlign:
       Device.deviceType === DeviceType.TABLET ? "left" : "center",
@@ -125,12 +126,21 @@ export default function TabLayout() {
       fontSize: Device.deviceType === DeviceType.TABLET ? 22 : 17,
     },
     headerLeft: () => (
-      <TouchableOpacity
-        onPress={navigation.toggleDrawer}
-        style={{ marginLeft: 16 }}
+      <Pressable
+        onPress={() => {
+          navigation.toggleDrawer()
+        }}
+        hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+        style={({ pressed }) => [
+          { 
+            marginLeft: 16,
+            opacity: pressed ? 0.4 : 1 
+          }
+        ]}
+    
       >
         <DrawerIcon />
-      </TouchableOpacity>
+      </Pressable>
     ),
     headerRight: () => {
       const showViewSwitch = ["calendar", "todos", "index"].includes(