<div class="o-overlay-menu  js-overlay-menu" id="overlay-menu" hidden>

    <div class="o-overlay-menu__main">

        <div class="o-overlay-menu__bar">
            <a class="o-overlay-menu__logo" href="{{ $links->home->route ?? '/' }}" tabindex="-99">
                <img class="o-overlay-menu__img" alt="logo" src="/img/logo-on-dark.svg">
            </a>

            <div class="o-overlay-menu__toggle">
                <button class="c-close  js-overlay-menu-trigger" aria-expanded="true" aria-controls="overlay-menu" tabindex="-1"></button>
            </div>
        </div>

        <nav class="o-overlay-menu__nav" role=navigation>
            <ul class="o-overlay-menu__list">

                @foreach(config('site.mobile_navigation') as $navItem)
                    @continue(empty($links->{$navItem}))

                    <li class="o-overlay-menu__item @if(isset($page->code_name) && $page->code_name == $navItem) is-active @endif">
                        <a class="o-overlay-menu__link" href="{{ $links->{$navItem}->route }}" @if(!empty($navPreventTab)) tabindex="-1" @endif>
                            {{ $links->{$navItem}->name }}
                        </a>
                    </li>
                @endforeach

                <li class="o-overlay-menu__item  o-overlay-menu__item--advice">
                    @if(empty($component->link) && isset($links->advice))
                        @include('components.button', [ 'buttonLink' => $links->advice->route, 'buttonText' => !empty($component->button) ? $component->button : 'Adviesgesprek', 'modifiers' => ['icon']])
                    @endif
                </li>

            </ul>



        </nav>

    </div>

    <div class="o-overlay-menu__shape">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 114.954"><path d="M0,82.135l1,.047c536.287,25.689,719.319,44.831,1320.093,23.75Q1671.387,93.64,1920,18.6V0H0Z" fill="currentColor"/></svg>
    </div>

</div>