How can I initially hide the active dropdown-menu when a vertical Bootstrap 5 menu is collapsed?

.page {
  min-height: 100vh;
}

.site-header {
  padding: 0 10px;
  height: 60px;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.04);
}

.sidebar {
  box-shadow: 3px 0px 11px 0px rgba(0, 0, 0, 0.04);
  width: 82px;
  height: auto !important;
}

.sidebar.show {
  width: 200px;
}

/* Logo Begin */
.logo-container {
  min-width: 82px;
  display: flex;
  align-items: center;
}

.brand {
  height: 60px;
  display: flex;
  padding-left: 5px;
  align-items: center;
  text-decoration: none;
}

.brand img {
  display: none;
  height: 30px;
  width: auto;
}

/* Logo End */

/* Menu Begin */
.sidebar .brand img.collapsed {
  display: inline;
}

.sidebar.show .brand img {
  display: inline;
}

.sidebar.show .brand img.collapsed {
  display: none;
}

.sidebar .dropdown-toggle::after {
  display: none;
  position: absolute;
  top: 17px;
  right: 15px;
  content: "";
  border: 0;
  border-bottom: 1px solid #495057;
  border-right: 1px solid #495057;
  height: 6px;
  width: 6px;
  transform: rotate(45deg);
}

.sidebar .dropdown-toggle.show::after {
  transform: rotate(225deg);
}

.sidebar .navbar-nav .nav-link {
  position: relative;
  text-align: center;
  padding: 6px 12px;
  color: #198754 !important;
}

.sidebar.show .navbar-nav .nav-link {
  text-align: left;
}

.sidebar .navbar-nav .nav-link:hover,
.sidebar .navbar-nav .nav-link.active {
  background: #e9ecef;
}

.sidebar .navbar-nav .nav-link .link-text {
  display: none;
}

.sidebar.show .navbar-nav .nav-link .menu-icon {
  padding-right: 5px;
}

.sidebar.show .navbar-nav .nav-link .link-text {
  display: inline;
}

.sidebar.show .dropdown-toggle::after {
  display: inline;
}

.sidebar .dropdown-menu {
  border: none !important;
  transform: none !important;
  position: absolute !important;
  left: 50px !important;
  top: 10px !important;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
  box-shadow: 3px 0px 11px 0px rgba(0, 0, 0, 0.05);
}

.sidebar.show .dropdown-menu {
  position: static !important;
  width: 100%;
  left: auto;
  padding: 0;
  box-shadow: none;
}

.sidebar .dropdown-menu .dropdown-item {
  color: inherit;
}

.sidebar.show .dropdown-menu .dropdown-item {
  padding-left: 40px;
}

.sidebar .dropdown-menu .dropdown-item.active,
.sidebar .dropdown-menu .dropdown-item:hover {
  background: #e9ecef;
}

/* Menu End */

.main {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

<div class="page d-flex">
  <aside class="sidebar d-block bg-white">
    <div b-2esi1xgawe="" class="logo-container px-1">
      <button id="navbarToggler" class="navbar-toggler mx-1" type="button" data-bs-toggle="collapse" data-bs-target=".sidebar"
          aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span></span>
        </button>

      <a href="#" class="brand">
          <img src="https://i.sstatic.net/bmJ0DHwU.png" alt="Logo">
          <img src="https://i.sstatic.net/rKpG1nkZ.png" alt="Logo" class="collapsed">
        </a>
    </div>
    <div class="navbar-vertical">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" title="Now playing" href="#"><i class="fa-solid fa-house menu-icon"></i> <span
                class="link-text">Now playing</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link " title="Top rated" href="#"><i class="fa-solid fa-trophy menu-icon"></i> <span
                class="link-text">Top rated</span></a>
        </li>

        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" title="Genres" href="#" role="button" data-bs-toggle="dropdown"
              aria-expanded="false">
              <i class="fa-solid fa-list menu-icon"></i> <span class="link-text">Genres</span>
            </a>
          <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="Genres">
            <li>
              <a class="dropdown-item" href="#">Action</a>
            </li>
            <li>
              <a class="dropdown-item active" href="#">Adventure</a>
            </li>
            <li>
              <a class="dropdown-item" href="#">Science Fiction</a>
            </li>
          </ul>
        </li>

        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" title="Users" href="#" role="button" data-bs-toggle="dropdown"
              aria-expanded="false">
              <i class="fa-solid fa-users menu-icon"></i> <span class="link-text">Users</span>
            </a>
          <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="Users">
            <li>
              <a class="dropdown-item" href="#">Admins</a>
            </li>
            <li>
              <a class="dropdown-item" href="#">Users</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </aside>

  <div class="main">
    <header class="site-header align-items-center d-flex bg-white">
      <h1 class="page-title">Lorem ipsum dolor sit amet</h1>
    </header>
    <div class="container content">
      <h2 class="mt-3">Lorem, ipsum dolor sit amet consectetur adipisicing elit</h2>
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Placeat nam nobis recusandae rem aut nesciunt
        officiis incidunt voluptatum dicta doloremque, tempora suscipit debitis corporis nihil, corrupti tempore
        aspernatur praesentium. Dolorum.</p>
    </div>
  </div>
</div>