Split up MUI NavBar into three sections-CodePudding

I am trying to split up my MUI Navbar into 3 sections. The left hand side is a Home icon, next to it is a text string, then finally a set of icons to the right. I have it working but the icons on the right are bunched up and I haven't been able to add space between them. The Navbar code is mostly taken from MUI website with some modifications. Your suggestions are appreciated.

    <Box sx={{ flexGrow: 1 }}>                   <-- The box spans the full width
      <AppBar position="sticky">
        <Toolbar>
          <Tooltip title="Home" followCursor={true}>   <-- Home Icon
            <IconButton
              size="large"
              edge="end"
              aria-label="home"
              color="inherit"
            >
              <Logo height={30} />
            </IconButton>
          </Tooltip>

          <Typography
            variant="h5"
            noWrap
            component="div"
            sx={{ display: { xs: 'none', sm: 'block', flex: 1 } }}  <-- Takes up available space
          >
            &nbsp;MyApplication
          </Typography>

          <Box sx={{ display: { xs: 'none', md: 'flex' } }}>    <-- what prop to use here?
            <Tooltip title="Delete" followCursor={true}>
              <IconButton
                size="large"
                edge="end"
                aria-label="Delete"
                color="inherit"
              >
                <DeleteIcon />
              </IconButton>
            </Tooltip>

            <Tooltip title="Share" followCursor={true}>
              <IconButton
                size="large"
                edge="end"
                aria-label="Share"
                color="inherit"
              >
                <ShareIcon />
              </IconButton>
            </Tooltip>
          </Box>
        </Toolbar>
      </AppBar>
    </Box>

CodePudding user response：

You can use this example from mui docs

<Box sx={{ flexGrow: 1 }}>
  <AppBar position="static">
    <Toolbar>
    <AdbIcon sx={{ display: {md: 'flex' }, mr: 1 }} />
      <Typography
        variant="h6"
        noWrap
        component="a"
        href="/"
        sx={{
          mr: 2,
          display: {md: 'flex' },
          fontFamily: 'monospace',
          fontWeight: 700,
          letterSpacing: '.3rem',
          color: 'inherit',
          textDecoration: 'none',
        }}
      >
        LOGO
      </Typography>
    <Box sx={{ flexGrow: 1 }} />   <-- this is the only element you have to add on your code
      <Box sx={{ display: { md: 'flex' } }}>
        <IconButton size="large" aria-label="show 4 new mails" color="inherit">
            <MailIcon />
        </IconButton>
        <IconButton
          size="large"
          aria-label="show 17 new notifications"
          color="inherit"
        >
            <NotificationsIcon />
        </IconButton>
        <IconButton
          size="large"
          edge="end"
          aria-label="account of current user"
          aria-controls={menuId}
          aria-haspopup="true"
          onClick={handleProfileMenuOpen}
          color="inherit"
        >
          <AccountCircle />
        </IconButton>
      </Box>
    </Toolbar>
  </AppBar>
</Box>

visit here for further help https://mui.com/material-ui/react-app-bar/#app-bar-with-responsive-menu.

CodePudding user response：

You can use <Stack> Stack docs with spacing={6} props to provide different types of spacing around children in MUI.

Codesandbox example

In the future, you should provide a minimal, reproducible example along with your question --like the one I provided above.

<Stack direction="row" spacing={6} sx={{ display: { xs: "none", md: "flex" } }}>
  <Tooltip title="Delete" followCursor={true}>
    <IconButton size="large" edge="end" aria-label="Delete" color="inherit">
      <Delete />
    </IconButton>
  </Tooltip>

  <Tooltip title="Share" followCursor={true}>
    <IconButton size="large" edge="end" aria-label="Share" color="inherit">
      <Share />
    </IconButton>
  </Tooltip>
</Stack>