@push('style-after-global')
    <style>
        .header-navbar {
            position: static !important;
            min-height: 3rem;
        }

        /* container */
        .horizontal-layout .header-navbar .navbar-container {
            padding-left: 1rem !important;
            padding-right: 1rem !important;
        }

        @media (max-width: 1199.98px) {
            .horizontal-layout .header-navbar .navbar-container {
                padding-left: 1rem !important;
                padding-right: 1rem !important;
            }
        }

        @media (max-width: 991.98px) {
            .horizontal-layout .header-navbar .navbar-container {
                padding-left: 1rem !important;
            }
        }

        @media (max-width: 576px) {
            .horizontal-layout .header-navbar .navbar-container {
                padding-left: 1rem !important;
                padding-right: 1rem !important;
            }
        }

        /* middle item */
        .header-navbar .navbar-header {
            margin-left: -130px !important;
        }

        .header-navbar .brand-logo {
            height: 24px !important;
            width: 24px !important;
        }

        .header-navbar .brand-text {
            font-size: 1.2rem !important;
        }

        /* left item */
        .header-navbar .nav-menu-main {
            padding: 0px 0px 0px 0px !important;
            position: static !important;
        }

        .header-navbar .nav-menu-main i {
            vertical-align: middle !important;
            font-size: 1.4rem !important;
        }

        @media only screen and (max-width: 991px) {
            .header-navbar .nav-menu-main i {
                margin-top: 10px;
            }
        }

        /* right item */
        .header-navbar .nav-link-expand i {
            font-size: 1.2rem !important;
        }

        .header-navbar .dropdown-user-link {
            padding: 0.5rem 0rem 0.5rem 0rem !important;
        }

        .header-navbar .dropdown-user-link .user-name {
            font-size: 0.8rem;
        }

        .header-navbar .dropdown-menu-right {
            top: 32px !important;
            right: -4px !important;
            font-size: 0.6rem !important;
            border: none;
            border-radius: 3px;
        }

        @media (max-width: 576px) {
            .header-navbar .dropdown-menu-right {
                top: 36px !important;
                right: 0px !important;
            }
        }
    </style>
@endpush

<nav class="header-navbar navbar-expand-lg navbar navbar-with-menu navbar-fixed bg-primary navbar-brand-center">
    <div class="navbar-header d-xl-block d-none">
        <ul class="nav navbar-nav flex-row">
            <li class="nav-item">
                <a class="navbar-brand" href="{{ url('admin/dashboard') }}">
                    {{-- <div class="brand-logo"></div> --}}
                    <h2 class="brand-text mb-0">Pengadilan Agama Yogyakarta</h2>
                </a>
            </li>
        </ul>
    </div>

    <div class="navbar-wrapper">
        <div class="navbar-container content">
            <div class="navbar-collapse" id="navbar-mobile">
                <div class="mr-auto float-left bookmark-wrapper d-flex align-items-center">
                    <ul class="nav navbar-nav">
                        <li class="nav-item mobile-menu mr-auto">
                            <a class="nav-link nav-menu-main menu-toggle" href="#"><i class="bx bx-menu-alt-right"></i></a>
                        </li>
                    </ul>
                </div>

                <ul class="nav navbar-nav float-right d-flex align-items-center">
                    <li class="nav-item d-none d-lg-block">
                        <a class="nav-link nav-link-expand" style="padding: 0rem !important;">
                            <i class="ficon bx bx-fullscreen"></i>
                        </a>
                    </li>

                    <li class="dropdown dropdown-user nav-item" style="margin-left: 1rem !important;">
                        <a class="dropdown-toggle nav-link dropdown-user-link" href="#" data-toggle="dropdown">
                            <div class="user-nav d-lg-flex d-none">
                                <span class="user-name">{{ $user_name }}</span>
                                {{-- <span class="user-status">Available</span> --}}
                            </div>

                            <span>
                                <img
                                    class="round"
                                    src="{{ url($user_photo_path) }}"
                                    alt=""
                                    height="28"
                                    width="28"
                                    onerror="this.onerror=null;this.src='{{ url('libraries/frest-admin_admin/app-assets/images/placeholders/placeholder-34x34.jpg') }}';"
                                />
                            </span>
                        </a>

                        <div class="dropdown-menu dropdown-menu-right">

                            <a class="dropdown-item" href="{{ url('admin/edit-profile') }}">
                                <i class="bx bx-user mr-50" style="font-size: 0.8rem;"></i> Edit Profile
                            </a>

                            <a class="dropdown-item" href="#" onclick="logout()">
                                <i class="bx bx-power-off mr-50" style="font-size: 0.8rem;"></i> Logout
                            </a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</nav>