https://i.sstatic.net/CHSwp.png I'm facing an issue with my navbar that is supposed to align all the page options to the right. Despite using a flexbox layout and trying different alignment properties like alignSelf: end, the text only moves slightly downwards instead of aligning properly.
The toolbar orientation is set to row, not column, so I'm unsure why this misalignment is happening.
I attempted to remove the options displayed when the screen resizes, but that didn't resolve the issue either.
Below is the snippet of code causing the problem, and I've marked the section labeled ISSUE:
{/* Issue */}
{/* ABOUT, PROJECTS, CONTACT - full screen */}
<Box sx={{ display: { xs: 'none', md: 'flex' }, alignItems: "flex-end" }}>
{pages.map((page) => (
<Button
key={page}
onClick={handleCloseNavMenu}
sx={{ my: 2, color: 'black', display: 'block' }}
>
{page}
</Button>
))}
</Box>
Here's the complete code snippet for reference:
import * as React from 'react';
import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box';
import Toolbar from '@mui/material/Toolbar';
import IconButton from '@mui/material/IconButton';
import Typography from '@mui/material/Typography';
import Menu from '@mui/material/Menu';
import MenuIcon from '@mui/icons-material/Menu';
import Container from '@mui/material/Container';
import Button from '@mui/material/Button';
import MenuItem from '@mui/material/MenuItem';
const pages = ['About', 'Projects', 'Contact'];
const NavBar = () => {
const [anchorElNav, setAnchorElNav] = React.useState(null);
const handleOpenNavMenu = (event) => {
setAnchorElNav(event.currentTarget);
};
const handleCloseNavMenu = () => {
setAnchorElNav(null);
};
return (
<AppBar position="static" sx={{backgroundColor: "blue"}}>
<Container maxWidth="xl">
<Toolbar disableGutters sx={{display: { xs: 'flex' }, flexDirection: "row", backgroundColor: "blue"}}>
{/* LOGO */}
<Typography
variant="h2"
noWrap
component="div"
color="black"
sx={{ mr: 2, display: { xs: 'none', md: 'flex' } }}
>
name
</Typography>
{/*Drawer - small screen */}
<Box sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none'} }}>
{/* Menu triple bar */}
<IconButton
size="large"
aria-label="account of current user"
aria-controls="menu-appbar"
aria-haspopup="true"
onClick={handleOpenNavMenu}
color="inherit"
>
<MenuIcon />
</IconButton>
{/* ABOUT, PROJECTS, CONTACT - small screen */}
<Menu
id="menu-appbar"
anchorEl={anchorElNav}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'left',
}}
keepMounted
transformOrigin={{
vertical: 'top',
horizontal: 'left',
}}
open={Boolean(anchorElNav)}
onClose={handleCloseNavMenu}
sx={{
display: { xs: 'block', md: 'none' },
}}
>
{pages.map((page) => (
<MenuItem key={page} onClick={handleCloseNavMenu}>
<Typography textAlign="center">{page}</Typography>
</MenuItem>
))}
</Menu>
</Box>
{/* LOGO - small screen */}
<Typography
variant="h6"
noWrap
component="div"
color="black"
sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}
>
name
</Typography>
{/* Issue */}
{/* ABOUT, PROJECTS, CONTACT - full screen */}
<Box sx={{ display: { xs: 'none', md: 'flex' }, alignItems: "flex-end" }}>
{pages.map((page) => (
<Button
key={page}
onClick={handleCloseNavMenu}
sx={{ my: 2, color: 'black', display: 'block' }}
>
{page}
</Button>
))}
</Box>
</Toolbar>
</Container>
</AppBar>
);
};
export default NavBar;