https://i.stack.imgur.com/CYfmQ.png
In my current React project, I am facing an issue with aligning components within the Material-UI AppBar Component. My aim is to achieve a seamless and perfectly straight alignment for three key elements: a logo image, a heading, and a sign-in button.
Navbar.js Code:
// Import necessary modules
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 (
<>
<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}>
// Conditional rendering based on user status for profile details or sign-in option
{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 Code:
// Define styles for the Navbar component using Material-UI makeStyles
import { makeStyles } from "@mui/styles";
import { useTheme } from '@mui/material/styles';
import { deepPurple } from "@mui/material/colors";
// Export custom styles using makeStyles
export default makeStyles(() => ({
appBar: {
borderRadius: 15,
margin: '30px 0',
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
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'
},
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],
},
}));