React-Nav-Melon/screens/SidebarPage.js

import {
  LayoutAnimation,
  Platform,
  StyleSheet,
  Text,
  UIManager,
  View,
  ScrollView,
  TouchableOpacity,
} from 'react-native';
import React, {useState} 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';
import metrics from '../theme/metrics';

const data = [
  {
    title: 'Sector Update',
    icon: 'area-graph',
    subTitles: ['Banking', 'Retail', 'Transport', 'Banking', 'Food & Drink'],
  },
  {
    title: 'Regional Update',
    icon: 'network',
    subTitles: ['Banking', 'Retail', 'Transport', 'Banking', 'Food & Drink'],
  },
  {
    title: 'Finance',
    icon: 'database',
    subTitles: ['Banking', 'Retail', 'Transport', 'Banking', 'Food & Drink'],
  },
  {
    title: 'Economic',
    icon: 'line-graph',
    subTitles: ['Banking', 'Retail', 'Transport', 'Banking', 'Food & Drink'],
  },
  {
    title: 'Miscellaneous',
    icon: 'documents',
    subTitles: ['Banking', 'Retail', 'Transport', 'Banking', 'Food & Drink'],
  },
  {
    title: 'RSS',
    icon: 'rss',
    subTitles: ['Banking', 'Retail', 'Transport', 'Banking', 'Food & Drink'],
  },
];

const SidebarPage = ({navigation, route}) => {
  
  const navigateToCategoryPage = (topic) => {
      navigation.navigate("CategoryPage",{category: topic})
  } 

  if (
    Platform.OS === 'android' &&
    UIManager.setLayoutAnimationEnabledExperimental
  ) {
    UIManager.setLayoutAnimationEnabledExperimental(true);
  }

  // const [isExpanded, setExpanded] = useState(
  //   data.map((item) => {
  //     return {
  //       key: item.title,
  //       value: false
  //     };
  //   }).reduce((result, item) => {
  //     result[item.key] = item.value;
  //     return result;
  //   }, {})
  // )

  const [expandedId, setExpandedId] = React.useState('');

  const handleAccordionPress = accordionId => {
    setExpandedId(accordionId === expandedId ? '' : accordionId);
  };

  return (
    <View style={styles.sideBarContainer}>
      <View style={styles.logoContainer}>
        <NewscoutLogo style={styles.logo} />
      </View>
      <View style={styles.buttonContainer}>
        <CircularPrimaryBackButton onPress={() => navigation.toggleDrawer()} />
      </View>

      <ScrollView showsVerticalScrollIndicator={false}>
        <View style={styles.accordionContainer}>
          <List.AccordionGroup
            expandedId={expandedId}
            onAccordionPress={handleAccordionPress}>
            {data.map(item => {
              let acc_check = item.title.toLowerCase();
              return (
                <List.Accordion
                  key={acc_check}
                  id={acc_check}
                  style={[
                    styles.accordionStyle,
                    acc_check === expandedId && {
                      backgroundColor: colors.tertiaryColor,
                      borderColor: colors.tertiaryColor,
                    },
                  ]}
                  titleStyle={[
                    ,
                    styles.accordionTextStyle,
                    acc_check === expandedId && {
                      color: colors.white,
                      fontFamily: fonts.type.semibold,
                    },
                  ]}
                  onPress={() => {
                    // setExpandedsetIsShowingText(!isShowingText);
                    // LayoutAnimation.configureNext(
                    //   LayoutAnimation.Presets.easeInEaseOut,
                    // )
                    // const nextState = { ...isExpanded };
                    // nextState[item.title] = !nextState[item.title];
                    //console.log("set state changes");
                  }}
                  left={() => (
                    <View style={{paddingLeft: 16}}>
                      <EntypoIcon
                        name={item.icon}
                        size={24}
                        color={
                          acc_check === expandedId ? colors.white : colors.black
                        }
                      />
                    </View>
                  )}
                  right={() => (
                    <EntypoIcon
                      name={
                        acc_check === expandedId ? 'chevron-up' : 'chevron-down'
                      }
                      size={12}
                      color={
                        acc_check === expandedId ? colors.white : colors.black
                      }
                    />
                  )}
                  title={item.title}>
                  {item.subTitles.map(subTitle => (
                    <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)}`}
                      style={styles.accordionItemStyle}
                      titleStyle={styles.accordionItemTextStyle}
                      title={subTitle}
                    />
                    </TouchableOpacity>
                  ))}
                </List.Accordion>
              );
            })}
          </List.AccordionGroup>
        </View>
      </ScrollView>
    </View>
  );
};

export default SidebarPage;

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),
    height: '100%',
  },
  accordionStyle: {
    backgroundColor: colors.white,
    borderRadius: fonts.getSize(8),
    borderWidth: fonts.getSize(3),
    borderColor: colors.lightGray,
    maxHeight: fonts.getSize(56),
  },
  accordionTextStyle: {fontFamily: fonts.type.medium},
  accordionItemStyle:{

  },
  accordionItemTextStyle:{
    fontFamily: fonts.type.regular,
    color: colors.black
  }
});