feat(timetable): add navigation links to Header component

src/pages/Header.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
 import { useAuth } from '../contexts/AuthContext';
-import { 
+import {
   AppBar,
   Toolbar,
   Typography,
@@ -15,7 +15,7 @@ import {
   Divider
 } from '@mui/material';
 import MenuIcon from '@mui/icons-material/Menu';
-import { 
+import {
   Login as LoginIcon,
   Logout as LogoutIcon,
   School as TeacherIcon,
@@ -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';
@@ -49,7 +54,7 @@ const Header: React.FC = () => {
   useEffect(() => {
     const newAuthState = !!user;
     setIsAuthenticated(newAuthState);
-    logger.debug('user-context', '🔄 User state changed in header', { 
+    logger.debug('user-context', '🔄 User state changed in header', {
       hasUser: newAuthState,
       userId: user?.id,
       userEmail: user?.email,
@@ -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');
@@ -91,85 +95,62 @@ const Header: React.FC = () => {
   };
 
   return (
-    <AppBar 
+    <AppBar
-      position="fixed" 
+      position="fixed"
-      sx={{ 
+      sx={{
         height: `${HEADER_HEIGHT}px`,
         bgcolor: theme.palette.background.paper,
         color: theme.palette.text.primary,
         boxShadow: 1
       }}
     >
-      <Toolbar sx={{ 
+      <Toolbar sx={{
-        display: 'flex', 
+        display: 'flex',
         justifyContent: 'space-between',
-        minHeight: `${HEADER_HEIGHT}px !important`,
+        alignItems: 'center',
-        height: `${HEADER_HEIGHT}px`,
+        height: '100%'
-        gap: 2,
-        px: { xs: 1, sm: 2 }
       }}>
-        <Box sx={{ 
+        {showGraphNavigation && (
-          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
-          }
-        }}>
           <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={{
-            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={{
+            PaperProps={{
-              paper: {
+              sx: {
-                elevation: 3,
+                width: 280,
-                sx: {
+                maxHeight: '80vh'
-                  bgcolor: theme.palette.background.paper,
-                  color: theme.palette.text.primary,
-                  minWidth: '240px'
-                }
               }
             }}
           >
+            <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" />,
+                <Divider key="home-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" />,
 
-                // Main Features Section
+                // Timetable Section
-                <MenuItem key="multiplayer" onClick={() => handleNavigation('/multiplayer')}>
+                <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 />
@@ -288,7 +361,7 @@ const Header: React.FC = () => {
                   <ListItemIcon>
                     <TeacherIcon />
                   </ListItemIcon>
-                  <ListItemText 
+                  <ListItemText
                     primary="Sign up as Teacher"
                     secondary="Create a teacher account"
                   />
@@ -297,7 +370,7 @@ const Header: React.FC = () => {
                   <ListItemIcon>
                     <StudentIcon />
                   </ListItemIcon>
-                  <ListItemText 
+                  <ListItemText
                     primary="Sign up as Student"
                     secondary="Create a student account"
                   />
@@ -310,4 +383,4 @@ const Header: React.FC = () => {
   );
 };
 
-export default Header; 
+export default Header;