82 lines
2.0 KiB
JavaScript
82 lines
2.0 KiB
JavaScript
// src/components/NavigationMenu.js
|
|
import React, { useState } from 'react';
|
|
import {
|
|
AppBar,
|
|
Toolbar,
|
|
IconButton,
|
|
Typography,
|
|
Drawer,
|
|
List,
|
|
ListItem,
|
|
ListItemIcon,
|
|
ListItemText,
|
|
Divider,
|
|
} from '@mui/material';
|
|
import {
|
|
Menu as MenuIcon,
|
|
Home as HomeIcon,
|
|
Assessment as AssessmentIcon,
|
|
EmojiEvents as LeagueIcon,
|
|
SportsMartialArts as PracticeIcon,
|
|
Settings as SettingsIcon,
|
|
} from '@mui/icons-material';
|
|
import { useScore } from '../context/ScoreContext';
|
|
|
|
const NavigationMenu = ({ onNavigate }) => {
|
|
const [drawerOpen, setDrawerOpen] = useState(false);
|
|
const { state } = useScore();
|
|
|
|
const menuItems = [
|
|
{ title: 'Home', icon: <HomeIcon />, action: 'home' },
|
|
{ title: 'League Shoots', icon: <LeagueIcon />, action: 'league' },
|
|
{ title: 'Practice Shoots', icon: <PracticeIcon />, action: 'practice' },
|
|
{ title: 'Statistics', icon: <AssessmentIcon />, action: 'stats' },
|
|
{ title: 'Settings', icon: <SettingsIcon />, action: 'settings' },
|
|
];
|
|
|
|
const handleNavigation = (action) => {
|
|
setDrawerOpen(false);
|
|
onNavigate(action);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<AppBar position="static">
|
|
<Toolbar>
|
|
<IconButton
|
|
edge="start"
|
|
color="inherit"
|
|
onClick={() => setDrawerOpen(true)}
|
|
>
|
|
<MenuIcon />
|
|
</IconButton>
|
|
<Typography variant="h6" sx={{ flexGrow: 1 }}>
|
|
Archery Score Card
|
|
</Typography>
|
|
</Toolbar>
|
|
</AppBar>
|
|
|
|
<Drawer
|
|
anchor="left"
|
|
open={drawerOpen}
|
|
onClose={() => setDrawerOpen(false)}
|
|
>
|
|
<List sx={{ width: 250 }}>
|
|
{menuItems.map((item) => (
|
|
<ListItem
|
|
button
|
|
key={item.action}
|
|
onClick={() => handleNavigation(item.action)}
|
|
>
|
|
<ListItemIcon>{item.icon}</ListItemIcon>
|
|
<ListItemText primary={item.title} />
|
|
</ListItem>
|
|
))}
|
|
</List>
|
|
</Drawer>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default NavigationMenu;
|