Untitled

import * as React from 'react';
import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Card from '@mui/material/Card';
import CardActions from '@mui/material/CardActions';
import CardContent from '@mui/material/CardContent';
import CardHeader from '@mui/material/CardHeader';
import CssBaseline from '@mui/material/CssBaseline';
import Grid from '@mui/material/Grid';
import StarIcon from '@mui/icons-material/StarBorder';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import Link from '@mui/material/Link';
import GlobalStyles from '@mui/material/GlobalStyles';
import Container from '@mui/material/Container';
import Avatar from '@mui/material/Avatar';
import { lightBlue } from '@mui/material/colors';
import Image from './logo.png';
import { useParams } from 'react-router-dom';
import { useAuth } from '../../utils/auth';

function NavBar() {  
  // const { id } = useParams(); // Get the user ID from params
  // const { user, setUser } = useAuth(); // Access auth context for user data
  
  const handleLogout = () => {
    // setUser(null);
    // window.location.href = '/'; // Directly set the location to root (Home) when logging out
  }

  return (
    <React.Fragment>
      <GlobalStyles styles={{ ul: { margin: 0, padding: 0, listStyle: 'none' } }} />
      <CssBaseline />
      <AppBar
        style={{ background: lightBlue }}
        position="fixed"
        color="default"
        elevation={0}
        sx={{ borderBottom: (theme) => `1px solid ${theme.palette.divider}` }}
      >
        <Toolbar sx={{ flexWrap: 'wrap'  }}>
          <Typography marginLeft="50px">
            <Avatar
              alt="QAirline"
              src={Image}
              sx={{ width: 250, height: 60 }}
              variant="rounded"
            />
          </Typography>
          <Typography marginLeft="15px" variant="h8" color="inherit" noWrap sx={{ flexGrow: 1, color: "#5465FF" }}>
            Logged in as a Registered User
          </Typography>
          <nav>
            {/* Use <Link> instead of navigate */}
            <Link
              // href={`/User/${id}`}
              color="text.primary"
              sx={{ my: 1, mx: 1.5, textDecoration: 'none' }}
            >
              Home
            </Link>

            <Link
              // href={`/User/${id}/UserSearch`}
              color="text.primary"
              sx={{ my: 1, mx: 1.5, textDecoration: 'none' }}
            >
              Search Flight
            </Link>

            <Link
              // href={`/User/${id}/UserAbout`}
              color="text.primary"
              sx={{ my: 1, mx: 1.5, textDecoration: 'none' }}
            >
              About
            </Link>

            <Link
              // href={`/User/${id}/UserTeam`}
              color="text.primary"
              sx={{ my: 1, mx: 1.5, textDecoration: 'none' }}
            >
              Team
            </Link>
          </nav>
          <Button
            variant="outlined"
            sx={{ my: 1, mx: 1.5 }}
            onClick={handleLogout}
          >
            LogOut
          </Button>
        </Toolbar>
      </AppBar>
    </React.Fragment>
  );
}

export default NavBar;