@php
  $current_path = $_SERVER['REQUEST_URI'];
@endphp
<header>
  <div class="container">
    <div class="grid gcols-2 py-4">
      <div>
        <a href="{{ route('home') }}">Luuk_</a>
      </div>
      <div class="text-end d-none d-md-block menu">
        <a href="{{ URL::to('/about') }}" class="p-2 mx-2 {!! $current_path == '/about' ? 'active' : '' !!}">About_</a>
        <a href="{{ URL::to('/work') }}" class="p-2 mx-2 {!! $current_path == '/work' ? 'active' : '' !!}">Work_</a>
        <a href="{{ URL::to('/contact') }}" class="p-2 mx-2 me-n3 {!! $current_path == '/contact' ? 'active' : '' !!}">Contact_</a>
      </div>
      <div class="text-end d-md-none" data-action="togglemenu">
        <span>Menu</span>
      </div>
    </div>
  </div>
</header>

@push('stickies')
  <section class="mobilemenu">
    <div class="container pt-4 pb-2 d-flex justify-content-between flex-column min-vh-100">
      <div class="grid gcols-2">
        <div>
          <a href="{{ route('home') }}" class="c-white">Kuul_</a>
        </div>
        <div class="text-end d-md-none c-white" data-action="togglemenu">
          <span>Close</span>
        </div>
      </div>
      <div class="grid gcols-1 pt-6">
        <ul class="m-0 list-unstyled menu">
          <li>
            <a href="{{ URL::to('/about') }}" class="h1 c-white d-block py-2 lh-1 {!! $current_path == '/about' ? 'active' : '' !!}">About</a>
          </li>
          <li>
            <a href="{{ URL::to('/work') }}" class="h1 c-white d-block py-2 lh-1 {!! $current_path == '/work' ? 'active' : '' !!}">Work</a>
          </li>
          <li>
            <a href="{{ URL::to('/contact') }}" class="h1 c-white d-block py-2 lh-1 {!! $current_path == '/contact' ? 'active' : '' !!}">Contact</a>
          </li>
        </ul>

        <div class="pt-5 pb-4 mobilemenu-fadein">
          <h5 class="h6 mb-1 c-white">Mail Luuk_</h5>
          <a href="mailto:hello@luukthe.dev" class="c-white d-block">hello@luukthe.dev</a>
        </div>

        <div class=" mobilemenu-fadein">
          <h5 class="h6 mb-1 c-white">Social Luuk_</h5>
          <a href="https://www.linkedin.com/in/luukvandescheur/" target="_blank" rel="noopener" class="small me-2 c-white">LinkedIn</a>
          <a href="https://www.instagram.com/luukskeur/" target="_blank" rel="noopener" class="small me-2 c-white">Instagram</a>
          <a href="https://gitlab.com/luukskeur" target="_blank" rel="noopener" class="small me-2 c-white">Gitlab</a>
          <a href="https://stackoverflow.com/users/4668696/luuk-skeur" target="_blank" rel="noopener" class="small me-2 c-white">Stackoverflow</a>
          <a href="https://open.spotify.com/user/dek4av1fl0rv7kzumr72pqma0?si=leK-L4F4SDeioDnVW4r2og" target="_blank" rel="noopener" class="small me-2 c-white">Spotify</a>
        </div>
        
      </div>
    </div>
  </section>
@endpush