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

const Sidebar = () => (
  <Drawer variant="permanent" anchor="left" tyle={{ width: '250px', flexShrink: 0 }}>
    <List>
      <ListItem button component={Link} to="/products">
        <ListItemText primary="Products" />
      </ListItem>
      <ListItem button component={Link} to="/customers">
        <ListItemText primary ="Customers" />
      </ListItem>
      <ListItem button component={Link} to="/orders">
        <ListItemText primary="Orders" />
      </ListItem>
    </List>
  </Drawer>
);

export default Sidebar;"; my Header.js is "import React from 'react';
import { AppBar, Toolbar, Typography, IconButton, Menu, MenuItem } from '@mui/material';
import AccountCircle from '@mui/icons-material/AccountCircle';

const Header = ({ user }) => {
  const [anchorEl, setAnchorEl] = React.useState(null);

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

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

  return (
    <AppBar style={{ width: '100%', flexDirection:'column' }}>
      <Toolbar>
        <Typography variant="h6" style={{ flexGrow: 1 }}>
          My App
        </Typography>
        <Typography variant="body1">
          Welcome, {user}
        </Typography>
        <div>
          <IconButton
            edge="end"
            aria-label="account of current user"
            aria-controls="menu-appbar"
            aria-haspopup="true"
            onClick={handleMenu}
            color="inherit"
          >
            <AccountCircle />
          </IconButton>
          <Menu
            id="menu-appbar"
            anchorEl={anchorEl}
            anchorOrigin={{
              vertical: 'top',
              horizontal: 'right',
            }}
            keepMounted
            transformOrigin={{
              vertical: 'top',
              horizontal: 'right',
            }}
            open={Boolean(anchorEl)}
            onClose={handleClose}
          >
            <MenuItem onClick={handleClose}>Profile</MenuItem>
            <MenuItem onClick={handleClose}>Logout</MenuItem>
          </Menu>
        </div>
      </Toolbar>
    </AppBar>
  );
};

export default Header;
"; my Applayout.js is "import { Outlet } from "react-router-dom";
import Header from "./Header";
import Sidebar from "./Sidebar";


const AppLayout = () => {
    const user = "User";
  return (
    <div>
        <div className="">       
        <Header user={user} />
          <div className="">
          {<Sidebar />}
            <div className="">
            { <Outlet />}</div>
          </div>
        </div>
    </div>
  );
};

export default AppLayout;
"; my App.js is "import React from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import { Provider } from 'react-redux';
import { store } from './store';
import AppLayout from './components/Applayout';

const App = () => {
  return (
    <Provider store={store}>
      <Router>

          <div>
            <Routes>
              <Route path="/" element={<AppLayout/>}/>
              <Route path="/products" element={<div>Products component</div>} />
              <Route path="/customers" element={<div>customers component</div>}/> 
              <Route path="/orders" element={<div>order component</div>}/>
              
            </Routes>
        </div>
      </Router>
    </Provider>
  );
};

export default App;"; how to adjust to show my sidebar under the header and will not overwrite "My app"?