<!-- Stable Bootstrap 5 Navbar -->
<nav class="navbar navbar-expand-lg notika-navbar">
    <div class="container">
        <ul class="navbar-nav w-100 justify-content-center">

            <!-- Home Dropdown -->
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle{{#if isHome}} active{{/if}}" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                    <i class="fa-solid fa-house"></i>
                    <span>Home</span>
                </a>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="index.html">Dashboard One</a></li>
                    <li><a class="dropdown-item" href="index-2.html">Dashboard Two</a></li>
                    <li><a class="dropdown-item" href="index-3.html">Dashboard Three</a></li>
                    <li><a class="dropdown-item" href="index-4.html">Dashboard Four</a></li>
                    <li><hr class="dropdown-divider"></li>
                    <li><a class="dropdown-item" href="analytics.html">Analytics</a></li>
                    <li><a class="dropdown-item" href="widgets.html">Widgets</a></li>
                </ul>
            </li>

            <!-- Email Dropdown -->
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle{{#if isEmail}} active{{/if}}" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                    <i class="fa-solid fa-envelope"></i>
                    <span>Email</span>
                </a>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="inbox.html">Inbox</a></li>
                    <li><a class="dropdown-item" href="view-email.html">View Email</a></li>
                    <li><a class="dropdown-item" href="compose-email.html">Compose Email</a></li>
                </ul>
            </li>

            <!-- Interface Dropdown -->
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle{{#if isInterface}} active{{/if}}" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                    <i class="fa-solid fa-pen-to-square"></i>
                    <span>Interface</span>
                </a>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="animations.html">Animations</a></li>
                    <li><a class="dropdown-item" href="google-map.html">Google Map</a></li>
                    <li><a class="dropdown-item" href="data-map.html">Data Maps</a></li>
                    <li><a class="dropdown-item" href="code-editor.html">Code Editor</a></li>
                    <li><a class="dropdown-item" href="image-cropper.html">Images Cropper</a></li>
                    <li><a class="dropdown-item" href="wizard.html">Wizard</a></li>
                </ul>
            </li>

            <!-- Charts Dropdown -->
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle{{#if isCharts}} active{{/if}}" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                    <i class="fa-solid fa-chart-column"></i>
                    <span>Charts</span>
                </a>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="flot-charts.html">Flot Charts</a></li>
                    <li><a class="dropdown-item" href="bar-charts.html">Bar Charts</a></li>
                    <li><a class="dropdown-item" href="line-charts.html">Line Charts</a></li>
                    <li><a class="dropdown-item" href="area-charts.html">Area Charts</a></li>
                </ul>
            </li>

            <!-- Tables Dropdown -->
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle{{#if isTables}} active{{/if}}" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                    <i class="fa-solid fa-table-columns"></i>
                    <span>Tables</span>
                </a>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="normal-table.html">Normal Table</a></li>
                    <li><a class="dropdown-item" href="data-table.html">Data Table</a></li>
                </ul>
            </li>

            <!-- Forms Dropdown -->
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle{{#if isForms}} active{{/if}}" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                    <i class="fa-solid fa-file-lines"></i>
                    <span>Forms</span>
                </a>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="form-elements.html">Form Elements</a></li>
                    <li><a class="dropdown-item" href="form-components.html">Form Components</a></li>
                    <li><a class="dropdown-item" href="form-examples.html">Form Examples</a></li>
                </ul>
            </li>

            <!-- Components Dropdown -->
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle{{#if isComponents}} active{{/if}}" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                    <i class="fa-solid fa-cube"></i>
                    <span>Components</span>
                </a>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="notification.html">Notifications</a></li>
                    <li><a class="dropdown-item" href="alert.html">Alerts</a></li>
                    <li><a class="dropdown-item" href="modals.html">Modals</a></li>
                    <li><a class="dropdown-item" href="buttons.html">Buttons</a></li>
                    <li><a class="dropdown-item" href="tabs.html">Tabs</a></li>
                    <li><a class="dropdown-item" href="accordion.html">Accordion</a></li>
                    <li><a class="dropdown-item" href="dialog.html">Dialogs</a></li>
                    <li><a class="dropdown-item" href="popovers.html">Popovers</a></li>
                    <li><a class="dropdown-item" href="tooltips.html">Tooltips</a></li>
                    <li><a class="dropdown-item" href="dropdown.html">Dropdowns</a></li>
                </ul>
            </li>

            <!-- Pages Dropdown -->
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle{{#if isPages}} active{{/if}}" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                    <i class="fa-solid fa-headset"></i>
                    <span>Pages</span>
                </a>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="contact.html">Contact</a></li>
                    <li><a class="dropdown-item" href="invoice.html">Invoice</a></li>
                    <li><a class="dropdown-item" href="typography.html">Typography</a></li>
                    <li><a class="dropdown-item" href="color.html">Color</a></li>
                    <li><a class="dropdown-item" href="login-register.html">Login Register</a></li>
                    <li><a class="dropdown-item" href="404.html">404 Page</a></li>
                </ul>
            </li>

        </ul>
    </div>
</nav>
<!-- End Stable Navigation -->