99 lines
2.9 KiB
TypeScript
99 lines
2.9 KiB
TypeScript
import React from 'react';
|
|
import { Text, View, TouchableOpacity, ScrollView } from 'react-native';
|
|
import { DrawerContentComponentProps } from '@react-navigation/drawer';
|
|
import Icon from 'react-native-vector-icons/Ionicons';
|
|
import { menuItems } from '@mock-data';
|
|
import { useTheme } from '@theme';
|
|
import { DrawerItemProps } from '@interfaces';
|
|
import { getStyles } from './customDrawerContent.style';
|
|
|
|
import { useAppDispatch, logout } from '@store';
|
|
|
|
const DrawerItem = ({ label, iconName, focused, onPress }: DrawerItemProps) => {
|
|
const { theme: colors } = useTheme();
|
|
const styles = getStyles(colors);
|
|
|
|
return (
|
|
<TouchableOpacity
|
|
style={[styles.itemWrapper, focused && styles.itemWrapperActive]}
|
|
activeOpacity={0.7}
|
|
onPress={onPress}
|
|
>
|
|
<Icon
|
|
name={iconName}
|
|
size={22}
|
|
color={focused ? colors.icon : colors.textSecondary}
|
|
style={styles.itemIcon}
|
|
/>
|
|
<Text style={[styles.itemLabel, focused && styles.itemLabelActive]}>
|
|
{label}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
);
|
|
};
|
|
|
|
export const CustomDrawerContent = (props: DrawerContentComponentProps) => {
|
|
const { state, navigation } = props;
|
|
const { theme: colors } = useTheme();
|
|
const styles = getStyles(colors);
|
|
const dispatch = useAppDispatch();
|
|
|
|
const handleLogout = async () => {
|
|
try {
|
|
dispatch(logout());
|
|
} catch (e) {
|
|
console.error(e);
|
|
}
|
|
navigation.reset({
|
|
index: 0,
|
|
routes: [{ name: 'AuthStack' }], // root-level stack name stays as-is
|
|
});
|
|
};
|
|
const activeRouteName = state.routeNames[state.index];
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
{/* Drawer Header Profile */}
|
|
<View style={styles.header}>
|
|
<View style={styles.logoCircle}>
|
|
<Icon name="cube" size={28} color="#FFFFFF" />
|
|
</View>
|
|
<View style={styles.headerDetails}>
|
|
<Text style={styles.tenantName}>Convex CRM</Text>
|
|
<Text style={styles.adminEmail}>admin@convex.com</Text>
|
|
</View>
|
|
</View>
|
|
|
|
<ScrollView contentContainerStyle={styles.scrollContent}>
|
|
<View style={styles.menuContainer}>
|
|
{menuItems.map(item => {
|
|
const isFocused = activeRouteName === item.route;
|
|
return (
|
|
<DrawerItem
|
|
key={item.route}
|
|
label={item.label}
|
|
iconName={item.icon}
|
|
focused={isFocused}
|
|
onPress={() => navigation.navigate(item.route)}
|
|
/>
|
|
);
|
|
})}
|
|
</View>
|
|
</ScrollView>
|
|
|
|
{/* Drawer Footer / Sign Out */}
|
|
<View style={styles.footer}>
|
|
<TouchableOpacity style={styles.logoutButton} onPress={handleLogout}>
|
|
<Icon
|
|
name="log-out-outline"
|
|
size={20}
|
|
color="#EF4444"
|
|
style={styles.logoutIcon}
|
|
/>
|
|
<Text style={styles.logoutText}>Log Out</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
);
|
|
};
|