I am trying to center align logo in AppBar. Really got stuck to achieve the logo alone at the center. Both vertical and horizontal.

Here is my AppBar.tsx

import * as React from 'react';
import { styled, useTheme } from '@mui/material/styles';

import MuiAppBar, { AppBarProps as MuiAppBarProps } from '@mui/material/AppBar';
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 logo from './../assets/images/logo_white.svg'
import Box from '@mui/material/Box';
import MoreIcon from '@mui/icons-material/MoreVert';
const drawerWidth = 240;



interface AppBarProps extends MuiAppBarProps {
  open?: boolean;
}

const AppBar = styled(MuiAppBar, {
    shouldForwardProp: (prop) => prop !== "open"
  })<AppBarProps>(({ theme, open }) => ({
    transition: theme.transitions.create(["margin", "width"], {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.leavingScreen
    }),
    ...(open && {
      width: `calc(100% - ${drawerWidth}px)`,
      marginLeft: `${drawerWidth}px`,
      transition: theme.transitions.create(["margin", "width"], {
        easing: theme.transitions.easing.easeOut,
        duration: theme.transitions.duration.enteringScreen
      })
    })
  }));



  export default function AppBar({ open, onDrawerOpen }:any) {
    const theme = useTheme();
  
    return (
      <AppBar position="fixed" style={{ background: "#002a5e" }} open={open}>
        <Toolbar>
          <IconButton
            color="inherit"
            aria-label="open drawer"
            onClick={onDrawerOpen}
            edge="start"
            sx={{ mr: 2, ...(open && { display: "none" }) }}
          >
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" noWrap component="div">
            TITLE
          </Typography>

          <Box
            component="img"
            sx={{
            height: 32, 
            }}
            alt="MyLogo"
            src={logo}
        />

        </Toolbar>
      </AppBar>
    );
  }

Now it just shows along with the title text. Please help

CodePudding user response：

There are many possible approaches, as a basic example perhaps try add a container with flex: 1 on both side of the logo.

This should always push the logo to the center of Toolbar, but still keep the button and title at the start of it, as it seemed to be the desired result.

Example:

import * as React from "react";
import { styled, useTheme } from "@mui/material/styles";

import MuiAppBar, { AppBarProps as MuiAppBarProps } from "@mui/material/AppBar";
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 logo from "./../assets/images/logo_white.svg";
import Box from "@mui/material/Box";
import MoreIcon from "@mui/icons-material/MoreVert";
const drawerWidth = 240;

interface AppBarProps extends MuiAppBarProps {
  open?: boolean;
}

const AppBar =
  styled(MuiAppBar, {
    shouldForwardProp: (prop) => prop !== "open",
  }) <
  AppBarProps >
  (({ theme, open }) => ({
    transition: theme.transitions.create(["margin", "width"], {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.leavingScreen,
    }),
    ...(open && {
      width: `calc(100% - ${drawerWidth}px)`,
      marginLeft: `${drawerWidth}px`,
      transition: theme.transitions.create(["margin", "width"], {
        easing: theme.transitions.easing.easeOut,
        duration: theme.transitions.duration.enteringScreen,
      }),
    }),
  }));

export default function AppBar({ open, onDrawerOpen }: any) {
  const theme = useTheme();

  return (
    <AppBar position="fixed" style={{ background: "#002a5e" }} open={open}>
      <Toolbar>
        <Box sx={{ display: "flex", alignItems: "center", flex: "1" }}>
          <IconButton
            color="inherit"
            aria-label="open drawer"
            onClick={onDrawerOpen}
            edge="start"
            sx={{ mr: 2, ...(open && { display: "none" }) }}
          >
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" noWrap component="div">
            TITLE
          </Typography>
        </Box>
        <Box
          component="img"
          sx={{
            height: 32,
          }}
          alt="MyLogo"
          src={logo}
        />
        <Box sx={{ flex: "1" }}></Box>
      </Toolbar>
    </AppBar>
  );
}

CodePudding user response：

You need to pack IconButton and Typography in to a Box and set it's display to absolute. Then you can manage the logo with flex attributes.

export default function AppBarr({ open, onDrawerOpen }: any) {
  const theme = useTheme();

  return (
    <AppBar position="fixed" style={{ background: "#002a5e" }} open={open}>
      <Toolbar sx={{ justifyContent: "center" }}>
        <Box
          sx={{
            position: "absolute",
            display: "flex",
            alignItems: "center",
            right: "20px",
          }}
        >
          <IconButton
            color="inherit"
            aria-label="open drawer"
            onClick={onDrawerOpen}
            edge="start"
            sx={{ mr: 2, ...(open && { display: "none" }) }}
          >
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" noWrap component="div">
            TITLE
          </Typography>
        </Box>

        <Box
          component="img"
          sx={{
            height: 32,
          }}
          alt="MyLogo"
          src={logo}
        />
      </Toolbar>
    </AppBar>
  );
}

This is a good source to learn all the approaches you can take.