main menu change

app/(auth)/_layout.tsx

@@ -1,24 +1,109 @@
-import React from 'react';
+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 {
+  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()
+  const { mutateAsync: signOut } = useSignOut();
 
   return (
     <Drawer
       initialRouteName={"index"}
       screenOptions={{
         headerShown: true,
+        drawerStyle: { width: "90%", backgroundColor: "#f9f8f7" },
       }}
-            drawerContent={props => {
+      drawerContent={(props) => {
         return (
           <DrawerContentScrollView {...props}>
-                        <DrawerItemList {...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
@@ -33,7 +118,7 @@ export default function TabLayout() {
         options={{
           drawerLabel: "Calendar",
           title: "Calendar",
-                    drawerItemStyle: {display: "none"}
+          drawerItemStyle: { display: "none" },
         }}
       />
       <Drawer.Screen
@@ -67,3 +152,10 @@ export default function TabLayout() {
     </Drawer>
   );
 }
+
+const styles = StyleSheet.create({
+  square: {
+    width: "100%",
+    aspectRatio: 1, // This ensures the height matches the width, creating a square
+  },
+});

components/shared/DrawerButton.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { Button, View, Text } from "react-native-ui-lib";
+interface IDrawerButtonProps {
+  bgColor: string;
+  color: string;
+  pressFunc: () => void;
+  icon: React.ReactNode;
+  title: string;
+}
+const DrawerButton = (props: IDrawerButtonProps) => {
+  return (
+    <Button
+      onPress={props.pressFunc}
+      label={props.title}
+      labelStyle={{fontSize: 14}}
+      color={props.color}
+      backgroundColor="white"
+      iconSource={() => (
+        <View
+          backgroundColor={props.bgColor}
+          width={60}
+          height={60}
+          style={{ borderRadius: 50 }}
+          centerV
+          centerH
+        >
+          {props.icon}
+        </View>
+      )}
+      style={{ aspectRatio: 1, borderRadius: 15, marginBottom: 12, flexDirection: 'column', justifyContent: "space-between", paddingVertical: 15 }}
+    >
+    </Button>
+  );
+};
+
+export default DrawerButton;