cally/app/(auth)/_layout.tsx

import React from "react";
import { Drawer } from "expo-router/drawer";
import { useSignOut } from "@/hooks/firebase/useSignOut";
import {
  DrawerContentScrollView,
  DrawerItem,
  DrawerItemList,
} from "@react-navigation/drawer";
import { Button, View, Text } from "react-native-ui-lib";
import { StyleSheet } from "react-native";
import Feather from "@expo/vector-icons/Feather";
import DrawerButton from "@/components/shared/DrawerButton";
import {
  AntDesign,
  FontAwesome6,
  MaterialCommunityIcons,
} from "@expo/vector-icons";

export default function TabLayout() {
  const { mutateAsync: signOut } = useSignOut();

  return (
    <Drawer
      initialRouteName={"index"}
      screenOptions={{
        headerShown: true,
        drawerStyle: { width: "90%", backgroundColor: "#f9f8f7" },
      }}
      drawerContent={(props) => {
        return (
          <DrawerContentScrollView {...props}>
            <View centerH centerV margin-30>
              <Text text50>Welcome to Kali</Text>
            </View>
            <View style={{ flexDirection: "row", paddingHorizontal: 30 }}>
              <View style={{ flex: 1, paddingRight: 5 }}>
                <DrawerButton
                  title={"Calendar"}
                  color="rgb(7, 184, 199)"
                  bgColor={"rgb(231, 248, 250)"}
                  pressFunc={() => props.navigation.navigate("calendar")}
                  icon={
                    <Feather
                      name="calendar"
                      size={30}
                      color="rgb(7, 184, 199)"
                    />
                  }
                />
                <DrawerButton
                  color="#e0ca03"
                  title={"Brain Dump"}
                  bgColor={"#fffacb"}
                  pressFunc={() => props.navigation.navigate("brain_dump")}
                  icon={<AntDesign name="book" size={30} color="#e0ca03" />}
                />
                <DrawerButton
                  color="#50be0c"
                  title={"Groceries"}
                  bgColor={"#eef9e7"}
                  pressFunc={() => props.navigation.navigate("grocery")}
                  icon={
                    <MaterialCommunityIcons
                      name="food-apple-outline"
                      size={30}
                      color="#50be0c"
                    />
                  }
                />
              </View>
              <View style={{ flex: 1 }}>
                <DrawerButton
                  color="#fd1775"
                  title={"My Reminders"}
                  bgColor={"#ffe8f2"}
                  pressFunc={() => props.navigation.navigate("reminders")}
                  icon={
                    <FontAwesome6
                      name="clock-rotate-left"
                      size={28}
                      color="#fd1775"
                    />
                  }
                />
                <DrawerButton
                  color="#8005eb"
                  title={"To Dos"}
                  bgColor={"#f3e6fd"}
                  pressFunc={() => props.navigation.navigate("todos")}
                  icon={
                    <AntDesign name="checkcircleo" size={30} color="#8005eb" />
                  }
                />
                <DrawerItem label="Logout" onPress={() => signOut()} />
              </View>
            </View>
            <Button
              label={"Manage Settings"}
              backgroundColor="white"
              color="black"
              paddingV-30
              marginH-30
              borderRadius={15}
            />
          </DrawerContentScrollView>
        );
      }}
    >
      <Drawer.Screen
        name="index"
        options={{
          drawerLabel: "Calendar",
          title: "Calendar",
        }}
      />
      <Drawer.Screen
        name="calendar"
        options={{
          drawerLabel: "Calendar",
          title: "Calendar",
          drawerItemStyle: { display: "none" },
        }}
      />
      <Drawer.Screen
        name="brain_dump"
        options={{
          drawerLabel: "Brain Dump",
          title: "Brain Dump",
        }}
      />
      <Drawer.Screen
        name="grocery"
        options={{
          drawerLabel: "Grocery",
          title: "Grocery",
        }}
      />
      <Drawer.Screen
        name="reminders"
        options={{
          drawerLabel: "Reminders",
          title: "Reminders",
        }}
      />
      <Drawer.Screen
        name="todos"
        options={{
          drawerLabel: "To-Do",
          title: "To-Do",
        }}
      />
    </Drawer>
  );
}

const styles = StyleSheet.create({
  square: {
    width: "100%",
    aspectRatio: 1, // This ensures the height matches the width, creating a square
  },
});