{{-- Logo and burger container --}}
<div id="navigation-drip" class="navigation-drip">
    <a class="logo" href="/">
        <svg class="portrait" id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 78">
            <style>.st2{fill:#fff}</style>
            <path class="st2" d="M3 70.5l4-5.3h3.5L5.8 71l4.8 6.1H6.9L3 71.9v5.2H0V65.2h3v5.3zm11.7 6.9c-2.7 0-4.7-1.7-4.7-4.7s2.1-4.7 4.8-4.7c2.7 0 4.7 1.7 4.7 4.7s-2.1 4.7-4.8 4.7zm.1-7.2c-1.2 0-1.8 1-1.8 2.5s.6 2.4 1.8 2.4c1.2 0 1.8-.9 1.8-2.5 0-1.4-.6-2.4-1.8-2.4zm16.9 6.9v-5.2c0-1.1-.5-1.4-1.2-1.4-.6 0-1.1.3-1.4.6v6h-2.9v-5.2c0-1.1-.5-1.4-1.2-1.4-.6 0-1.1.2-1.4.5v6.1h-2.9v-8.7l2.9-.4v1.2c.8-.8 1.7-1.3 2.8-1.3 1.1 0 2.1.6 2.5 1.6.8-.9 1.9-1.6 3.1-1.6 1.7 0 2.8 1.2 2.8 3.1v6.1h-3.1zm15.5 0v-5.2c0-1.1-.5-1.4-1.2-1.4-.6 0-1.1.3-1.4.6v6h-2.9v-5.2c0-1.1-.5-1.4-1.2-1.4-.6 0-1.1.2-1.4.5v6.1h-2.9v-8.7L39 68v1.2c.8-.8 1.7-1.3 2.8-1.3 1.1 0 2.1.6 2.5 1.6.8-.9 1.9-1.6 3.1-1.6 1.7 0 2.8 1.2 2.8 3.1v6.1h-3zm9.2-1.1c-.6.7-1.3 1.3-2.5 1.3-1.5 0-2.7-1.1-2.7-2.4 0-1.7 1.3-3 5.2-3.1v-.2c0-.9-.5-1.3-1.6-1.3-.9 0-2 .4-3 .9l-.6-2.2c.9-.5 2.4-1 4.1-1 3.1 0 4.1 1.4 4 3.9v2.6c0 .6.1.7.7.7l-.3 2.1c-1.9.2-2.9-.3-3.3-1.3zm0-2.9c-1.8.2-2.5.6-2.5 1.3 0 .6.5.9 1.1.9.6 0 1.1-.2 1.4-.6v-1.6zm2.9-35C57.9 28 52.5 22 43.2 20c4.1-3 7.7-2.9 10.8.2l2.6-2.6c1-1 1.1-2 0-2.9-8.1-6.1-16.2-6.6-24.2-1.4.8-5 3.4-7.5 7.8-7.5V2.1c0-1.5-.6-2.2-2-2.1C28 1.5 22 6.8 20 16.2c-3-4.1-2.9-7.7.2-10.8l-2.6-2.6c-1-1-2-1.2-2.9 0C8.6 10.9 8.1 19 13.3 27c-5-.8-7.5-3.4-7.5-7.8H2.1c-1.5 0-2.2.6-2.1 2 1.4 10.1 6.8 16.1 16.1 18.1-4.1 3-7.7 2.9-10.8-.2l-2.6 2.6c-1 1-1.2 2-.1 2.9 8.1 6.1 16.2 6.6 24.2 1.4-.8 5-3.4 7.5-7.8 7.5v3.7c0 1.5.6 2.2 2 2.1 10.1-1.4 16.1-6.8 18.1-16.1 3 4.1 2.9 7.7-.2 10.8l2.6 2.6c1 1 2 1.2 2.9.1 6.1-8.1 6.6-16.2 1.4-24.2 5 .8 7.5 3.4 7.5 7.8H57c1.7-.2 2.5-.7 2.3-2.2zm-24.5-8.6c0 6.5-2.8 10.4-8.3 11.6-1.4.1-2-.6-2-2.1v-1.7c2.6 0 5.1-1.8 5.1-5.4h-3c-1.5 0-2.1-.6-2.1-2v-6.2c0-1.5.6-2.1 2-2.1h6.2c1.5 0 2 .6 2 2.1v5.8z"/>
        </svg>
        <svg class="landscape" id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 523.9 170.1">
            <style>.st3{fill:#fff}</style>
            <path class="st3" d="M252.2 50.1h-18.9l-21.6 28.7h-.1V50.1H195v65h16.5V86.5h.1l21.4 28.6h19.8l-26.3-33.3 25.7-31.7z"/>
            <path class="st3" d="M276.5 65.1c-14.7 0-26.3 9.5-26.3 25.9s11.1 25.6 25.7 25.6c14.5 0 26.2-9.7 26.2-25.9S291 65.1 276.5 65.1zm-.4 39.3c-6.6 0-10.1-5.2-10.1-13.4 0-8.3 3.4-13.6 10-13.6s10.1 5.4 10.1 13.5c0 8.3-3.4 13.5-10 13.5zm93.5-39.3c-6.6 0-12.3 3.4-16.8 8.6-2.3-5.6-7.6-8.6-13.6-8.6-6.3 0-11.1 2.8-15.4 7.2v-6.8l-16 2V115h16V81.7c2-1.7 4.6-2.9 7.8-2.9 4.1 0 6.7 2 6.7 7.8v28.5h16V81.9c1.9-1.7 4.6-3.1 7.8-3.1 4.1 0 6.6 2 6.6 7.8v28.5h16V81.9c0-10.4-5.8-16.8-15.1-16.8zm85 0c-6.6 0-12.3 3.4-16.8 8.6-2.3-5.6-7.6-8.6-13.6-8.6-6.3 0-11.1 2.8-15.4 7.2v-6.8l-16 2V115h16V81.7c2-1.7 4.6-2.9 7.8-2.9 4.1 0 6.7 2 6.7 7.8v28.5h16V81.9c1.9-1.7 4.6-3.1 7.8-3.1 4.1 0 6.6 2 6.6 7.8v28.5h16V81.9c0-10.4-5.7-16.8-15.1-16.8zm65.3 35.5l.1-14.4c.2-13.5-5.3-21.1-22.1-21.1-9.2 0-17.2 3-22.3 5.7l3.3 11.8c5.6-2.8 11.4-4.9 16.4-4.9 5.9 0 8.5 2.3 8.5 7.4v.9c-21.7.6-28.6 8-28.6 17.2 0 7.5 6.4 13.4 14.8 13.4 6.7 0 10.5-3.3 13.9-7.4h.3c2.2 5.3 7.4 8.1 17.9 6.8l1.6-11.4c-3.1-.3-3.8-.6-3.8-4zm-15.9 2.2c-1.7 1.9-4.3 3.2-7.5 3.2-3.5 0-6-2.1-6-5.2 0-4.3 3.6-6.1 13.5-7.3v9.3zm-334 6.5c-4.1-28.9-19.6-46.2-46.3-52 11.7-8.5 22-8.3 30.9.6l7.5-7.5c2.9-2.9 3.2-5.6 0-8.3-23.3-17.5-46.5-18.8-69.4-4.1 2.3-14.2 9.7-21.4 22.3-21.4V6.1c0-4.2-1.6-6.4-5.8-6-28.9 4.1-46.2 19.6-52 46.3-8.5-11.7-8.3-22 .6-30.9L50.5 8c-3-3-5.7-3.4-8.4-.1C24.5 31.2 23.2 54.3 38 77.3 23.7 75 16.6 67.6 16.6 55H6.1c-4.2 0-6.4 1.6-6 5.8 4.1 28.9 19.6 46.2 46.2 51.9-11.7 8.5-22 8.3-30.9-.6L8 119.6c-3 3-3.4 5.7-.1 8.4 23.3 17.5 46.5 18.8 69.4 4.1-2.3 14.2-9.7 21.4-22.3 21.4V164c0 4.2 1.6 6.4 5.8 6 28.9-4.1 46.1-19.6 51.9-46.3 8.5 11.7 8.3 22-.6 30.9l7.4 7.4c3 3 5.7 3.4 8.4.1 17.5-23.4 18.8-46.5 4.1-69.4 14.3 2.3 21.4 9.7 21.4 22.3H164c4.2.1 6.4-1.5 6-5.7zM99 85.2c0 17.8-7.6 28.3-22.6 31.4-3.9.3-5.4-1.8-5.4-5.7v-4.7c7.1 0 13.8-4.8 13.8-14.7h-8.1c-4 0-5.7-1.5-5.7-5.5V69.3c0-4 1.5-5.7 5.5-5.7h16.9c4 0 5.5 1.7 5.5 5.7l.1 15.9z"/>
        </svg>
    </a>
    <div class="burger-container">
        <div class="burger-button" id="toggle-navigation">
            @include('site.svg.burger')
        </div>
    </div>
</div>

{{-- Drip overlay for animation --}}
<div class="navigation-overlay-container">
    <div class="drip"></div>
</div>

{{-- Close navigation button, outside nav to prevent scrolling on mobile --}}
<div id="close-navigation" class="close"></div>

{{-- Navigation: todo: refactor --}}
<nav class="main">

    {{-- Scrolling content (on mobile) --}}
    <div class="scroller">

        <ul>
            <li @if(Request::path() == '/') class="active" @endif >
                <a data-name="home" href="/" >Home</a>
            </li>
            <li @if(starts_with(Request::path(),'over-ons')) class="active" @endif >
                <a data-name="about" href="/over-ons">Over ons</a>
            </li>
            <li @if(starts_with(Request::path(),'cases')) class="active" @endif >
                <a data-name="cases" href="/cases">Cases</a>
            </li>
            <li @if(starts_with(Request::path(),'aanpak')) class="active" @endif >
                <a data-name="process" href="/aanpak">Aanpak</a>
            </li>
            <li @if(starts_with(Request::path(),'diensten')) class="active" @endif >
                <a data-name="services" href="/diensten">Diensten</a>
                <ul>
                @foreach(KommaServices::all() as $count => $service)
                    <li @if(starts_with(Request::path(),'diensten/' . $service->slug)) class="active" @endif >
                        <a href="/diensten/{{ $service->slug }}">{{ $service->name }}</a>
                    </li>

                    @if($count == 3)
                        </ul><ul>
                        @endif
                @endforeach
                </ul>
            </li>
            <li @if(starts_with(Request::path(),'referenties')) class="active" @endif >
                <a data-name="testimonials" href="/referenties">Referenties</a>
            </li>
            <li @if(starts_with(Request::path(),'contact')) class="active" @endif >
                <a data-name="contact" href="/contact">Contact</a>
            </li>

            <li class="offer">
                <a data-name="offer" href="/gesprek-plannen" class="button stroked blue arrow">Gesprek plannen</a><br />
            </li>
        </ul>

        <footer>

            <div class="footer-content">
                @include('site.svg.kommaLogoWba')

                <div class="jobs">
                    Werken bij Komma?<br />
                    Bekijk onze <a data-name="jobs" href="/vacatures"><strong>vacatures</strong></a>.
                </div>
            </div>
        </footer>
    </div>
</nav>