Sidebar Setup

App.js

@@ -5,10 +5,10 @@
  * @format
  */
 
-import { NavigationContainer } from '@react-navigation/native';
+import {NavigationContainer} from '@react-navigation/native';
 import React from 'react';
-import 'react-native-gesture-handler'
-import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import 'react-native-gesture-handler';
+import {createNativeStackNavigator} from '@react-navigation/native-stack';
 import {
   SafeAreaView,
   ScrollView,
@@ -23,43 +23,36 @@ import HomePageNavigator from './navigation/HomePageNavigator';
 
 const AppStack = createNativeStackNavigator();
 
+
 const App = () => {
+ 
   return (
-
-
     <NavigationContainer>
-      <AppStack.Navigator
-        iniialRouteName="Home"
-        headerShown={true}
-      >
+      <AppStack.Navigator iniialRouteName="Home" headerShown={true}>
         <AppStack.Screen
-          name='Login'
+          name="Login"
           component={LoginPage}
           options={{
-            headerShown: false
+            headerShown: false,
           }}
         />
         <AppStack.Screen
-          name='Home'
+          name="Home"
           component={HomePageNavigator}
-          options={{ headerShown: false }}
+          options={{headerShown: false}}
         />
-
-
       </AppStack.Navigator>
       {/* <View style={styles.appContainer}>
         <Text>App</Text>
       </View> */}
     </NavigationContainer>
-
-  )
-}
+  );
+};
 
 const styles = StyleSheet.create({
   appContainer: {
     flex: 1,
   },
-
 });
 
 export default App;

components/organisms/Buttons/CircularPrimaryBackButton.js

@@ -0,0 +1,36 @@
+import {StyleSheet, Text, View} from 'react-native';
+import React from 'react';
+import {TouchableWithoutFeedback} from 'react-native-gesture-handler';
+import colors from '../../../theme/colors';
+import EntypoIcon from 'react-native-vector-icons/Entypo'
+import fonts from '../../../theme/fonts';
+
+const CircularPrimaryBackButton = ({onPress}) => {
+  return (
+    <TouchableWithoutFeedback onPress={onPress}>
+      <View style={styles.buttonContainer}>
+        <EntypoIcon
+          color={colors.tertiaryColorColor}
+          size={20}
+          name="chevron-thin-left"
+        />
+      </View>
+    </TouchableWithoutFeedback>
+  );
+};
+
+export default CircularPrimaryBackButton;
+
+const styles = StyleSheet.create({
+  buttonContainer: {
+    borderRadius: 128,
+    
+    height: fonts.getSize(34),
+    width: fonts.getSize(34),
+    backgroundColor: colors.white,
+    borderColor: colors.lightGray,
+    borderWidth: 2,
+    paddingVertical: fonts.getSize(6),
+    paddingHorizontal: fonts.getSize(6)
+  },
+});

navigation/LandingPageNavigator.js

@@ -1,41 +1,42 @@
-import { View, Text } from 'react-native'
-import React from 'react'
-import { createDrawerNavigator } from '@react-navigation/drawer'
-import LandingPage from '../screens/LandingPage'
-import NewscoutHomeHeader from '../components/organisms/Headers/NewscoutHomeHeader'
-import metrics from '../theme/metrics'
+import {View, Text, UIManager, Platform} from 'react-native';
+import React from 'react';
+import {createDrawerNavigator} from '@react-navigation/drawer';
+import LandingPage from '../screens/LandingPage';
+import NewscoutHomeHeader from '../components/organisms/Headers/NewscoutHomeHeader';
+import metrics from '../theme/metrics';
+import SidebarPage from '../screens/SidebarPage';
 
-const Drawer = createDrawerNavigator()
-
-const SidebarContent = (props) => {
-    return (
-        <View><Text>SidebarContent</Text></View>
-    );
-}
+const Drawer = createDrawerNavigator();
 
 const LandingPageNavigator = () => {
+  const isLargeScreen = metrics.screenWidth >= 768;
 
-    const isLargeScreen = metrics.screenWidth >= 768;
-
-    return (
-        <Drawer.Navigator
-            initialRouteName='LandingPage'
-            screenOptions={{
-                drawerType: 'front',
-                drawerStyle: isLargeScreen ? null : { width: '100%' },
-                
-            }}
-            drawerContent={() => <SidebarContent/>}
-        >
-            <Drawer.Screen
-                name="LandingPage"
-                component={LandingPage}
-                options={({ navigation }) => ({
-                    headerShown: true,
-                header: () => <NewscoutHomeHeader onPress={() => navigation.toggleDrawer()} />
-                })} />
-        </Drawer.Navigator>
-    )
-}
+  if (
+    Platform.OS === 'android' &&
+    UIManager.setLayoutAnimationEnabledExperimental
+  ) {
+    UIManager.setLayoutAnimationEnabledExperimental(true);
+  }
+  return (
+    <Drawer.Navigator
+      initialRouteName="LandingPage"
+      screenOptions={{
+        drawerType: 'front',
+        drawerStyle: isLargeScreen ? null : {width: '100%'},
+      }}
+      drawerContent={({navigation}) => <SidebarPage navigation={navigation} />}>
+      <Drawer.Screen
+        name="LandingPage"
+        component={LandingPage}
+        options={({navigation}) => ({
+          headerShown: true,
+          header: () => (
+            <NewscoutHomeHeader onPress={() => navigation.toggleDrawer()} />
+          ),
+        })}
+      />
+    </Drawer.Navigator>
+  );
+};
 
