How to get responsive side navBar using bootstrap5?

Question

How do I get my side navbar to be responsive? I was following a tutorial on responsive side bar, I was able to get a toggle icon that toggles on and off on my sideNav whenever my screen becomes small. However, all of my nav-links appear in the middle of the sidebar, not on top like I would like to. I'm currently building this project using reactjs and bootstrap5.

My code for my side navbar:

const Navbar = ({ handleClick, isLoggedIn, email }) => (
 
  <>
    <div className="container d-flex flex-column flex-md-row">
      <nav className="navbar navbar-expand-md navbar-light d-flex flex-md-column">
        <a href="/" className="navbar-brand text-light mt-2">
          {" "}
          <div className="display-6 font-weight-bold">
            <span>SPODify +</span>{" "}
          </div>{" "}
        </a>
        <button
          className="navbar-toggler"
          type="btn"
          data-bs-toggle="collapse"
          data-bs-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent"
          aria-expanded="false"
          aria-label="Toggle Navigation"
        >
          <span className="navbar-toggler-icon">
            <i class="bi bi-toggle-off"></i>
          </span>
        </button>
        <div
          className="collapse navbar-collapse w-100"
          id="navbarSupportedContent"
        >
          <ul className="navbar-nav w-100 d-flex flex-md-column text-center text-sm-start ">
            <li>
              <a href="/topcharts" className="nav-link" aria-current="page">
                HOME
              </a>
            </li>
            <li>
              <a href="#" className="nav-link">
                SEARCH
              </a>
            </li>
            <li>
              <a href="#" className="nav-link">
                PODCASTS
              </a>
            </li>
          </ul>
        </div>
      </nav>
      <main className="ps-0 ps-md-2 flex-grow-1"></main>
    </div>
  </>
);

My current CSS file:

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

a {
  text-decoration: none;
}

label {
  display: block;
}

nav a {
  margin: 5px;
}

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

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

.wrapper {
  display: flex;
}

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

.navbar {
  /* width: 250px;
  */
  min-height: 100vh;
  background-color: darkgray;
}

i {
  margin-right: 15px;
  font-size: 22px;
}
i:hover {
  color: red;
}

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

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

div.row {
  /* background: rgb(176, 54, 54); */
  margin-bottom: 50px;
  transition: 0.5s;
  border: 0;
  border-radius: 2rem;
  position: relative;
  width: 100%;
}

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

div.row {
  margin-left: 50px;
  display: flex;
  flex-wrap: wrap;
  list-style: none;
}

.card {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
}

div.card {
  padding: 15px;
  margin: 45px;
  margin-bottom: 55px;
  background-color: rgb(48, 47, 47);
  width: calc(100% / 2- 30px);
  /* border: 10px solid gray; */
  /* box-shadow: rgba(140, 84, 84, 0.19) 0px 50px 50px,
    rgba(238, 201, 201, 0.23) 0px 10px 10px;
  background-color: rgb(52, 50, 50);
  margin-left: 50px;
  margin-right: 50px; */
}

#mainCard {
  padding: 2px;
}

@media (min-width: 576px) {
  .h-sm-100 {
    height: 100%;
  }
}

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

My navbar is currently inside the div wrapper, which is inside my div main, as shown inside my app file. Currently main AND wrapper are flexed (shown in my CSS file) I'm very new to bootstrap, CSS, HTML and was wondering if maybe flexing both of them is causing the issue?

In addition, my navbar doesn't reach all the way to the left, there's a bit of background color showing from the body.

What my current website looks like :

Depending on how long the content is next to my sidebar, make the nav-links appear even lower. I want it right underneath my logo, SPODIFY+

Any tips on how to fix this? I've been at this for a couple of days and it's driving me insane. Thanks in advance!