How to fix a navbar in material ui?

Issue

I'm currently developing a React application, and I'm encountering an issue regarding the alignment of components within the Material-UI AppBar Component. My goal is to attain a seamless and straight-line alignment for three critical components: a logo image, a heading, and a sign-in button.

Navbar.js

import { AppBar, Typography, Toolbar, Avatar, Button, Box,Container } from "@mui/material";
import React from "react";
import { Link } from 'react-router-dom'
import useStyles from './styles'
import memories from '../../images/memories.png'


const Navbar = () => {
    const classes = useStyles()
    const user = null;
    return (
        // <Box sx={{ flexGrow: 1 }}>
        <>
            <AppBar className={classes.appBar} position='static' color='inherit'>
            <Container maxWidth="xl">
            <div className={classes.brandContainer}>
                <img className={classes.image} src={memories}  alt="memories" height="50" />
                <Typography variant='h4' nowrap className={classes.heading} >Travel Blog</Typography>
            </div>
            <Toolbar className={classes.toolbar}>
                {user ? (
                    <div className={classes.profile}>
                        <Avatar className={classes.purple} alt = {user.result.name} src = {user.result.imageUrl}>{user.result.name.charAt(0)}</Avatar>
                        <Typography className={classes.userName} variant = 'h6'>{user.result.name}</Typography>
                        <Button variant="contained" className={classes.logout} color="secondary">Logout</Button>

                    </div>
                ) : (
                    
                    <Button component={Link} className={classes.login} to='/auth' variant="contained" color="primary"> Sign In</Button>
                )}
            </Toolbar>
            </Container>
        </AppBar>
        </>
    )
}

export default Navbar

Styles.js

import { makeStyles } from "@mui/styles";
import { useTheme } from '@mui/material/styles';
import { deepPurple } from "@mui/material/colors";

export default makeStyles(() => ({
  appBar: {
    borderRadius: 15,
    margin: '30px 0',
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between',
    // verticalAlign: 'middle',
    alignItems: 'center',
    padding: '10px 50px',
  },
  heading: {
    color: 'rgba(0,183,255, 1)',
    textDecoration: 'none',
  },
  image: {
    marginLeft: '15px',
  },
  toolbar: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'flex-end',
    alignItems: 'center'
    // width: '400px',

  },
  profile: {
    display: 'flex',
    justifyContent: 'space-between',
    width: '400px',
    gap: '15px', 
  },
  userName: {
    display: 'flex',
    alignItems: 'center',
  },
  brandContainer: {
    display: 'flex',
    alignItems: 'center',
  },
  purple: {
    color: useTheme().palette.getContrastText(deepPurple[500]),
    backgroundColor: deepPurple[500],
  },
}));

Solution

Try adding display flex and flex-direction row to container

Answered By - Shukla Dev