Блог

Это проблема в проекте angular, и для нее я использую стандартную версию mdboostrap5.

Я не могу понять, почему навигационная панель опустится, но затем не вернется обратно, когда будет нажата иконка меню гамбургеров.

Вот код:

 <header class="mb-auto header-spacing">
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container-fluid">
            <a class="navbar-brand me-2" href="/">
                <img src="/assets/images/logo.png" height="40" alt="" loading="lazy" style="margin-top: -1px;">
            </a>

            <button
                class="navbar-toggler" 
                type="button" 
                data-mdb-toggle="collapse" 
                data-mdb-target="#navbar-links"
                aria-controls="navbar-links" 
                aria-expanded="false" 
                aria-label="Toggle navigation"
            >
                <i class="fas fa-bars"></i>
            </button>

            <div class="collapse navbar-collapse" id="navbar-links">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li *ngIf="isUserLoggedIn()" class="nav-item">
                        <a class="nav-link" href="/dashboard">Dashboard</a>
                    </li>

                    <li *ngIf="isUserLoggedIn()" class="nav-item">
                        <a class="nav-link"
                            href="/leaderboard">Leaderboards</a>
                    </li>

                    <li *ngIf="isUserLoggedIn()" class="nav-item">
                        <a class="nav-link" href="/profile">Profile</a>
                    </li>
                </ul>
                <div class="d-flex align-items-center navbar-nav mb-2">
                    <button *ngIf="isUserLoggedIn()" type="button" class="btn btn-outline-dark mt-2"
                        (click)="logout()">Logout</button>
                    <button *ngIf="!isUserLoggedIn()" type="button" class="btn btn-outline-dark mx-1 mt-2"
                        routerLink="/signin">Login</button>
                    <button *ngIf="!isUserLoggedIn()" type="button" class="btn btn-dark mx-1 mt-2"
                        routerLink="/signup">Join the challenge</button>
                </div>
            </div>
        </div>
    </nav>
</header>