@push('style-after-global')
    <style>
        #main-menu-navigation .dropdown {
            padding: 0px !important;
        }

        #main-menu-navigation .dropdown .nav-link {
            font-size: 0.8rem !important;
            padding: 0.1rem 0.85rem 0.1rem 0.85rem !important;
            min-height: 38px;
            cursor: pointer;
            border-radius: 3px;
        }

        #main-menu-navigation .dropdown .nav-link .menu-livicon {
            width: 1.2rem !important;
        }

        #main-menu-navigation .dropdown .nav-link:after {
            top: 0px;
        }

        /* dropdown menu */
        #main-menu-navigation .dropdown .dropdown-menu {
            border: none;
            padding: 0.4rem 0rem;
            min-width: 200px;
            top: 30px !important;
            border-radius: 3px;
        }

        #main-menu-navigation .dropdown .dropdown-menu a {
            font-size: 0.75rem !important;
        }

        #main-menu-navigation .dropdown .dropdown-menu a::after {
            top: 7.5px;
        }

        #main-menu-navigation .dropdown .dropdown-menu li:not(.sidebar-group-active).active a {
            border-left: 2px solid #5A8DEE !important;
        }

        #main-menu-navigation .dropdown .dropdown-menu .dropdown-submenu .dropdown-menu {
            top: 0px !important;
            left: 198px !important; /* 200px - 2px */
        }

        #main-menu-navigation .dropdown .dropdown-menu .dropdown-submenu a {
            cursor: pointer;
        }
    </style>
@endpush

