my sidebar.js is "import React from 'react';
import { Link } from 'react-router-dom';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemText from '@mui/material/ListItemText';


const Sidebar = () => {
    return (
        <List sx={{ width: '100%', maxWidth: 250 ,backgroundColor: '#f0f0f0'}}>
            <ListItem component={Link} to="/home">
                <ListItemText primary="Home" />
            </ListItem>
            <ListItem  component={Link} to="/customer">
                <ListItemText primary="Customer" />
            </ListItem>
            <ListItem  component={Link} to="/staff">
                <ListItemText primary="Staff" />
            </ListItem>
            <ListItem  component={Link} to="/profile">
                <ListItemText primary="Profile" />
            </ListItem>
            <ListItem  component={Link} to="/about">
                <ListItemText primary="About" />
            </ListItem>
            <ListItem component={Link} to="/about">
                <ListItemText primary="Contact" />
            </ListItem>
            {/* Add more ListItems as needed */}
        </List>
    );
};

export default Sidebar;" and my Navbar.js is "import React, { useState } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { logoutUser } from '../features/auth/authSlice';
import AppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import IconButton from '@mui/material/IconButton';
import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';
import AccountCircle from '@mui/icons-material/AccountCircle';
import TextField from '@mui/material/TextField';
import Box from '@mui/material/Box';
import { Menu as MenuIcon } from '@mui/icons-material';

const Navbar = ({ onSidebarToggle }) => {
  const [anchorEl, setAnchorEl] = useState(null);
  const open = Boolean(anchorEl);
  const dispatch = useDispatch();
  const firstname = useSelector((state) => state.auth.firstname);

  const handleProfileMenuOpen = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  const handleLogout = () => {
    dispatch(logoutUser());
    handleClose();
  };

  return (
    <AppBar position="fixed" sx={{ zIndex: (theme) => theme.zIndex.drawer + 1 }}>
      <Toolbar>
        <IconButton
          color="inherit"
          aria-label="open drawer"
          edge="start"
          onClick={onSidebarToggle}
          sx={{ mr: 2, display: { sm: 'none' } }}
        >
          <MenuIcon />
        </IconButton>

        <Typography variant="h6" component="div" sx={{ flexGrow: 1, display: { xs: 'none', sm: 'block' } }}>
          Application Name
        </Typography>

        <Box sx={{ flexGrow: 1, display: 'flex', justifyContent: 'center' }}>
          <TextField
            label="Search"
            variant="outlined"
            size="small"
            sx={{ bgcolor: 'white', borderRadius: '4px' }}
          />
        </Box>

        <Typography variant="h6" component="div" sx={{ marginRight: 2 }}>
          Welcome, {firstname}
        </Typography>

        <IconButton
          size="large"
          aria-label="account of current user"
          aria-controls="menu-appbar"
          aria-haspopup="true"
          onClick={handleProfileMenuOpen}
          color="inherit"
        >
          <AccountCircle />
        </IconButton>
        <Menu
          id="menu-appbar"
          anchorEl={anchorEl}
          anchorOrigin={{
            vertical: 'top',
            horizontal: 'right',
          }}
          keepMounted
          transformOrigin={{
            vertical: 'top',
            horizontal: 'right',
          }}
          open={open}
          onClose={handleClose}
        >
          <MenuItem onClick={handleClose}>My Account</MenuItem>
          <MenuItem onClick={handleLogout}>Logout</MenuItem>
        </Menu>
      </Toolbar>
    </AppBar>
  );
};

export default Navbar;
", the Applayout is "import React from 'react';
import { Outlet } from "react-router-dom";
import { CssBaseline, Box, Toolbar } from '@mui/material';
import Sidebar from "./Sidebar";
import Navbar from "./Navbar";
import "./Layout.css";

const drawerWidth = 250;

const AppLayout = () => {
  const [mobileOpen, setMobileOpen] = React.useState(false);

  const handleSidebarToggle = () => {
    setMobileOpen(!mobileOpen);
  };

  return (
    <Box sx={{ display: 'flex' }}>
      <CssBaseline />
      <Navbar onSidebarToggle={handleSidebarToggle} />
      <Sidebar mobileOpen={mobileOpen} onSidebarToggle={handleSidebarToggle} />

      <Box>
        <Toolbar />
        <Outlet />
      </Box>
    </Box>
  );
};

export default AppLayout;", now the Navbar overwrite the "home" link, please revise them to fix it