{{-- mobile main menu --}}
@push('style-after-global')
<style>
.btn-sistem-panjar {
    border-color: #056e4f !important;
    background-color: #056e4f !important;
    color: #fff;
}

.main-menu.menu-light .navigation > li.active:not(.sidebar-group-active) > a {
  background: rgba(90, 141, 238, 0.15);
  color: #056e4f;
  border-radius: 0.267rem;
}

.main-menu.menu-light .navigation > li ul .active > a {
  color: #056e4f;
}
</style>
@endpush

<div class="nav-mobile-responsive">
<div class="navbar-expand-sm navbar navbar-horizontal navbar-fixed navbar-light navbar-without-dd-arrow" role="navigation" data-menu="menu-wrapper" style="width: auto;">
    <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('') }}">
                    <h2 class="brand-text mb-0" style="color: #056e4f">Menu</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>

    {{-- menu content --}}
    <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">

            <li class="nav-item">
                <a class="nav-link" href="{{ url('') }}">
                    <span data-i18n="Dashboard">Beranda</span>
                </a>
            </li>

            @foreach ($menus as $menu)

                @foreach ($menu as $data)
                    <li>
                        <li class="dropdown nav-item" data-menu="dropdown">
                            <a class="dropdown-toggle nav-link" href="{{  url($data->slug) }}" data-toggle="dropdown">
                                </i><span>{{ $data->name }}</span>
                            </a>
                        <ul class="dropdown-menu">

                        @if(count($data->childrens) > 0)
                            <ul>

                                @foreach ($data->childrens as $children)
                                    <li class="dropdown dropdown-submenu" data-menu="dropdown-submenu">
                                        <a class="dropdown-item align-items-center dropdown-toggle" href="{{ url($children->slug) }}" data-toggle="dropdown">
                                            <i class="bx bx-right-arrow-alt"></i>{{ $children->name }}
                                        </a>

                                        @foreach ($children->childrens as $child)
                                            <ul class="dropdown-menu">
                                                <li data-menu="" @if(in_array($slug, array( 'Sejarah' , ))) class="active" @endif>
                                                    <a class="dropdown-item align-items-center" href="{{ url($child->slug) }}"
                                                        data-toggle="dropdown">
                                                        <i class="bx bx-right-arrow-alt"></i>{{ $child->name }}
                                                    </a>
                                                </li>
                                            </ul>
                                        @endforeach

                                    </li>
                                @endforeach

                            </ul>
                        @endif
                    </li>
                @endforeach

            @endforeach
        </ul>

        {{-- button hitung panjar --}}
        <div class="text-center">
            <a href="{{ url('/perhitungan-panjar-biaya') }}">
                <button type="button" class="btn btn-sm btn-sistem-panjar mt-2">
                    <span class="align-middle ml-25"><i class="bx bx-money"></i>&nbsp;@lang('menu.HitungPanjar')</span>
                </button>
            </a>
        </div>

    </div>

    <!-- /horizontal menu content-->
</div>
<!-- END: Main Menu-->
</div>