Center part of the navbar, move part of the navbar to the right [duplicate]

39 viewscssflexboxhtmlreactjs
0

I’ve created a Navbar in my React project. I want to center my "center-nav-bar" div and have the "right-nav-bar" div to the right of the page. I’ve tried "float" but since I’m using flexbox, it doesn’t work. I’ve also tried "margin-left: auto" with no luck. I apologize if this is a simple question but I’ve been struggling for hours at this point. This is my code:

import React, { useState, useContext } from "react";
import { NavLink, Outlet, useNavigate } from "react-router-dom";
import { UserContext } from "../../context/UserProvider";
import "./Navbar.css"

export const Navbar = () => {
  const { userToken, setUserToken, isAdmin } = useContext(UserContext);
  const navigate = useNavigate();

  function handleLogOut() {
    localStorage.clear();
    setUserToken(null);
    navigate("/login");
  }

  return (
    <>
      <div className="nav-bar">
        <nav>
          <ul>
            {userToken ? (
              <>
                <div id="center-nav-bar">
                  <li>
                    <NavLink to="/">Home</NavLink>
                  </li>
                  <li>
                    <NavLink to="/my-pets">My pets</NavLink>
                  </li>
                  <li>
                    {isAdmin && <NavLink to="/dashboard">Dashboard</NavLink>}
                  </li>
                </div>
                <div id="right-nav-bar">
                  <li>
                    <NavLink to="/profile-settings">Profile</NavLink>
                  </li>
                  {userToken && <button onClick={handleLogOut}>Log out</button>}
                </div>
              </>
            ) : (
              <>
                <div id="logged-out-nav">
                  <a href="/login">
                    <button id="login-button">Login</button>
                  </a>
                  <a href="/sign-up">
                    <button id="signup-button">Sign up</button>
                  </a>
                </div>
              </>
            )}
          </ul>
        </nav>
      </div>
      <Outlet />
    </>
  );
};

The CSS:

.nav-bar {
  display: flex;
  justify-content: center;
  color: white;
  border: 1px solid black;
}

#center-nav-bar {
  border: 1px solid black;
  display: flex;
}

#right-nav-bar {
  border: 1px solid black;
  display: flex;
  margin-left: auto; /* Move #right-nav-bar to the right */
}

nav ul {
  display: flex;
  flex-direction: row;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

nav li {
  margin: 1rem;
}

a,
a:visited {
  text-decoration: none;
  color: black;
}

#logged-out-nav {
  justify-content: center;
  align-items: center;
}