I am currently working with a function component that looks like this:
const Navbar = ({setNav, nav}) => {
const [justify, setJustify] = useState('space-around')
//get localStorage
const user = JSON.parse(localStorage.getItem('user'));
//change state of nav to display user details
if(user){
setNav(true)
}
console.log(nav)
return (
<Nav>
<Img src={logo} alt='groupomania' />
{nav ? <UserDetail setNav={setNav}/> : ''}
</Nav>
);
};
My goal is to dynamically adjust the justify-content styling based on the state. However, my attempts so far have not been successful.
This is what I have tried:
const Nav = styled.nav`
position: sticky;
background: #eeeeee;
min-height: 10vh;
display: flex;
flex-direction: row;
justify-content: ${nav ? 'space-between' : 'space-around'};
align-items: center;
border-bottom: solid 1px #e5e5e5;
padding: 1rem 10rem;
top: 0px;
`