I'm struggling with aligning my Navbar items (NavLink) horizontally in one line instead of being stuck on the right side and stacked on top of each other. Can someone help me fix this issue? Here's the code snippet:
import React from "react";
import { Toolbar, Typography } from "@mui/material";
import { styled } from '@mui/material/styles'
import { NavLink } from "react-router-dom";
import Logo from '../assets/travelLogo.png'
const NavigBar = styled(Toolbar)(({theme}) =>({
backgroundColor: theme.palette.background.default,
display: 'flex',
justifyContent: 'space-between',
textAlign: 'center',
}));
const NavigTypo = styled(Typography)(({theme}) => ({
display: 'flex',
justifyContent: 'space-between',
color: "white",
}));
function Navbar(){
return(
<NavigBar>
<img src={Logo} alt="logo"/>
<div>
<NavLink to="/">
<NavigTypo variant="h5" >
HOME
</NavigTypo>
</NavLink>
<NavLink to="/info">
<NavigTypo variant="h5" >
INFO
</NavigTypo>
</NavLink>
<NavLink to="/contact">
<NavigTypo variant="h5" >
CONTACT US
</NavigTypo>
</NavLink>
</div>
</NavigBar>
)
}
export default Navbar;