React-Bootstrap Navbar issue

Question

Can somebody help me align my navbar? Nothing I do makes the top part line up normally. I think the issue might be when navbar gets toggled whether the user is logged in and an admin or not. I'm wondering if is because of the divs and if I have to make a separate component now. It is also really big for no good reason.

  <Navbar.Brand href="/homepage" className="logo">
    <h2>BookShopper</h2>
    {/* <img src = 'logo.png' height = '100px' width = '300px'/> */}
  </Navbar.Brand>

  <Navbar.Toggle aria-controls="responsive-navbar-nav" />
  <Navbar.Collapse id="responsive-navbar-nav">
    <Form className="d-flex">
      <FormControl
        className = "justify-content-center"
        type="search"
        placeholder="Search"
        className="me-2"
        aria-label="Search"
      />
    </Form>

    {isLoggedIn ? (
      <div>
        <Nav className="me-auto">
          <Nav.Link href="/edit">Profile</Nav.Link>
          {/* The navbar will show these links after you log in */}
          <Nav.Link href="#" onClick={handleClick}>
            Logout
          </Nav.Link>
          <Nav.Link href="/cart">
            <BsFillBasket3Fill />
          </Nav.Link>
        </Nav>
        {isUserAdmin && (

             <div>
             <Nav className="me-auto">
               <NavDropdown
                 title="Market Place"
                 id="collasible-nav-dropdown"
               >
                 <NavDropdown.Item href="/stock">Stock</NavDropdown.Item>
                 <NavDropdown.Item href="/users">Users</NavDropdown.Item>
                 <NavDropdown.Item href="/add-book">
                   Add Book
                 </NavDropdown.Item>
               </NavDropdown>
             </Nav>
           </div> 
        )}
      </div>
    ) : (
      <div>
        {/* The navbar will show these links before you log in */}
        <Nav>
          <Nav.Link href="/login">Login</Nav.Link>
          <Nav.Link href="/cart">
            <BsFillBasket3Fill />
          </Nav.Link>
        </Nav>
      </div>
    )}
  </Navbar.Collapse>
  {/* </Container> */}
</Navbar>

I just want the elements to line up horizontally and look normal.

Answer 1

With your code you are creating two Navs (if logged in AND user admin). Move Nav outside of the ternary operator to create it only once and set navigation links according to your logic.

Basically you want:

• When not logged in: Show "Login" and "Basket"
• When logged in: Show "Profile", "Logout" and "Basket"
• When logged in AND also having admin rights: Show "Profile", "Logout", "Basket" and "Market Place"

I've created a sandbox, fixed the problem with double Navs and tried to simplified your boolean logic as well: https://codesandbox.io/s/interesting-darkness-i0u64k?file=/src/App.js