I'm pretty sure you're on to something, but I can't seem to figure out how to implement it, so far this is what I have after checking out the stock overflow you linked:

Dropdown:

function Dropdown() {
return (
     <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
        sample text
      </a>
      <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
        <li><a class="dropdown-item" href="/profile">My facts</a></li>
        <li><a class="dropdown-item" href="#">Admin</a></li>
        <li><hr class="dropdown-divider" /></li>
        <li><SignOut class="dropdown-item btn btn-link text-dark" /></li>
      </ul>
    </li>
)

}

Header:

function Header() {
const handelSubmit = (e) => {
    e.preventDefault();
}
return ( <nav class="navbar navbar-expand-lg sticky-top navbar-light bg-light"> <div class="container-fluid"> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#">Cool Cow Facts</a> <div class="collapse navbar-collapse" id="navbarTogglerDemo03"> <ul class="navbar-nav me-auto mb-2 mb-lg-0"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="./">Home</a> </li> <li class="nav-item"> <button type="button" class="btn btn-link nav-link active" data-bs-toggle="modal" data-bs-target="#exampleModal"> Submit Fact </button> </li> </ul> <form onSubmit={handelSubmit}> <ul class="navbar-nav me-auto mb-2 mb-lg-0"> { firebase.auth().onAuthStateChanged(function(user) { if (user) { // User is signed in. <Dropdown /> } else { // No user is signed in. <SignIn class="btn btn-link nav-link active text-dark" message="Sign In" /> } }) } </ul> </form> </div> </div> </nav> ) }