Setup navation for Sidebar Page

navigation/LandingPageNavigator.js

@@ -10,6 +10,7 @@ import MaterialIcon from "react-native-vector-icons/dist/MaterialIcons";
 import colors from '../theme/colors';
 import NewsDetailPage from '../screens/NewsDetailPage';
 import NotificationsPage from '../screens/NotificationsPage';
+import CategoryPage from '../screens/CategoryPage';
 
 
 const Drawer = createDrawerNavigator();
@@ -64,6 +65,13 @@ const LandingPageNavigator = () => {
                     headerShown: false
                 })}
             />
+            <Drawer.Screen
+                name="CategoryPage"
+                component={CategoryPage}
+                options={() => ({
+                    headerShown: false
+                })}
+            />
         </Drawer.Navigator>
     );
 };

screens/SidebarPage.js

@@ -6,6 +6,7 @@ import {
   UIManager,
   View,
   ScrollView,
+  TouchableOpacity,
 } from 'react-native';
 import React, {useState} from 'react';
 import NewscoutLogo from '../components/molecules/NewscoutLogo';
@@ -49,7 +50,12 @@ const data = [
   },
 ];
 
-const SidebarPage = ({navigation}) => {
+const SidebarPage = ({navigation, route}) => {
+  
+  const navigateToCategoryPage = (topic) => {
+      navigation.navigate("CategoryPage",{category: topic})
+  } 
+
   if (
     Platform.OS === 'android' &&
     UIManager.setLayoutAnimationEnabledExperimental
@@ -84,7 +90,7 @@ const SidebarPage = ({navigation}) => {
         <CircularPrimaryBackButton onPress={() => navigation.toggleDrawer()} />
       </View>
 
-      <ScrollView>
+      <ScrollView showsVerticalScrollIndicator={false}>
         <View style={styles.accordionContainer}>
           <List.AccordionGroup
             expandedId={expandedId}
@@ -143,7 +149,8 @@ const SidebarPage = ({navigation}) => {
                   )}
                   title={item.title}>
                   {item.subTitles.map(subTitle => (
-                    <List.Item
+                    <TouchableOpacity onPress={() => navigateToCategoryPage(subTitle)}>
+                      <List.Item
                       key={`${item.title}_${subTitle}`}
                       // key={`${item.title}_${item.subTitles.indexOf(subTitle)}`}
                       //key={`Sidebar_${item.title}_${item.subTitles.indexOf(subTitle)}`}
@@ -151,6 +158,7 @@ const SidebarPage = ({navigation}) => {
                       titleStyle={styles.accordionItemTextStyle}
                       title={subTitle}
                     />
+                    </TouchableOpacity>
                   ))}
                 </List.Accordion>
               );
@@ -190,4 +198,11 @@ const styles = StyleSheet.create({
     maxHeight: fonts.getSize(56),
   },
   accordionTextStyle: {fontFamily: fonts.type.medium},
+  accordionItemStyle:{
+
+  },
+  accordionItemTextStyle:{
+    fontFamily: fonts.type.regular,
+    color: colors.black
+  }
 });