-export default LandingPageNavigator
+export default LandingPageNavigator;

screens/SidebarPage.js

@@ -1,25 +1,113 @@
-import { StyleSheet, Text, View } from 'react-native'
-import React from 'react'
-import { createDrawerNavigator } from '@react-navigation/drawer';
+import {
+  LayoutAnimation,
+  Platform,
+  StyleSheet,
+  Text,
+  UIManager,
+  View,
+} from 'react-native';
+import React from 'react';
+import NewscoutLogo from '../components/molecules/NewscoutLogo';
+import fonts from '../theme/fonts';
+import CircularPrimaryBackButton from '../components/organisms/Buttons/CircularPrimaryBackButton';
+import {List} from 'react-native-paper';
+import colors from '../theme/colors';
+import EntypoIcon from 'react-native-vector-icons/Entypo'
 
-const Drawer = createDrawerNavigator();
+const data = [
+  {
+    title: 'Sector Update',
+    subTitles: ['Banking', 'Retail', 'Transport', 'Banking', 'Food & Drink'],
+  },
+  {
+    title: 'Regional Update',
+    subTitles: ['Banking', 'Retail', 'Transport', 'Banking', 'Food & Drink'],
+  },
+  {
+    title: 'Finance',
+    subTitles: ['Banking', 'Retail', 'Transport', 'Banking', 'Food & Drink'],
+  },
+  {
+    title: 'Economic',
+    subTitles: ['Banking', 'Retail', 'Transport', 'Banking', 'Food & Drink'],
+  },
+  {
+    title: 'Miscellaneous',
+    subTitles: ['Banking', 'Retail', 'Transport', 'Banking', 'Food & Drink'],
+  },
+];
 
-const SidebarContent = (props) => {
-    return (
-        <View><Text>SidebarContent</Text></View>
-    )
-} 
+const SidebarPage = ({navigation}) => {
+  if (
+    Platform.OS === 'android' &&
+    UIManager.setLayoutAnimationEnabledExperimental
+  ) {
+    UIManager.setLayoutAnimationEnabledExperimental(true);
+  }
+  return (
+    <View style={styles.sideBarContainer}>
+      <View style={styles.logoContainer}>
+        <NewscoutLogo style={styles.logo} />
+      </View>
+      <View style={styles.buttonContainer}>
+        <CircularPrimaryBackButton onPress={() => navigation.toggleDrawer()} />
+      </View>
+      <View style={styles.accordionContainer}>
+        <List.AccordionGroup>
+          {data.map(item => (
+            <List.Accordion
+              style={styles.accordionStyle}
+              titleStyle={styles.accordionTextStyle}
+              onPress={() =>
+                LayoutAnimation.configureNext(
+                  LayoutAnimation.Presets.easeInEaseOut,
+                )
+              }
+              right={() => <EntypoIcon name="chevron-down" size={12}/>}
+              id={data.indexOf(item)}
+              title={item.title}>
+              {item.subTitles.map(subTitle => (
+                <List.Item
+                  style={styles.accordionItemStyle}
+                  titleStyle={styles.accordionItemTextStyle}
+                  title={subTitle}
+                />
+              ))}
+            </List.Accordion>
+          ))}
+        </List.AccordionGroup>
+      </View>
+    </View>
+  );
+};
 
-const SidebarPage = () => {
-    return (
-        <Drawer.Navigator
-            drawerContent={(props) => <SidebarContent {...props} />}
-        >
-           
-        </Drawer.Navigator>
-    )
-}
+export default SidebarPage;
 
-export default SidebarPage
-
-const styles = StyleSheet.create({})
+const styles = StyleSheet.create({
+  sideBarContainer: {
+    paddingHorizontal: fonts.getSize(24),
+  },
+  logo: {
+    width: fonts.getSize(84),
+    height: fonts.getSize(84),
+  },
+  logoContainer: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  buttonContainer: {},
+  accordionContainer: {
+    paddingVertical: fonts.getSize(16),
+    gap: fonts.getSize(8),
+  },
+  accordionItemStyle: {},
+  accordionItemTextStyle: {},
+  accordionStyle: {
+    backgroundColor: colors.white,
+    borderRadius: fonts.getSize(8),
+    borderWidth: fonts.getSize(3),
+    borderColor: colors.lightGray,
+    maxHeight: fonts.getSize(52)
+  },
+  accordionTextStyle: {fontFamily: fonts.type.medium},
+});

theme/colors.js

@@ -10,7 +10,8 @@ const colors = {
     topVariantColor: "#FF3A44",
     baseColor: "#03053D",
     tertiaryColor: "#1E656D",
-    quaternaryColor: "#2E0505"
+    quaternaryColor: "#2E0505",
+    lightGray: "#E3E3E3"
 }
 
 export default colors;