src/components/Layout/Header.jsx

import React, { useState } from 'react';
import {
  AppBar,
  Toolbar,
  Typography,
  Button,
  IconButton,
  Box,
  useScrollTrigger,
  Slide,
  Drawer,
  List,
  ListItemButton,
  ListItemText
} from '@mui/material';
import MenuIcon from '@mui/icons-material/Menu';
import { useAuth } from '../../hooks/useAuth';
import { Link } from 'react-router-dom';
import ThemeToggle from '../UI/ThemeToggle';

function HideOnScroll({ children }) {
  const trigger = useScrollTrigger();
  return (
    <Slide appear={false} direction="down" in={!trigger}>
      {children}
    </Slide>
  );
}

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>
      <AppBar position="sticky" elevation={1}>
        <Toolbar>
          <IconButton
            edge="start"
            color="inherit"
            aria-label="open navigation"
            onClick={toggleDrawer(true)}
            sx={{ mr: 2, display: { xs: 'block', sm: 'none' } }}
          >
            <MenuIcon />
          </IconButton>
          
          <Typography 
            variant="h6" 
            component={Link} 
            to="/"
            sx={{ 
              flexGrow: 1,
              textDecoration: 'none',
              color: 'inherit',
              fontWeight: 'bold'
            }}
          >
            EnlightenQalb
          </Typography>
  
          <Box sx={{ display: { xs: 'none', sm: 'block' } }}>
            <Button 
              color="inherit" 
              component={Link} 
              to="/about"
              sx={{ mx: 1 }}
            >
              About
            </Button>
            {isAuthenticated ? (
              <>
                <Button 
                  color="inherit" 
                  component={Link} 
                  to="/dashboard"
                  sx={{ mx: 1 }}
                >
                  Dashboard
                </Button>
                <Button 
                  color="inherit" 
                  onClick={logout}
                  sx={{ mx: 1 }}
                >
                  Logout
                </Button>
              </>
            ) : (
              <Button 
                color="inherit" 
                component={Link} 
                to="/login"
                sx={{ mx: 1 }}
              >
                Login
              </Button>
            )}
          </Box>
  
          <Box sx={{ display: 'flex', alignItems: 'center', ml: 2 }}>
            <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>
  );
};

export default Header;