<div class="header-navbar navbar-expand-sm navbar navbar-horizontal navbar-fixed navbar-light navbar-without-dd-arrow" role="navigation" data-menu="menu-wrapper">
    <div class="navbar-header d-xl-none d-block">
        <ul class="nav navbar-nav flex-row">
            <li class="nav-item mr-auto">
                <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>

            <li class="nav-item nav-toggle">
                <a class="nav-link modern-nav-toggle pr-0" data-toggle="collapse">
                    <i class="bx bx-x d-block d-xl-none font-medium-4 primary toggle-icon"></i>
                </a>
            </li>
        </ul>
    </div>

    <div class="shadow-bottom"></div>

    <div class="navbar-container main-menu-content" data-menu="menu-container">
        <ul class="nav navbar-nav" id="main-menu-navigation" data-menu="menu-navigation" data-icon-style="filled">
            {{-- dashboard --}}
            <li data-menu="" class="
                dropdown nav-item
                @if($page_name === 'Dashboard') active @endif
            ">
                <a class="nav-link" href="{{ url('admin/dashboard') }}">
                    <i class="bx bx-home-alt"></i><span data-i18n="Dashboard">Dashboard</span>
                </a>
            </li>

            {{-- activity log --}}
            @can('admin activity log page access')
                <li data-menu="" class="
                    dropdown nav-item
                    @if($page_name === 'Activity Log') active @endif
                ">
                    <a class="nav-link" href="{{ url('admin/activity-log') }}">
                        <i class="bx bx-history"></i><span data-i18n="Ip Blacklist">Activity Log</span>
                    </a>
                </li>
            @endcan

            {{-- article --}}
            @canany([
                // aritcle list
                'admin article page access',

                // add article
                'admin add article page access',
            ])
                <li class="dropdown nav-item" data-menu="dropdown">
                    <a class="dropdown-toggle nav-link">
                        <i class="bx bx-book-content"></i><span>Article</span>
                    </a>

                    <ul class="dropdown-menu">

                        {{-- article --}}
                        @can('admin article page access')
                        <li data-menu="" class="
                            dropdown nav-item
                            @if($page_name === 'Article') active @endif
                        ">
                            <a class="nav-link" href="{{ url('admin/article') }}">
                                <i class="bx bx-list-ul"></i><span data-i18n="Article">Article List</span>
                            </a>
                        </li>
                        @endcan

                        {{-- add article --}}
                        @can('admin add article page access')
                            <li data-menu="" class="
                                dropdown nav-item
                                @if($page_name === 'Add Article') active @endif
                            ">
                                <a class="nav-link" href="{{ url('admin/add-article') }}">
                                    <i class="bx bxs-edit-alt"></i><span data-i18n="Add Article">Add Article</span>
                                </a>
                            </li>
                        @endcan

                    </ul>
                </li>
            @endcanany

            {{-- Cash Advance --}}
            @canany([
                // case divorce lawsuit component
                'admin case divorce lawsuit component page access',

                // case divorce component
               'admin case divorce component page access',

                // case verzet component
                'admin case verzet component page access',

                // case voluntair component
                'admin case voluntair component page access',
            ])
                <li class="dropdown nav-item" data-menu="dropdown">
                    <a class="dropdown-toggle nav-link">
                        <i class="bx bx-dollar"></i><span>Cash Advance</span>
                    </a>

                    <ul class="dropdown-menu">

                        {{-- case divorce lawsuit component --}}
                        @can('admin case divorce lawsuit component page access')
                            <li data-menu="" class="
                                @if($page_name === 'Case Divorce Lawsuit Component') active @endif
                            ">
                                <a class="dropdown-item align-items-center" href="{{ url('admin/case-divorce-lawsuit-component') }}" data-toggle="dropdown">
                                    <i class="bx bx-cog"></i>Case Divorce Lawsuit Component
                                </a>
                            </li>
                        @endcan

                        {{-- case divorce component --}}
                        @can('admin case divorce component page access')
                            <li data-menu="" class="
                                @if($page_name === 'Case Divorce Component') active @endif
                            ">
                                <a class="dropdown-item align-items-center" href="{{ url('admin/case-divorce-component') }}" data-toggle="dropdown">
                                    <i class="bx bx-cog"></i>Case Divorce Component
                                </a>
                            </li>
                        @endcan

                        {{-- case verzet component --}}
                        @can('admin case verzet component page access')
                            <li data-menu="" class="
                                @if($page_name === 'Case Verzet Component') active @endif
                            ">
                                <a class="dropdown-item align-items-center" href="{{ url('admin/case-verzet-component') }}" data-toggle="dropdown">
                                    <i class="bx bx-cog"></i>Case Verzet Component
                                </a>
                            </li>
                        @endcan

                        {{-- case voluntair component --}}
                        @can('admin case verzet component page access')
                            <li data-menu="" class="
                                @if($page_name === 'Case Voluntair Component') active @endif
                            ">
                                <a class="dropdown-item align-items-center" href="{{ url('admin/case-voluntair-component') }}" data-toggle="dropdown">
                                    <i class="bx bx-cog"></i>Case Voluntair Component
                                </a>
                            </li>
                        @endcan

                        {{-- case radius component --}}
                        @can('admin case radius component page access')
                            <li data-menu="" class="
                                @if($page_name === 'Case Radius Component') active @endif
                            ">
                                <a class="dropdown-item align-items-center" href="{{ url('admin/case-radius-component') }}" data-toggle="dropdown">
                                    <i class="bx bx-cog"></i>Case Radius Component
                                </a>
                            </li>
                        @endcan

                    </ul>
                </li>
            @endcanany

            {{-- ip blacklist --}}
            @can('admin ip blacklist page access')
                <li data-menu="" class="
                    dropdown nav-item
                    @if($page_name === 'Ip Blacklist') active @endif
                ">
                    <a class="nav-link" href="{{ url('admin/ip-blacklist') }}">
                        <i class="bx bx-block"></i><span data-i18n="Ip Blacklist">Ip Blacklist</span>
                    </a>
                </li>
            @endcan

            {{-- link --}}
            @can('admin link page access')
                <li data-menu="" class="
                    dropdown nav-item
                    @if($page_name === 'Link') active @endif
                ">
                    <a class="nav-link" href="{{ url('admin/link') }}">
                        <i class="bx bx-link-external"></i><span data-i18n="Link">Link</span>
                    </a>
                </li>
            @endcan

            {{-- support app --}}
            @can('admin support app page access')
                <li data-menu="" class="
                    dropdown nav-item
                    @if($page_name === 'Support App') active @endif
                ">
                    <a class="nav-link" href="{{ url('admin/support-app') }}">
                        <i class="bx bx-link-external"></i><span data-i18n="Support App">Support App</span>
                    </a>
                </li>
            @endcan

            {{-- shortcut --}}
            @can('admin shortcut page access')
                <li data-menu="" class="
                    dropdown nav-item
                    @if($page_name === 'Shortcut') active @endif
                ">
                    <a class="nav-link" href="{{ url('admin/shortcut') }}">
                        <i class="bx bx-link-external"></i><span data-i18n="Shortcut">Shortcut</span>
                    </a>
                </li>
            @endcan

            {{-- video --}}
            @can('admin video page access')
                <li data-menu="" class="
                    dropdown nav-item
                    @if($page_name === 'Video') active @endif
                ">
                    <a class="nav-link" href="{{ url('admin/video') }}">
                        <i class="bx bxs-videos"></i><span data-i18n="Link">Video</span>
                    </a>
                </li>
            @endcan

            {{-- menu --}}
            @can('admin menu page access')
                <li data-menu="" class="
                    dropdown nav-item
                    @if($page_name === 'Menu') active @endif
                ">
                    <a class="nav-link" href="{{ url('admin/menu') }}">
                        <i class="bx bx-menu"></i><span data-i18n="Menu">Menu</span>
                    </a>
                </li>
            @endcan

            {{-- permission --}}
            {{-- @can('admin permission page access')
                <li data-menu="" class="
                    dropdown nav-item
                    @if($page_name === 'Permission') active @endif
                ">
                    <a class="nav-link" href="{{ url('admin/permission') }}">
                        <i class="bx bx-lock"></i><span data-i18n="Satisfaction Poll">Permission</span>
                    </a>
                </li>
            @endcan --}}

            {{-- role --}}
            {{-- @can('admin role page access')
                <li data-menu="" class="
                    dropdown nav-item
                    @if($page_name === 'Role') active @endif
                ">
                    <a class="nav-link" href="{{ url('admin/role') }}">
                        <i class="bx bx-user-check"></i><span data-i18n="Role">Role</span>
                    </a>
                </li>
            @endcan --}}

            {{-- satisfaction poll --}}
            @can('admin satisfaction poll page access')
                <li data-menu="" class="
                    dropdown nav-item
                    @if($page_name === 'Satisfaction Poll') active @endif
                ">
                    <a class="nav-link" href="{{ url('admin/satisfaction-poll') }}">
                        <i class="bx bx-pie-chart"></i><span data-i18n="Satisfaction Poll">Satisfaction Poll</span>
                    </a>
                </li>
            @endcan

            {{-- user --}}
            @can('admin user page access')
                <li data-menu="" class="
                    dropdown nav-item
                    @if($page_name === 'User') active @endif
                ">
                    <a class="nav-link" href="{{ url('admin/user') }}">
                        <i class="bx bxs-group"></i><span data-i18n="User">User</span>
                    </a>
                </li>
            @endcan

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