File size: 3,047 Bytes
de8e64f |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 |
import React from 'react';
import { Drawer, List, ListItem, ListItemIcon, ListItemText, Divider, Box, Typography } from '@mui/material';
import { useNavigate, useLocation } from 'react-router-dom';
import DashboardIcon from '@mui/icons-material/Dashboard';
import PeopleIcon from '@mui/icons-material/People';
import BookIcon from '@mui/icons-material/Book';
import WorkIcon from '@mui/icons-material/Work';
import TokenIcon from '@mui/icons-material/Token';
import PublicIcon from '@mui/icons-material/Public';
import SettingsIcon from '@mui/icons-material/Settings';
import ChatIcon from '@mui/icons-material/Chat';
const drawerWidth = 240;
const menuItems = [
{ text: 'Dashboard', icon: <DashboardIcon />, path: '/' },
{ text: 'Agents', icon: <PeopleIcon />, path: '/agents' },
{ text: 'Journal', icon: <BookIcon />, path: '/journal' },
{ text: 'Portfolio', icon: <WorkIcon />, path: '/portfolio' },
{ text: 'Token Economy', icon: <TokenIcon />, path: '/token-economy' },
{ text: 'Virtual World', icon: <PublicIcon />, path: '/virtual-world' },
{ text: 'Chat', icon: <ChatIcon />, path: '/chat' },
{ text: 'Settings', icon: <SettingsIcon />, path: '/settings' },
];
const Sidebar = ({ open }) => {
const navigate = useNavigate();
const location = useLocation();
return (
<Drawer
variant="persistent"
anchor="left"
open={open}
sx={{
width: drawerWidth,
flexShrink: 0,
'& .MuiDrawer-paper': {
width: drawerWidth,
boxSizing: 'border-box',
top: '64px',
height: 'calc(100% - 64px)',
},
}}
>
<Box sx={{ overflow: 'auto', mt: 2 }}>
<Box sx={{ px: 2, mb: 2 }}>
<Typography variant="h6" color="primary">
Navigation
</Typography>
</Box>
<List>
{menuItems.map((item) => (
<ListItem
button
key={item.text}
onClick={() => navigate(item.path)}
selected={location.pathname === item.path}
sx={{
'&.Mui-selected': {
backgroundColor: 'rgba(75, 139, 190, 0.1)',
borderRight: '4px solid #4B8BBE',
},
'&:hover': {
backgroundColor: 'rgba(75, 139, 190, 0.05)',
},
}}
>
<ListItemIcon sx={{ color: location.pathname === item.path ? 'primary.main' : 'inherit' }}>
{item.icon}
</ListItemIcon>
<ListItemText primary={item.text} />
</ListItem>
))}
</List>
<Divider sx={{ my: 2 }} />
<Box sx={{ px: 2, py: 1 }}>
<Typography variant="body2" color="text.secondary">
AnnabanOS Enhanced v1.0.0
</Typography>
<Typography variant="caption" color="text.secondary">
© 2025 Annaban Project
</Typography>
</Box>
</Box>
</Drawer>
);
};
export default Sidebar;
|