edit menu drawer

src/assets/images.js

@@ -67,6 +67,8 @@ const images = {
   iconPaper: require('./images/iconPaper.png'),
   iconNote: require('./images/iconNote.png'),
   bg_cannot_connect: require('./images/bg_cannot_connect.png'),
+  iconDown: require('./images/iconDown.png'),
+  iconUp: require('./images/iconUp.png'),
 };
 
 export default images;

src/components/Header/Drawer.js

-import React from 'react';
-import {View, Text, StyleSheet, Image, TouchableOpacity} from 'react-native';
+import React, {useState} from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  Image,
+  TouchableOpacity,
+  ScrollView,
+} from 'react-native';
 import R from '../../assets/R';
 import {HEIGHTXD, getFontXD, WIDTHXD} from '../../Config/Functions';
 import Icon from 'react-native-vector-icons/MaterialIcons';
@@ -15,23 +22,118 @@ import {
   PROFILE,
   CONTRACT,
   LEGALDOCUMENT,
+  MYGROUP,
+  PAYMENTS,
+  DEPOSIT,
+  WITHDRAW,
+  ROSE,
+  HISTORY,
+  CHOOSEMETHOD,
 } from '../../routers/ScreenNames';
 import {useNavigation} from '@react-navigation/native';
 import {connect} from 'react-redux';
 import AppText from '../AppText';
