How do i have my content appear right beside my sticky sidebar?

Question

I'm new to coding and working on my first project with reactJs and bootstrap 5. I've been trying to get a sticky side navbar that stays on the side and my content appears right beside it, even when switching routes. Currently, my content renders underneath my sidebar.

My code for my side navBar:

const Navbar = ({ handleClick, isLoggedIn, email }) => (
  <div>
    <nav
      className="navbar navbar-expand d-flex flex-column align-item-center-start"
      id="sidebar"
    >
      <a href="/" className="navbar-brand text-light mt-2">
        <div className="display-6 font-weight-bold">
          <span>SPODify +</span>
        </div>
      </a>

      <ul className="navbar-nav d-flex flex-column w-100 mt-4">
        <li className=" h-25 nav-item border-bottom">
          <a href="/topcharts" className="nav-link text-light pl-4">
            <span>
              <i className="bi bi-house-door "></i>
              HOME
            </span>
          </a>
        </li>

        <li className="h-25  nav-item border-bottom">
          <a href="#" className="nav-link text-light ">
            <span>
              <i className="bi bi-search"></i>
              SEARCH
            </span>
          </a>
        </li>

        <li className="nav-item h-10 border-bottom">
          <a href="/show" className="nav-link text-light ">
            <span>
              <i className="bi bi-rainbow"></i>
              PODCASTS
            </span>
          </a>
        </li>

        <li className="nav-item h-25 border-bottom">
          <a href="#" className="nav-link text-light pl-4">
            <span>
              <i className="bi bi-collection"></i>
              YOUR LIBRARY
            </span>
          </a>
        </li>
      </ul>

      <div className="navbar navbar-expand d-flex flex-column-reverse align-item-center-start">
        <ul className="navbar-nav d-flex flex-column-reverse w-100 mt-4">
          {isLoggedIn ? (
            <>
              <li className="nav-item h-25">
                <a href="/login" className="nav-link text-light pl-4">
                  <span>
                    <i className="bi bi-person-circle"></i>
                    {email}
                  </span>
                </a>
              </li>
              <li className="nav-item h-25 ">
                <a
                  href="#"
                  onClick={handleClick}
                  className="nav-link text-light pl-4"
                >
                  LOGOUT
                </a>
              </li>
            </>
          ) : (
            <li className="nav-item h-25 ">
              <a href="/login" className="nav-link text-light pl-4">
                LOGIN
              </a>
            </li>
          )}
        </ul>
      </div>
    </nav>
  </div>
);

And my current CSS file:

body {
  font-family: sans-serif;
  background-color: black;
  color: white;
}

a {
  text-decoration: none;
}

label {
  display: block;
}

nav a {
  margin: 5px;
}

form div {
  margin: 1em;
  display: inline-block;
}

.main {
  /* position: relative;
  min-height: 100vh; */
}

.wrapper {
  display: flex;
}
.content {
  /* display: flex; */
}

.navbar {
  width: 250px;
  height: 100%;
  background-color: darkgray;
}
i {
  margin-right: 15px;
  font-size: 22px;
}
i:hover {
  color: red;
}

nav a.nav-link span:hover {
  color: red;
}

a.navbar-brand span:hover {
  color: red;
}

.card {
  background: rgb(55, 54, 54);
  margin-bottom: 30px;
  transition: 0.5s;
  border: 0;
  border-radius: 0.55rem;
  position: relative;
  width: 100%;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
}

.card .body {
  font-size: 14px;
  color: #424242;
  padding: 20px;
  font-weight: 400;
}

I have a App file which is the starting point of my app, therefore my side Navbar will persist even when switching routes:

const App = () => {
  return (
    <div className="main">
      <div className="wrapper">
        <Navbar />
      </div>{" "}
      <div className="content">
        <Routes />
      </div>
    </div>
  );
};

I thought wrapping my nav component inside a div tag and have my routes inside another div tag would make it render right besides each other.

This is what my current website looks like :

I'd like to achieve having the cards of podcasts rendering right next to my side Navbar, any tips would be greatly appreciated! I've been at this for a while now and can't figure it out. Thanks in advance!

Answer 1

add this yo your main class:

.main { 
  display: flex;
}