Untitled
unknown
plain_text
5 months ago
3.3 kB
4
Indexable
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;
Editor is loading...
Leave a Comment