71 lines
1.5 KiB
TypeScript
71 lines
1.5 KiB
TypeScript
//SideMenu.tsx
|
|
import React from 'react';
|
|
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
|
|
import { Category } from "../types/Category";
|
|
|
|
export type MenuItem = {
|
|
label: string;
|
|
key: Category;
|
|
};
|
|
|
|
type SideMenuProps = {
|
|
menuItems: MenuItem[];
|
|
selected: Category;
|
|
onSelect: (key: Category) => void;
|
|
onLogout?: () => void;
|
|
};
|
|
|
|
|
|
export function SideMenu({ menuItems, selected, onSelect, onLogout }: SideMenuProps) {
|
|
return (
|
|
<View style={styles.sideMenu}>
|
|
{menuItems.map(item => (
|
|
<TouchableOpacity
|
|
key={item.key}
|
|
style={[styles.menuItem, selected === item.key && styles.menuItemSelected]}
|
|
onPress={() => onSelect(item.key)}>
|
|
<Text style={styles.menuText}>{item.label}</Text>
|
|
</TouchableOpacity>
|
|
))}
|
|
|
|
{onLogout && (
|
|
<TouchableOpacity
|
|
style={[styles.menuItem, styles.logoutButton]}
|
|
onPress={onLogout}>
|
|
<Text style={[styles.menuText, { color: '#fff' }]}>Logout</Text>
|
|
</TouchableOpacity>
|
|
)}
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
sideMenu: {
|
|
backgroundColor: '#333',
|
|
paddingTop: 40,
|
|
paddingHorizontal: 16,
|
|
},
|
|
menuItem: {
|
|
paddingVertical: 16,
|
|
borderRadius: 4,
|
|
marginBottom: 8,
|
|
},
|
|
menuItemSelected: {
|
|
backgroundColor: '#555',
|
|
},
|
|
menuText: {
|
|
color: '#fff',
|
|
fontSize: 18,
|
|
textAlign: 'center',
|
|
},
|
|
logoutButton: {
|
|
marginTop: 'auto',
|
|
backgroundColor: '#111',
|
|
paddingVertical: 16,
|
|
borderRadius: 4,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
flexDirection: 'column',
|
|
},
|
|
});
|