@if (isOpen) {
    <ngb-alert [dismissible]="false" type="primary" class="top-alert text-center mb-0 rounded-0"
               role="alert">
        <button type="button" class="btn-close btn-close-white float-end" aria-label="Close"
                (click)="closeAlert()"></button>
        <div class="fst-italic fw-medium">🚀 INSPINIA 4.x is here! Now with Bootstrap 5, dark mode, and a refreshed UI.
            Upgrade today for the best experience! <a
                href="https://wrapbootstrap.com/theme/inspinia-multipurpose-admin-dashboard-template-WB0R5L90S?ref=inspinia"
                target="_blank" class="fw-semibold fst-normal text-white text-decoration-underline link-offset-3 ms-2">Buy
                Now!</a></div>
    </ngb-alert>
}
<header>

    <nav class="navbar navbar-expand-lg py-3 sticky-top {{isSticky ? 'top-scroll-up top-fixed': ''}}"
         id="landing-navbar">
        <div class="container">
            <div class="auth-brand mb-0">
                <a routerLink="/" class="logo-dark">
                    <img src="assets/images/logo-black.png" alt="dark logo" height="32">
                </a>
                <a routerLink="/" class="logo-light">
                    <img src="assets/images/logo.png" alt="logo" height="32">
                </a>
            </div>

            <button class="navbar-toggler" type="button" (click)="isCollapsed = !isCollapsed"
                    [attr.aria-expanded]="!isCollapsed" aria-controls="navbarSupportedContent"
                    aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div [ngbCollapse]="isCollapsed" class="navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav fw-medium gap-2 fs-sm mx-auto mt-2 mt-lg-0" id="navbar-example">
                    @for (item of navItems; track $index) {
                        <li class="nav-item">
                            <a class="nav-link" [class.active]="scroll.activeSection === (item.toLowerCase())"
                               (click)="scroll.scrollTo(item)" href="javascript:void(0)">{{
                                    item
                                }}</a>
                        </li>
                    }
                </ul>

                <div>
                    <button class="btn btn-link btn-icon fw-semibold text-body" type="button" (click)="toggleTheme()">
                        <ng-icon name="tablerContrast" class="ti ti-contrast fs-22"></ng-icon>
                    </button>
                    <a routerLink="/auth-sign-in" class="btn btn-link fw-semibold text-body ps-2">SIGN IN</a>
                    <a routerLink="/auth-sign-up" class="btn btn-sm btn-primary">Sign Up</a>
                </div>
            </div>
        </div>
    </nav>
</header>