React-Nav-Melon/screens/SidebarPage.js

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 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 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>
  );
};

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),
  },
  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},
});