React-Nav-Melon/screens/SidebarPage.js

import {
  LayoutAnimation,
  Platform,
  StyleSheet,
  Text,
  UIManager,
  View,
  ScrollView
} 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 }) => {
  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>
        <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) => (
                    <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}
                    />
                  ))}
                </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 },
});