Added react navigation drawer, initial template pages, and drawer sidebar design

src/components/DrawerSettings/CustomDrawerContent.tsx

@@ -0,0 +1,57 @@
+import * as React from "react";
+import { DrawerContentScrollView } from "@react-navigation/drawer";
+import { useNavigation } from "@react-navigation/native";
+import { Text, View } from "react-native";
+import { colors } from "../../styles";
+import styles from "../../styles";
+
+import { RootDrawerParamList } from "../../interfaces/Interfaces";
+import AppIcon from "../../icons/AppIcon/AppIcon";
+import HomeIcon from "../../icons/HomeIcon/HomeIcon";
+import LoginIcon from "../../icons/LoginIcon/LoginIcon";
+import SignupIcon from "../../icons/SignupIcon/SignupIcon";
+import DrawerButton from "../Button/DrawerButton";
+
+export default function CustomDrawerContent(props: {}) {
+  const navigation = useNavigation<RootDrawerParamList>();
+  return (
+    <DrawerContentScrollView {...props}>
+      <View
+        style={{
+          ...styles.flex_row,
+          ...{ justifyContent: "center" },
+        }}
+      >
+        <AppIcon size={32} color={colors.icon_color} />
+        <Text style={styles.text_white_medium}>Stud-E</Text>
+      </View>
+      <DrawerButton
+        color={colors.blue_2}
+        onPress={() => {
+          navigation.navigate("Home");
+        }}
+      >
+        <HomeIcon size={32} color={colors.icon_color} />
+        <Text style={styles.text_white_medium}>Home</Text>
+      </DrawerButton>
+      <DrawerButton
+        color={colors.blue_2}
+        onPress={() => {
+          navigation.navigate("Login");
+        }}
+      >
+        <LoginIcon size={32} color={colors.icon_color} />
+        <Text style={styles.text_white_medium}>Login</Text>
+      </DrawerButton>
+      <DrawerButton
+        color={colors.blue_2}
+        onPress={() => {
+          navigation.navigate("Register");
+        }}
+      >
+        <SignupIcon size={32} color={colors.icon_color} />
+        <Text style={styles.text_white_medium}>Register</Text>
+      </DrawerButton>
+    </DrawerContentScrollView>
+  );
+}

src/components/DrawerSettings/DrawerScreenSettings.tsx

@@ -0,0 +1,31 @@
+import type { DrawerNavigationOptions } from "@react-navigation/drawer";
+import { View } from "react-native";
+import { colors } from "../../styles";
+import { font_sizes } from "../../styles";
+import AppIcon from "../../icons/AppIcon/AppIcon";
+
+const DrawerScreenSettings: DrawerNavigationOptions = {
+  headerTitleStyle: {
+    color: colors.text_default,
+    fontSize: font_sizes.medium,
+  },
+  unmountOnBlur: true,
+  headerStyle: { backgroundColor: colors.blue_3 },
+  headerTintColor: colors.text_default,
+  drawerType: "slide",
+  drawerLabelStyle: {
+    color: colors.text_default,
+  },
+  drawerStyle: {
+    backgroundColor: colors.blue_3,
+    width: 260,
+  },
+  headerRight: () => (
+    <View
+      style={{ flexDirection: "row", marginRight: 16, alignItems: "center" }}
+    >
+      <AppIcon size={32} color={colors.icon_color} />
+    </View>
+  ),
+};
+export default DrawerScreenSettings;