<script>
    window.Lara.navigation = {
        categories: @json($categories)
    };
</script>

{{-- id="categories-navigation" --}}
 <div class="header__nav d-none d-lg-flex" data-js-position-desktop="menu">
    <nav class="menu js-menu js-position" data-js-position-name="menu">
        <div class="menu__panel menu__list menu__level-01 d-flex flex-column flex-lg-row flex-lg-wrap menu__panel--bordered">
            <div class="menu__curtain d-none position-lg-absolute"></div>
                
            {{-- @mouseenter="showCategoriesDropdown()" --}}
            <button style="border-radius:8px;" class="navigation-categories-button d-none d-lg-block">
                <span class="navigation-categories-button-ui-a3" style="border-radius:8px;">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="ui-d6">
                        <path fill="currentColor" d="M5 6a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm2 0a1 1 0 0 1 1-1h12a1 1 0 1 1 0 2H8a1 1 0 0 1-1-1Zm0 6a1 1 0 0 1 1-1h12a1 1 0 1 1 0 2H8a1 1 0 0 1-1-1Zm1 5a1 1 0 1 0 0 2h6a1 1 0 1 0 0-2H8Zm-4-4a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm1 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path>
                    </svg>
                    <span class="ui-e0 mr-2">{{ __('Categories') }}</span>
                    @include('web.themes.shella.layouts.additional.navigation.dropdown-icons')
                </span>
            </button>

            {{-- Categories dropdown --}}
            {{-- @include('web.themes.shella.layouts.additional.navigation.categories-dropdown') --}}

            {{-- Navigation Menu dropdown Item --}}
            @foreach($categories as $category)
                @include('web.themes.shella.layouts.additional.navigation.mobile-menu-dropdown-item', [
                    'category' => $category
                ])
            @endforeach
            

            {{-- Navigation Menu Link Item --}}
            {{-- @include('web.themes.shella.layouts.additional.navigation.menu-link-item') --}}
        </div>
    </nav>
</div>
