cssreactjsflexboxnavbar

Nested Flexbox for navbar

I've been working on making a dropdown navbar using react, to resemble the image below - enter image description here

My code -

NavBar.jsx

import React, { useState } from 'react'
import './NavBar.css'


const NavBar = () => {
    const [openDropDown,setOpenDropDown] = useState(null)

    const toggleDropDown = (menu) =>{
        setOpenDropDown(openDropDown === menu ? null : menu)
    }
  return (
    <>
    <nav className = 'navbar'>
        <img className = 'logo' src = '../../images/logo.svg'/>
        <div className='list-container'>
        <ul className  = 'left-list'>
            <li className = 'navbar-items' onMouseEnter={() => toggleDropDown('features')} onMouseLeave={() => toggleDropDown()}>
                Features
                {openDropDown === 'features' && 
                <ul className='dropdown-list'>
                    <li className='features-items'>Todo List</li>
                    <li className='features-items'>Calender</li>
                    <li className='features-items'>Reminders</li>
                    <li className='features-items'>Planning</li>
                </ul>}
            </li>
            <li className = 'navbar-items' onMouseEnter={() => toggleDropDown('company')} onMouseLeave={() => toggleDropDown()}>
                Company
                {openDropDown === 'company' &&
                <ul className='dropdown-list'>
                    <li className='company-items'>History</li>
                    <li className='company-items'>Our Team</li>
                    <li className='company-items'>Blog</li>
                </ul>} 
            </li>
            <li className = 'navbar-items'>Careers</li>
            <li className = 'navbar-items'>About</li>
        </ul>

        <ul className = 'right-list'>
            <li className = 'navbar-items'>Login</li>
            <li className = 'navbar-items'>Register</li>
        </ul> 
        </div>
    </nav>
    </>
  )
}

export default NavBar

NavBar.css

*{
    box-sizing: border-box;
    margin: 0;
    padding : 0;
}

.navbar{
    display : flex;
    align-items: center;
    gap: 30px;
}
.list-container{
    display: flex;
    justify-content: space-around;
}
.left-list{
    display: flex;
}
.right-list{
    display: flex;
}
.navbar-items{
    margin : 20px;
}
.logo{
    margin-left: 50px;
    height: 20px;
    width: 50px;
}

I have a navbar class with an image(the logo) and a div(containing the two lists) inside it. I have applied flex to .navbar, which seems to be working as intended. I tried to apply flex to .list-container along with justify-content: space around, but the children elements stay in the same place. What should I change in the code to make it resemble the image above?

Solution

  • If your goal is to have the login and register on the right and the rest of the navigation on the left, you could adjust your css like this:

    list-container {
  display: flex;
  justify-content: space-between;
  flex-grow: 1;
}

    Please clarify your issue if another part is your problem.

    Recource: https://css-tricks.com/snippets/css/a-guide-to-flexbox/