feat(timetable): add navigation links to Header component
This commit is contained in:
Agent Zero
parent
11c139b410
commit
a64836c94a
@ -29,7 +29,12 @@ import {
|
||||
Settings as SettingsIcon,
|
||||
Search as SearchIcon,
|
||||
AdminPanelSettings as AdminIcon,
|
||||
Home as HomeIcon
|
||||
Home as HomeIcon,
|
||||
// Timetable icons
|
||||
Schedule as ScheduleIcon,
|
||||
Class as ClassIcon,
|
||||
Book as BookIcon,
|
||||
HowToReg as EnrollmentIcon
|
||||
} from '@mui/icons-material';
|
||||
import { HEADER_HEIGHT } from './Layout';
|
||||
import { logger } from '../debugConfig';
|
||||
@ -80,7 +85,6 @@ const Header: React.FC = () => {
|
||||
try {
|
||||
logger.debug('auth-service', '🔄 Signing out user', { userId: user?.id });
|
||||
await signOut();
|
||||
// Clear local state immediately
|
||||
setIsAuthenticated(false);
|
||||
setAnchorEl(null);
|
||||
logger.debug('auth-service', '✅ User signed out');
|
||||
@ -103,73 +107,50 @@ const Header: React.FC = () => {
|
||||
<Toolbar sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
minHeight: `${HEADER_HEIGHT}px !important`,
|
||||
height: `${HEADER_HEIGHT}px`,
|
||||
gap: 2,
|
||||
px: { xs: 1, sm: 2 }
|
||||
alignItems: 'center',
|
||||
height: '100%'
|
||||
}}>
|
||||
<Box sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 2,
|
||||
minWidth: { xs: 'auto', sm: '200px' }
|
||||
}}>
|
||||
<Typography
|
||||
variant="h6"
|
||||
component="div"
|
||||
className="app-title"
|
||||
sx={{
|
||||
cursor: 'pointer',
|
||||
color: theme.palette.text.primary,
|
||||
'&:hover': {
|
||||
color: theme.palette.primary.main
|
||||
},
|
||||
fontSize: { xs: '1rem', sm: '1.25rem' }
|
||||
}}
|
||||
onClick={() => navigate(isAuthenticated ? '/dashboard' : '/')}
|
||||
>
|
||||
ClassroomCopilot
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Box sx={{
|
||||
position: 'absolute',
|
||||
left: '50%',
|
||||
transform: 'translateX(-50%)',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
visibility: showGraphNavigation ? 'visible' : 'hidden',
|
||||
width: {
|
||||
xs: 'calc(100% - 160px)', // More space for menu and title
|
||||
sm: 'calc(100% - 200px)', // Standard spacing
|
||||
md: 'auto' // Full width on medium and up
|
||||
},
|
||||
maxWidth: '800px',
|
||||
'& .navigation-controls': {
|
||||
display: { xs: 'none', sm: 'flex' }
|
||||
},
|
||||
'& .context-section': {
|
||||
display: { xs: 'none', md: 'flex' }
|
||||
},
|
||||
'& .context-toggle': {
|
||||
display: 'flex' // Always show the profile/institute toggle
|
||||
}
|
||||
}}>
|
||||
{showGraphNavigation && (
|
||||
<GraphNavigator />
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<Typography
|
||||
variant="h6"
|
||||
component="div"
|
||||
sx={{
|
||||
flexGrow: showGraphNavigation ? 0 : 1,
|
||||
fontWeight: 600,
|
||||
cursor: 'pointer',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 1
|
||||
}}
|
||||
onClick={() => handleNavigation('/')}
|
||||
>
|
||||
<HomeIcon sx={{ color: theme.palette.primary.main }} />
|
||||
Classroom Copilot
|
||||
</Typography>
|
||||
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
|
||||
{isAuthenticated && (
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{
|
||||
color: theme.palette.text.secondary,
|
||||
display: { xs: 'none', sm: 'block' }
|
||||
}}
|
||||
>
|
||||
{user?.email}
|
||||
</Typography>
|
||||
)}
|
||||
|
||||
<Box sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'flex-end',
|
||||
minWidth: { xs: 'auto', sm: '200px' },
|
||||
ml: 'auto'
|
||||
}}>
|
||||
<IconButton
|
||||
className="menu-button"
|
||||
color="inherit"
|
||||
aria-label="menu"
|
||||
onClick={handleMenuOpen}
|
||||
edge="end"
|
||||
sx={{
|
||||
border: `1px solid ${theme.palette.divider}`,
|
||||
borderRadius: 1,
|
||||
'&:hover': {
|
||||
bgcolor: theme.palette.action.hover
|
||||
}
|
||||
@ -177,64 +158,126 @@ const Header: React.FC = () => {
|
||||
>
|
||||
<MenuIcon />
|
||||
</IconButton>
|
||||
|
||||
<Menu
|
||||
anchorEl={anchorEl}
|
||||
open={Boolean(anchorEl)}
|
||||
onClose={handleMenuClose}
|
||||
slotProps={{
|
||||
paper: {
|
||||
elevation: 3,
|
||||
sx: {
|
||||
bgcolor: theme.palette.background.paper,
|
||||
color: theme.palette.text.primary,
|
||||
minWidth: '240px'
|
||||
}
|
||||
PaperProps={{
|
||||
sx: {
|
||||
width: 280,
|
||||
maxHeight: '80vh'
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
variant="subtitle2"
|
||||
sx={{
|
||||
px: 2,
|
||||
py: 1.5,
|
||||
color: theme.palette.text.secondary,
|
||||
fontWeight: 600,
|
||||
letterSpacing: '0.5px',
|
||||
textTransform: 'uppercase',
|
||||
fontSize: '0.75rem'
|
||||
}}
|
||||
>
|
||||
Navigation
|
||||
</Typography>
|
||||
|
||||
{isAuthenticated ? [
|
||||
<MenuItem key="dashboard" onClick={() => handleNavigation('/dashboard')}>
|
||||
// Home
|
||||
<MenuItem key="home" onClick={() => handleNavigation('/')}>
|
||||
<ListItemIcon>
|
||||
<HomeIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary="Dashboard" />
|
||||
<ListItemText primary="Home" />
|
||||
</MenuItem>,
|
||||
<Divider key="dashboard-divider" />,
|
||||
// Development Tools Section
|
||||
<MenuItem key="tldraw" onClick={() => handleNavigation('/tldraw-dev')}>
|
||||
<ListItemIcon>
|
||||
<TLDrawDevIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary="TLDraw Dev" />
|
||||
</MenuItem>,
|
||||
<MenuItem key="dev" onClick={() => handleNavigation('/dev')}>
|
||||
<ListItemIcon>
|
||||
<DevToolsIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary="Dev Tools" />
|
||||
</MenuItem>,
|
||||
<Divider key="dev-divider" />,
|
||||
<Divider key="home-divider" />,
|
||||
|
||||
// Main Features Section
|
||||
<MenuItem key="multiplayer" onClick={() => handleNavigation('/multiplayer')}>
|
||||
// Timetable Section
|
||||
<Typography
|
||||
key="timetable-header"
|
||||
variant="subtitle2"
|
||||
sx={{
|
||||
px: 2,
|
||||
py: 1,
|
||||
color: theme.palette.primary.main,
|
||||
fontWeight: 600,
|
||||
letterSpacing: '0.5px',
|
||||
textTransform: 'uppercase',
|
||||
fontSize: '0.75rem'
|
||||
}}
|
||||
>
|
||||
Timetable & Classes
|
||||
</Typography>,
|
||||
<MenuItem key="timetable" onClick={() => handleNavigation('/timetable')}>
|
||||
<ListItemIcon>
|
||||
<MultiplayerIcon />
|
||||
<ScheduleIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary="Multiplayer" />
|
||||
<ListItemText
|
||||
primary="My Timetable"
|
||||
secondary="View your schedule"
|
||||
/>
|
||||
</MenuItem>,
|
||||
<MenuItem key="classes" onClick={() => handleNavigation('/classes')}>
|
||||
<ListItemIcon>
|
||||
<ClassIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText
|
||||
primary="Browse Classes"
|
||||
secondary="Find and enroll in classes"
|
||||
/>
|
||||
</MenuItem>,
|
||||
<MenuItem key="my-classes" onClick={() => handleNavigation('/my-classes')}>
|
||||
<ListItemIcon>
|
||||
<BookIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText
|
||||
primary="My Classes"
|
||||
secondary="Manage your classes"
|
||||
/>
|
||||
</MenuItem>,
|
||||
<MenuItem key="enrollment-requests" onClick={() => handleNavigation('/enrollment-requests')}>
|
||||
<ListItemIcon>
|
||||
<EnrollmentIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText
|
||||
primary="Enrollment Requests"
|
||||
secondary="Review pending enrollments"
|
||||
/>
|
||||
</MenuItem>,
|
||||
<Divider key="timetable-divider" />,
|
||||
|
||||
// Features Section
|
||||
<Typography
|
||||
key="features-header"
|
||||
variant="subtitle2"
|
||||
sx={{
|
||||
px: 2,
|
||||
py: 1,
|
||||
color: theme.palette.text.secondary,
|
||||
fontWeight: 600,
|
||||
letterSpacing: '0.5px',
|
||||
textTransform: 'uppercase',
|
||||
fontSize: '0.75rem'
|
||||
}}
|
||||
>
|
||||
Features
|
||||
</Typography>,
|
||||
<MenuItem key="calendar" onClick={() => handleNavigation('/calendar')}>
|
||||
<ListItemIcon>
|
||||
<CalendarIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary="Calendar" />
|
||||
</MenuItem>,
|
||||
<MenuItem key="planner" onClick={() => handleNavigation('/teacher-planner')}>
|
||||
<MenuItem key="teacher-planner" onClick={() => handleNavigation('/teacher-planner')}>
|
||||
<ListItemIcon>
|
||||
<TeacherPlannerIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary="Teacher Planner" />
|
||||
</MenuItem>,
|
||||
<MenuItem key="exam" onClick={() => handleNavigation('/exam-marker')}>
|
||||
<MenuItem key="exam-marker" onClick={() => handleNavigation('/exam-marker')}>
|
||||
<ListItemIcon>
|
||||
<ExamMarkerIcon />
|
||||
</ListItemIcon>
|
||||
@ -243,6 +286,21 @@ const Header: React.FC = () => {
|
||||
<Divider key="features-divider" />,
|
||||
|
||||
// Utilities Section
|
||||
<Typography
|
||||
key="utilities-header"
|
||||
variant="subtitle2"
|
||||
sx={{
|
||||
px: 2,
|
||||
py: 1,
|
||||
color: theme.palette.text.secondary,
|
||||
fontWeight: 600,
|
||||
letterSpacing: '0.5px',
|
||||
textTransform: 'uppercase',
|
||||
fontSize: '0.75rem'
|
||||
}}
|
||||
>
|
||||
Utilities
|
||||
</Typography>,
|
||||
<MenuItem key="settings" onClick={() => handleNavigation('/settings')}>
|
||||
<ListItemIcon>
|
||||
<SettingsIcon />
|
||||
@ -259,6 +317,21 @@ const Header: React.FC = () => {
|
||||
// Admin Section
|
||||
...(isAdmin ? [
|
||||
<Divider key="admin-divider" />,
|
||||
<Typography
|
||||
key="admin-header"
|
||||
variant="subtitle2"
|
||||
sx={{
|
||||
px: 2,
|
||||
py: 1,
|
||||
color: theme.palette.error.main,
|
||||
fontWeight: 600,
|
||||
letterSpacing: '0.5px',
|
||||
textTransform: 'uppercase',
|
||||
fontSize: '0.75rem'
|
||||
}}
|
||||
>
|
||||
Administration
|
||||
</Typography>,
|
||||
<MenuItem key="admin" onClick={() => handleNavigation('/admin')}>
|
||||
<ListItemIcon>
|
||||
<AdminIcon />
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user