<nav class="navbar navbar-expand navbar-light navbar-bg">
    <a class="sidebar-toggle js-sidebar-toggle">
        <i class="hamburger align-self-center"></i>
    </a>

    <div class="navbar-collapse collapse">
        <ul class="navbar-nav navbar-align">

            <!-- Notification -->
            <li class="nav-item dropdown">
                <a class="nav-icon dropdown-toggle" href="#" id="alertsDropdown" data-bs-toggle="dropdown">
                    <div class="position-relative">
                        <i class="align-middle" data-feather="bell"></i>
                        <span class="indicator">4</span>
                    </div>
                </a>
            </li>


            <!-- User Profile -->
            <li class="nav-item dropdown">

                <!-- Mobile Icon -->
                <a class="nav-icon dropdown-toggle d-inline-block d-sm-none" href="#" data-bs-toggle="dropdown">
                    <i class="align-middle" data-feather="settings"></i>
                </a>


                <!-- Desktop User -->
                <a class="nav-link dropdown-toggle d-none d-sm-inline-block" href="#" data-bs-toggle="dropdown">

                    <img src="{{ Auth::user()->profile_image
                        ? asset('uploads/profile/' . Auth::user()->profile_image)
                        : asset('dashboard_assets/img/avatars/avatar.jpg') }}"
                        class="avatar img-fluid rounded me-1" alt="User Image">

                    <span class="text-dark">
                        {{ Auth::user()->name }}
                    </span>

                </a>


                <!-- Dropdown Menu -->
                <div class="dropdown-menu dropdown-menu-end">

                    <a class="dropdown-item" href="#">
                        <i class="align-middle me-1" data-feather="user"></i>
                        Profile
                    </a>


                    <a class="dropdown-item" href="#">
                        <i class="align-middle me-1" data-feather="settings"></i>
                        Settings
                    </a>


                    <div class="dropdown-divider"></div>


                    <!-- Logout -->
                    <form method="POST" action="{{ route('logout') }}">
                        @csrf

                        <button type="submit" class="dropdown-item">
                            <i class="align-middle me-1" data-feather="log-out"></i>
                            Logout
                        </button>

                    </form>


                </div>

            </li>

        </ul>
    </div>
</nav>
