<div id="mobile-navigation">

    <div class="bar">
        <div class="toggle-menu" id="mobile-menu-trigger">
            <div class="icon">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
        <div class="logo">
            <a href="/">
                @include('site.svg.logo')
            </a>
        </div>
        <div class="grid-col menu-right">
            @include('shop.partials.userMenu')
            @include('shop.partials.shoppingCart.shoppingCartButton')
        </div>
    </div>

    <div class="shader" id="mobile-shader"></div>

    <div class="menu">

        <nav>
            <span id="mobile-close" class="close"></span>

            <div class="logo-wrapper">
                <a href="/" class="logo">
                    {{--<img alt="logo" src="/img/zelfverkopen_nl.svg"/>--}}
                </a>
            </div>

            <div class="menu-list">
                <ul>
                    @foreach(\Config::get('site.mobile_navigation') as $item)
                        @if(isset($links->{$item}))
                            <li @if( (isset($page->code_name) && $page->code_name == $item) )  class="active" @endif>
                                <a href="/@if($item != 'home'){{$links->{$item}->route}}@endif">{{$links->{$item}->name}}</a>
                            </li>
                        @endif
                    @endforeach
                </ul>

                @if(isset($categories))
                    <ul>
                        <li>
                            <h4>Categorieën</h4>
                            <ul>

                                @foreach($categories->children as $categoryItem)
                                    @if(isset($categoryItem->translation))
                                        @php $iso = \App::getSite()->languages->where('id', "=", $categoryItem->translation->language_id)->first()->iso_2; @endphp
                                        <li data-id="{{$categoryItem->id}}" {{ ( !empty($category) && ((string)$categoryItem->code_name === (string)$category->code_name || (string)$categoryItem->code_name === (string)$category->getParent()->code_name)) ? 'class=open' : ''}}>
                                            {{--<a href="/{{$iso}}/{{$categoryItem->translation->slug}}" class="subItem">--}}
                                            <a href="/{{$iso}}/{{$categoryItem->translation->slug}}" class="subItem">
                                                {{$categoryItem->translation->name}}
                                            </a>

                                            @if(count($categoryItem->children) > 0 && \Auth::check())
                                                <ul data-parent-id="{{$categoryItem->id}}" {{ !empty($category) && ((string)$categoryItem->code_name === (string)$category->code_name || (string)$categoryItem->code_name === (string)$category->getParent()->code_name) ? 'class=open' : ''}}>
                                                    @foreach($categoryItem->children as $subkey => $subcategoryItem)
                                                        @if(isset($subcategoryItem->translation))
                                                            <li {{ !empty($category) && $subcategoryItem->code_name === $category->code_name  ? 'class=active' : ''}}>
                                                                <a href="/{{$iso}}/{{$categoryItem->translation->slug}}/{{$subcategoryItem->translation->slug}}">
                                                                    {{$subcategoryItem->translation->name}}
                                                                </a>
                                                            </li>
                                                        @endif
                                                    @endforeach
                                                </ul>
                                            @endif
                                        </li>
                                    @endif
                                @endforeach

                            </ul>
                        </li>
                    </ul>
                @endif
            </div>
        </nav>
    </div>
</div>