Merge pull request #328 from bounswe/feature/MB-create-home-page-cli

Home page is created

mobile/android/app/build.gradle

@@ -1,6 +1,8 @@
 apply plugin: "com.android.application"
 apply plugin: "org.jetbrains.kotlin.android"
 apply plugin: "com.facebook.react"
+apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
+
 
 /**
  * This is the configuration block to customize your React Native Android app.

mobile/package.json

@@ -19,7 +19,9 @@
     "react-native-gesture-handler": "^2.12.0",
     "react-native-reanimated": "^3.0.0-rc.3",
     "react-native-safe-area-context": "^4.7.1",
-    "react-native-screens": "^3.23.0"
+    "react-native-screens": "^3.23.0",
+    "react-native-svg": "^15.8.0",
+    "react-native-vector-icons": "^10.2.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

mobile/src/pages/App.js

@@ -1,30 +1,103 @@
 import 'react-native-gesture-handler';
 import React from 'react';
+import { View, TouchableOpacity, Text, StyleSheet, Image } from 'react-native';
 import { NavigationContainer } from '@react-navigation/native';
 import { createStackNavigator } from '@react-navigation/stack';
+import { createDrawerNavigator } from '@react-navigation/drawer';
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import Login from './Login';
 import Register from './Register';
 import ForgotPassword from './ForgotPassword';
 import Home from './Home'
 
 const Stack = createStackNavigator();
+const Sidebar = createDrawerNavigator();
+
 
 const App = () => {
-  return (
-    <NavigationContainer>
-      <Stack.Navigator
-        initialRouteName="Login"
-        screenOptions={{
-          headerShown: false, // Hide the header for all screens
-        }}
-      >
-        <Stack.Screen name="Login" component={Login} />
-        <Stack.Screen name="Register" component={Register} />
-        <Stack.Screen name="ForgotPassword" component={ForgotPassword} />
-        <Stack.Screen name="Home" component={Home} />
-      </Stack.Navigator>
-    </NavigationContainer>
-  );
+
+    const CustomHeader = ({ navigation, title }) => (
+      <View style={styles.header}>
+        <TouchableOpacity onPress={() => navigation.toggleDrawer()}>
+          <MaterialIcons name="menu" size={30} color="white" />
+        </TouchableOpacity>
+        <View style={styles.logo}>
+          {/* <Image
+            source={require('../../assets/IconKitchen-Output/ios/AppIcon~ipad.png')}
+            
+            
+          /> */}
+          <Text style={styles.logoText}> Bull&Bear </Text>
+        </View>  
+        <TouchableOpacity onPress={() => navigation.toggleDrawer()}>
+          <MaterialIcons name="account-circle" size={30} color="white" />
+        </TouchableOpacity>
+      </View>
+    );
+
+    const LoginRelated = () => {
+      return (
+        <Stack.Navigator>
+          <Stack.Screen name="Login" component={Login} options={{headerShown:false}}></Stack.Screen>
+          <Stack.Screen name="Register" component={Register} options={{headerShown:false}}></Stack.Screen>
+          <Stack.Screen name="ForgotPassword" component={ForgotPassword} options={{headerShown:false}}></Stack.Screen>
+        </Stack.Navigator>
+      )
+    }
+
+    return (
+        <NavigationContainer>
+          <Sidebar.Navigator>
+            <Sidebar.Screen 
+              name="Home" 
+              component={Home} 
+              options={({ navigation }) => ({
+                header: () => <CustomHeader navigation={navigation} title="Home" />,
+              })}
+            />
+            <Sidebar.Screen 
+              name="Login" 
+              component={LoginRelated} 
+              options={({ navigation }) => ({
+                header: () => <CustomHeader navigation={navigation} title="Login" />,
+              })}
+            />
+          </Sidebar.Navigator>
+        </NavigationContainer>
+      );
 };
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  header: {
+    height: 50,
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 15,
+    borderBottomWidth: 1,
+    borderBottomColor: '#ddd',
+    backgroundColor:"#0077B6",
+  },
+  headerTitle: {
+    marginLeft: 10,
+    fontSize: 18,
+    fontWeight: 'bold',
+  },
+  logo:{
+    flexDirection:"row",
+    marginLeft:100,
+    marginRight:100,
+  },
+  logoText:{
+    fontSize:18,
+    fontWeight:"bold",
+    color:"white"
+  },
+});
 
 export default App;
+