@if(Auth::check())
    <nav class="navbar navbar-dark px-0 top_layer_ui sticky-top nav-gradient">
        <div class="container-fluid d-flex">
            <a id='navbar-brand' href="{{config('app.url')}}"></a>
            {{--            <img src="{{ asset('/assets/images/cl/_main/CapitaStar logo.png')}}" height="45"/>--}}

            <div class="font-weight-bold text-center px-1" style="position: absolute; left:50%;top: 50%; transform: translate(-50%,-50%);">
                @if(data_get($uiConfigs ?? null, 'showUserName', true))
                    Hi <span class='user_name'>{{auth()->user()->name ?? ''}}</span>
                @endif
            </div>

            <div>
                @if($extra_btn)
                    {!! $extra_btn !!}
                @endif

                <button class="navbar-toggler border-0 default-font-color" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
                    {{--                <span class="navbar-toggler-icon"></span>--}}
                    <i class="fas fa-bars"></i>
                </button>
            </div>
        </div>
    </nav>

@else
    <nav class="navbar d-block navbar-dark py-2 px-0 sticky-top nav-gradient" >
        <div class="container-fluid px-0">
            <div class="row row-cols-3 w-100 mx-auto">

                <div class="col text-left px-0">
                </div>

                <div class="col text-center px-0">
                    @if(config('sys.is_show_nav_logo'))
                        <a id='navbar-brand' href="{{config('app.url')}}" class="mx-auto"></a>
                        {{--           style="position: absolute; left:50%;top: 50%; transform: translate(-50%,-50%);">--}}
                        {{--                    <img src="{{ asset(config('sys.client.logo_white')) }}"--}}
                        {{--                        height="{{ config('sys.logo_dimension.height') ?? '50' }}"--}}
                        {{--                        width="{{ config('sys.logo_dimension.width') ?? '100' }}"--}}

                        {{--                        />--}}
                    @endif
                </div>
                <div class="col text-right px-0">
                    <button class="mr-2 navbar-toggler border-0" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                </div>
            </div>

        </div>
    </nav>

@endif
<div id="navbarToggleExternalContent"  class="collapse z-10 position-fixed w-100 bg-nav"  style="top: 54px;">
    <div class="p-2" style="background:rgba(0,0,0,0.25)">
        <ul class="navbar-nav mr-auto">
            @foreach( getMenus() as $menu)
                @if($menu['auth'] ? Auth::check() : true)
                    <li class="nav-item active">
                        <a class="nav-link text-center" aria-current="page" href="{{$menu['url']}}" alt="{{$menu['title']}}" {{$menu['new_tab'] ? 'target="_blank"':''}}>{{$menu['title']}}</a>
                    </li>
                @endif
            @endforeach

        </ul>
    </div>

</div>