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;
}