115 lines
3.1 KiB
TypeScript
115 lines
3.1 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
import {
|
|
AppBar,
|
|
Toolbar,
|
|
IconButton,
|
|
Typography,
|
|
Drawer,
|
|
List,
|
|
ListItem,
|
|
ListItemButton,
|
|
ListItemIcon,
|
|
ListItemText,
|
|
Avatar,
|
|
Box,
|
|
Divider,
|
|
} from '@mui/material';
|
|
import {
|
|
Menu as MenuIcon,
|
|
Home,
|
|
Timeline,
|
|
Chat,
|
|
Insights,
|
|
Settings,
|
|
ChildCare,
|
|
Group,
|
|
Logout,
|
|
} from '@mui/icons-material';
|
|
|
|
export const MobileNav = () => {
|
|
const [drawerOpen, setDrawerOpen] = useState(false);
|
|
const router = useRouter();
|
|
|
|
const menuItems = [
|
|
{ label: 'Dashboard', icon: <Home />, path: '/' },
|
|
{ label: 'Track Activity', icon: <Timeline />, path: '/track' },
|
|
{ label: 'AI Assistant', icon: <Chat />, path: '/ai-assistant' },
|
|
{ label: 'Insights', icon: <Insights />, path: '/insights' },
|
|
{ label: 'Children', icon: <ChildCare />, path: '/children' },
|
|
{ label: 'Family', icon: <Group />, path: '/family' },
|
|
{ label: 'Settings', icon: <Settings />, path: '/settings' },
|
|
];
|
|
|
|
const handleNavigate = (path: string) => {
|
|
router.push(path);
|
|
setDrawerOpen(false);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<AppBar position="static" elevation={1} sx={{ bgcolor: 'background.paper' }}>
|
|
<Toolbar>
|
|
<IconButton
|
|
edge="start"
|
|
color="primary"
|
|
aria-label="menu"
|
|
onClick={() => setDrawerOpen(true)}
|
|
>
|
|
<MenuIcon />
|
|
</IconButton>
|
|
<Typography variant="h6" component="div" sx={{ flexGrow: 1, color: 'primary.main', fontWeight: 600 }}>
|
|
Maternal
|
|
</Typography>
|
|
<Avatar sx={{ bgcolor: 'primary.main' }}>U</Avatar>
|
|
</Toolbar>
|
|
</AppBar>
|
|
|
|
<Drawer
|
|
anchor="left"
|
|
open={drawerOpen}
|
|
onClose={() => setDrawerOpen(false)}
|
|
>
|
|
<Box
|
|
sx={{ width: 280 }}
|
|
role="presentation"
|
|
>
|
|
<Box sx={{ p: 3, bgcolor: 'primary.light' }}>
|
|
<Avatar sx={{ width: 64, height: 64, bgcolor: 'primary.main', mb: 2 }}>U</Avatar>
|
|
<Typography variant="h6" fontWeight="600">User Name</Typography>
|
|
<Typography variant="body2" color="text.secondary">user@example.com</Typography>
|
|
</Box>
|
|
|
|
<List>
|
|
{menuItems.map((item) => (
|
|
<ListItem key={item.path} disablePadding>
|
|
<ListItemButton onClick={() => handleNavigate(item.path)}>
|
|
<ListItemIcon sx={{ color: 'primary.main' }}>
|
|
{item.icon}
|
|
</ListItemIcon>
|
|
<ListItemText primary={item.label} />
|
|
</ListItemButton>
|
|
</ListItem>
|
|
))}
|
|
</List>
|
|
|
|
<Divider sx={{ my: 1 }} />
|
|
|
|
<List>
|
|
<ListItem disablePadding>
|
|
<ListItemButton onClick={() => handleNavigate('/logout')}>
|
|
<ListItemIcon sx={{ color: 'error.main' }}>
|
|
<Logout />
|
|
</ListItemIcon>
|
|
<ListItemText primary="Logout" />
|
|
</ListItemButton>
|
|
</ListItem>
|
|
</List>
|
|
</Box>
|
|
</Drawer>
|
|
</>
|
|
);
|
|
};
|