feat: Add responsive drawer navigation to Header component

src/components/Layout/Header.jsx

@@ -1,13 +1,17 @@
-import React from 'react';
-import { 
-  AppBar, 
-  Toolbar, 
-  Typography, 
-  Button, 
-  IconButton, 
+import React, { useState } from 'react';
+import {
+  AppBar,
+  Toolbar,
+  Typography,
+  Button,
+  IconButton,
   Box,
   useScrollTrigger,
-  Slide
+  Slide,
+  Drawer,
+  List,
+  ListItemButton,
+  ListItemText
 } from '@mui/material';
 import MenuIcon from '@mui/icons-material/Menu';
 import { useAuth } from '../../hooks/useAuth';
@@ -25,6 +29,19 @@ function HideOnScroll({ children }) {
 
 const Header = () => {
   const { isAuthenticated, logout } = useAuth();
+  const [drawerOpen, setDrawerOpen] = useState(false);
+
+  const toggleDrawer = (open) => (event) => {
+    if (event.type === 'keydown' && (event.key === 'Tab' || event.key === 'Shift')) {
+      return;
+    }
+    setDrawerOpen(open);
+  };
+
+  const handleLogoutMobile = () => {
+    logout();
+    setDrawerOpen(false);
+  };
 
   return (
     <HideOnScroll>
@@ -33,8 +50,9 @@ const Header = () => {
           <IconButton
             edge="start"
             color="inherit"
-            aria-label="menu"
-            sx={{ mr: 2 }}
+            aria-label="open navigation"
+            onClick={toggleDrawer(true)}
+            sx={{ mr: 2, display: { xs: 'block', sm: 'none' } }}
           >
             <MenuIcon />
           </IconButton>
@@ -96,6 +114,21 @@ const Header = () => {
             <ThemeToggle />
           </Box>
         </Toolbar>
+        <Drawer anchor="left" open={drawerOpen} onClose={toggleDrawer(false)}>
+          <Box sx={{ width: 250 }} role="presentation" onClick={toggleDrawer(false)} onKeyDown={toggleDrawer(false)}>
+            <List>
+              <ListItemButton component={Link} to="/about"><ListItemText primary="About" /></ListItemButton>
+              {isAuthenticated ? (
+                <>
+                  <ListItemButton component={Link} to="/dashboard"><ListItemText primary="Dashboard" /></ListItemButton>
+                  <ListItemButton onClick={handleLogoutMobile}><ListItemText primary="Logout" /></ListItemButton>
+                </>
+              ) : (
+                <ListItemButton component={Link} to="/login"><ListItemText primary="Login" /></ListItemButton>
+              )}
+            </List>
+          </Box>
+        </Drawer>
       </AppBar>
     </HideOnScroll>
   );