53 lines
1.0 KiB
TypeScript
53 lines
1.0 KiB
TypeScript
import React from 'react';
|
|
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
|
|
|
|
export type MenuItem = {
|
|
label: string;
|
|
key: string;
|
|
};
|
|
|
|
type SideMenuProps = {
|
|
menuItems: MenuItem[];
|
|
selected: string;
|
|
onSelect: (key: string) => void;
|
|
};
|
|
|
|
export default function SideMenu({ menuItems, selected, onSelect }: 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>
|
|
))}
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
sideMenu: {
|
|
width: 180,
|
|
backgroundColor: '#333',
|
|
paddingTop: 40,
|
|
paddingHorizontal: 16,
|
|
},
|
|
menuItem: {
|
|
paddingVertical: 16,
|
|
borderRadius: 4,
|
|
marginBottom: 8,
|
|
},
|
|
menuItemSelected: {
|
|
backgroundColor: '#555',
|
|
},
|
|
menuText: {
|
|
color: '#fff',
|
|
fontSize: 18,
|
|
},
|
|
});
|