+import images from '../../assets/images';
 
 const menus = [
   {
     id: '1',
-    title: 'AccountVerify',
+    title: 'Profile',
     icon: R.images.iconUserCheck,
     screen: AccountVerification,
+    active: false,
+    children: [
+      {
+        id: '11',
+        title: 'MyProfile',
+        icon: R.images.iconUserCheck,
+        screen: PROFILE,
+      },
+      {
+        id: '12',
+        title: 'VerifyAccount',
+        icon: R.images.iconUserCheck,
+        screen: AccountVerification,
+      },
+      {
+        id: '15',
+        title: 'MyPartner',
+        icon: R.images.iconUserCheck,
+        screen: MYGROUP,
+      },
+      {
+        id: '13',
+        title: 'Payments',
+        icon: R.images.iconUserCheck,
+        screen: PAYMENTS,
+      },
+      {
+        id: '14',
+        title: 'Contract',
+        icon: R.images.iconUserCheck,
+        screen: CONTRACT,
+      },
+    ],
   },
   {
     id: '6',
-    title: 'Contract',
+    title: 'Finance',
     icon: R.images.iconContract,
     screen: CONTRACT,
+    active: false,
+    children: [
+      {
+        id: '61',
+        title: 'Deposit',
+        icon: R.images.iconUserCheck,
+        screen: CHOOSEMETHOD,
+      },
+      {
+        id: '62',
+        title: 'Withdraw',
+        icon: R.images.iconUserCheck,
+        screen: WITHDRAW,
+      },
+      {
+        id: '63',
+        title: 'Rose',
+        icon: R.images.iconUserCheck,
+        screen: ROSE,
+      },
+      {
+        id: '64',
+        title: 'History',
+        icon: R.images.iconUserCheck,
+        screen: HISTORY,
+      },
+    ],
+  },
+  {
+    id: '8',
+    title: 'Support',
+    icon: R.images.iconContract,
+    screen: CONTRACT,
+    active: false,
+    children: [
+      {
+        title: 'CustomerCare',
+        icon: R.images.iconPhone,
+        screen: SERVICECUSTOMER,
+        id: '81',
+      },
+      {
+        id: '82',
+        title: 'Feedback',
+        icon: R.images.iconUserCheck,
+        screen: FEEDBACK,
+      },
+      {
+        id: '83',
+        title: 'LegalDocument',
+        icon: R.images.iconUserCheck,
+        screen: LEGALDOCUMENT,
+      },
+    ],
   },
 
   {
@@ -39,35 +141,22 @@ const menus = [
     title: 'PaymentSetting',
     icon: R.images.iconMethodPay,
     screen: METHODPAY,
-  },
-  {
-    id: '3',
-    title: 'CustomerCare',
-    icon: R.images.iconPhone,
-    screen: SERVICECUSTOMER,
-  },
-  {
-    id: '4',
-    title: 'Feedback',
-    icon: R.images.iconMess,
-    screen: FEEDBACK,
-  },
-  {
-    id: '7',
-    title: 'LegalDocument',
-    icon: R.images.iconPaper,
-    screen: LEGALDOCUMENT,
+    active: false,
+    children: null,
   },
   {
     id: '5',
     title: 'Setting',
     icon: R.images.iconSetting,
     screen: SETTING,
+    active: false,
+    children: null,
   },
 ];
 
 const Drawer = (props) => {
   const navigate = useNavigation();
+  const [listMenu, setListMenu] = useState(menus);
   return (
     <View style={styles.container}>
       <View style={styles.header}>
@@ -88,20 +177,64 @@ const Drawer = (props) => {
           <Image source={R.images.iconRight2} style={styles.imgIcon} />
         </TouchableOpacity>
       </View>
-      <View style={styles.body}>
-        {menus.map((e) => (
-          <TouchableOpacity
-            onPress={() => {
-              navigate.navigate(e.screen);
-              props.toggleModal();
-            }}
-            key={e.id}
-            style={styles.containerItem}>
-            <Image source={e.icon} style={styles.imgIcon} />
-            <AppText i18nKey={e.title} style={styles.txtTitle}></AppText>
-          </TouchableOpacity>
+      <ScrollView showsVerticalScrollIndicator={false} style={styles.body}>
+        {listMenu.map((e) => (
+          <View>
+            <TouchableOpacity
+              onPress={() => {
+                if (e.children) {
+                  const newList = listMenu.map((temp) => {
+                    if (temp.id == e.id) return {...temp, active: !temp.active};
+                    return temp;
+                  });
+
+                  setListMenu(newList);
+                } else {
+                  navigate.navigate(e.screen);
+                  props.toggleModal();
+                }
+              }}
+              key={e.id}
+              style={styles.containerItem}>
+              <View style={styles.row}>
+                <Image source={e.icon} style={styles.imgIcon} />
+                <AppText
+                  i18nKey={e.title}
+                  style={[
+                    styles.txtTitle,
+                    e.children ? {fontWeight: 'bold'} : null,
+                    e.active ? {color: R.colors.main} : null,
+                  ]}></AppText>
+              </View>
+
+              {e.children ? (
+                <Image
+                  source={e.active ? images.iconUp : images.iconDown}
+                  style={styles.imgIcon}
+                />
+              ) : null}
+            </TouchableOpacity>
+            {e.active && e.children ? (
+              <View style={{marginLeft: 15}}>
+                {e.children.map((item) => (
+                  <TouchableOpacity
+                    onPress={() => {
+                      navigate.navigate(item.screen);
+                      props.toggleModal();
+                    }}
+                    key={item.id}
+                    style={styles.containerItem}>
+                    <Image source={item.icon} style={styles.imgIcon} />
+                    <AppText
+                      i18nKey={item.title}
+                      style={styles.txtTitle}></AppText>
+                  </TouchableOpacity>
+                ))}
+              </View>
+            ) : null}
+          </View>
         ))}
-      </View>
+      </ScrollView>
 
       <TouchableOpacity
         onPress={() => {
@@ -175,12 +308,13 @@ const styles = StyleSheet.create({
   containerItem: {
     flexDirection: 'row',
     alignItems: 'center',
-    marginVertical: 10,
+    marginVertical: 5,
     borderRadius: WIDTHXD(75),
 
     paddingVertical: 10,
     paddingHorizontal: 10,
   },
+  row: {flexDirection: 'row', flex: 1, alignItems: 'center'},
 });
 
 const mapStateToProps = (state) => {

src/helper/i18/locales/en.js

@@ -189,4 +189,7 @@ export default {
   OwnerAccount2: 'Owner account',
   NothingChange: 'Nothing change',
   Tradding: 'Tradding',
+  Finance: 'Finance',
+  Support: 'Hỗ trợ',
+  Support_Customer: 'Support_Customer',
 };

src/helper/i18/locales/vn.js

@@ -194,4 +194,7 @@ export default {
   OwnerAccount2: 'Chủ tài khoản',
   NothingChange: 'Không có gì thay đổi',
   Tradding: 'Giao dịch',
+  Finance: 'Tài chính',
+  Support: 'Hỗ trợ',
+  Support_Customer: 'Hỗ trợ khách hàng',
 };