<div class="topbar d-flex align-items-center">
    <nav class="navbar navbar-expand">
        <div class="mobile-toggle-menu"><i class='bi bi-list'></i>
        </div>
        <div class="search-bar flex-grow-1">
            <h5 style="font-size: 16px" class="mt-2">{{ lang.app_name }}</h5>
        </div>
        <div class="top-menu ms-auto">
            <ul class="navbar-nav align-items-center">
                <li class="nav-item mobile-search-icon">
                    <a class="nav-link" href="#">	<i class='bi bi-search'></i>
                    </a>
                </li>
            </ul>
        </div>

        <div class="user-box dropdown">
            <a class="d-flex align-items-center nav-link dropdown-toggle dropdown-toggle-nocaret" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                <img src="{{ assets('assets/images/avatar.jpg')}}" class="user-img" alt="user avatar">
                <div class="user-info ps-3">
                    <p class="user-name mb-0">{{ auth.user.username }}</p>
                </div>
            </a>
            <ul class="dropdown-menu dropdown-menu-end">
                <li><a class="dropdown-item" href="{{route('profile')}}"><i class="bi bi-person"></i><span>{{ lang.profile }}</span></a>
                </li>
                <li><a class="dropdown-item" href="{{route('change.password')}}"><i class="bi bi-lock"></i><span>{{ lang.change_password }}</span></a>
                </li>
                <li>
                    <div class="dropdown-divider mb-0"></div>
                </li>
                <li><a class="dropdown-item" href="{{route('logout')}}"><i class='bi bi-unlock'></i><span>{{ lang.logout }}</span></a>
                </li>
            </ul>
        </div>
    </nav>
</div>
