Navbar not showing items when resized

See more:

bootstrap

My bootstrap navbar dropdown does not show the items when resized and logged in, it shows only Home. While when I am logged it when it is supposed to show the dropdowns
it shows only Home. I am not sure what I am doing wrong.

Here is the code:

<!--    NAVBAR    -->
<nav class="navbar navbar-dark bg-dark navbar-expand-md">
   <div class="container-fluid">
      <a th:href="@{/}" class="navbar-brand logo">BookIT</a>
      <button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbar">
      
      </button>
      <div class="navbar-collapse collapse" id="navbar">
         <ul class="navbar-nav">
            <li class="nav-item"><a th:href="@{/}" class="nav-link">Home</a></li>
            <!--                <li sec:authorize="isAnonymous()" class="nav-item"><a class="nav-link " href="#search">Search</a></li>-->
            <li sec:authorize="isAnonymous()" class="nav-item"><a class="nav-link "
               href="#services">Services</a>
            </li>
            <li sec:authorize="isAnonymous()" class="nav-item">
               <a th:href="@{/users/register}" class="nav-link"><span>Register</span></a>
            </li>
            <li sec:authorize="isAnonymous()" class="nav-item">
               <a th:href="@{/users/login}" class="nav-link"><span>Log in</span></a>
            </li>
            <!--                -->
            <div class="navbar-collapse collapse" id="navbarNavDarkDropdown">
               <th:block sec:authorize="hasRole('ADMIN')">
                  <li class="nav-item dropdown">
                     <a class="nav-link dropdown-toggle" href="#" id="navbarDarkDropdownMenuLink"
                        role="button"
                        data-bs-toggle="dropdown">
                     Admin Panel
                     </a>
                     <ul class="dropdown-menu dropdown-menu-dark"
                        aria-labelledby="navbarDarkDropdownMenuLink">
                        <li><a class="dropdown-item" th:href="@{/admin/statistics}">Statistics</a></li>
                        <li><a class="dropdown-item" th:href="@{/admin/manage-users}">Manage Users</a></li>
                        <li><a class="dropdown-item" th:href="@{/admin/manage-all-bookings}">View All
                           Bookings</a>
                        </li>
                     </ul>
                  </li>
               </th:block>
            </div>
            <div sec:authorize="isAuthenticated()" class="navbar-collapse collapse">
               <ul class="navbar-nav">
                  <li class="nav-item dropdown">
                     <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
                     Album
                     </a>
                     <ul class="dropdown-menu dropdown-menu-dark"
                        aria-labelledby="navbarDarkDropdownMenuLink">
                        <li><a class="dropdown-item"
                           th:href="@{/upload}">Add photos</a>
                        </li>
                        <li><a class="dropdown-item"
                           th:href="@{/view-album/{id}(id=${session.currentUserId})}">View
                           album</a>
                        </li>
                     </ul>
                  </li>
               </ul>
            </div>
            <div sec:authorize="isAuthenticated()" class="navbar-collapse collapse">
               <ul class="navbar-nav">
                  <li class="nav-item dropdown">
                     <a class="nav-link dropdown-toggle" href="#" role="button"
                        data-bs-toggle="dropdown"><span
                        th:text="${session.currentUserFirstName}"></span><img
                        class="img-profile rounded-circle"
                        src="/images/undraw_profile_1.svg"> </a>
                     <ul class="dropdown-menu dropdown-menu-dark"
                        aria-labelledby="navbarDarkDropdownMenuLink">
                        <li><a class="dropdown-item"
                           th:href="@{/users/profile/{id}(id=${session.currentUserId})}">View
                           profile</a>
                        </li>
                        <li><a class="dropdown-item" th:href="@{/view-all}">View Bookings</a></li>
                        <li><a class="dropdown-item" th:href="@{/history}">View Bookings History</a></li>
                        <li>
                           <form th:action="@{/users/logout}" method="post" th:hidden="true"
                              name="logoutForm">
                              <input type="submit" value="Logout"/>
                           </form>
                           <a class="dropdown-item"
                              href="javascript: document.logoutForm.submit()">Logout</a>
                        </li>
                     </ul>
                  </li>
               </ul>
            </div>
         </ul>
      </div>
   </div>
</nav>
<!-- .navbar -->

/*!*--------------------------------------------------------------*/
/* # Header*/
/*--------------------------------------------------------------*!*/


#header .logo {
    font-size: 30px;
    margin-left: 55px;
    /*margin: 0;*/
    /*padding: 0;*/
    line-height: 1;
    font-weight: 700;
    letter-spacing: 2px;

}

#header .logo:hover {
    transition: all 0.3s linear;
}


/*!*--------------------------------------------------------------*/
/* # Navigation Menu*/
/*--------------------------------------------------------------*!*/

.navbar {
    padding: 0;
}

.navbar ul {
    align-items: center;
}



.navbar a, .navbar a:focus {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 25px 15px 24px 15px;
    font-size: 14px;
    color: #fff;
    white-space: nowrap;
}

.navbar a:hover, .navbar .navbar .navbar li:hover > a {
    background: #333b3f;
    border-radius: 0px;
    color: white;
}

.img-profile {
    width: 20px;
}

.navbar .dropdown-item:active {
    background-color: #212529;
}

.navbar .dropdown a span {
    margin-right: 9px;
}

What I have tried:

I don't know where to look for the mistake. I tried removing collapse from here

<div class="navbar-collapse collapse"

and it shows everything but it is not acting as it should - stays always open. I took the code for the dropdown from here - Dropdowns · Bootstrap v5.0[^] Any help is appreciated.