I am creating a nav bar in MUI. I want the navbar to have space on either side, for example

Stackoverflow also have a navbar where there is space on either side. This is my code

import * as React from 'react';
import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import IconButton from '@mui/material/IconButton';
import MenuIcon from '@mui/icons-material/Menu';
import AccountCircle from '@mui/icons-material/AccountCircle';
import MenuItem from '@mui/material/MenuItem';
import Menu from '@mui/material/Menu';
import { bgcolor } from '@mui/system';

export default function MenuAppBar() {
  const [auth, setAuth] = React.useState(true);
  const [anchorEl, setAnchorEl] = React.useState(null);

  const handleChange = (event) => {
    setAuth(event.target.checked);
  };

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

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

  return (
    <Box sx={{ flexGrow: 1 }}>
      <AppBar sx={{ bgcolor : "brown", borderBottom : "3px solid #eceff1" }} position="absolute" elevation={0}>
        <Toolbar variant="dense">
          <IconButton
            size="large"
            edge="start"
            color="inherit"
            aria-label="menu"
            sx={{ mr: 2, color : "black"}}
          >
            <MenuIcon />
          </IconButton>
          {auth && (
            <div>
              <IconButton
                size="large"
                aria-label="account of current user"
                aria-controls="menu-appbar"
                aria-haspopup="true"
                onClick={handleMenu}
                color="inherit"
                sx={{ flexGrow: 1, color : "black" }}
              >
                <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}>My account</MenuItem>
              </Menu>
            </div>
          )}
        </Toolbar>
      </AppBar>
      <Toolbar/>
    </Box>
  );
}

This is just some boiler plate code taken from MUI that I have customised very little. I will eventually hook this navbar up to use the React Router.

CodePudding user response：

Add px={2} in your Box px stands for padding x-axis

<Box sx={{ flexGrow: 1 }} px={2}>

CodePudding user response：

add padding left right to the Appbar

 <AppBar sx={{ bgcolor : "brown", borderBottom : "3px solid #eceff1", padding: "0 23px" }} position="absolute" elevation={0}>

or margin if you want the space to be outside the Appbar

 <AppBar sx={{ bgcolor : "brown", borderBottom : "3px solid #eceff1", margin: "0 24px" }} position="absolute" elevation={0}>