<template>
  <div>
    <button
      type="button"
      class="block sm:hidden p-2 bg-red rounded border border-white text-white absolute pin-t pin-r mr-4"
      @click="open = !open"
    >
      <svg v-if="open" class="block fill-current text-white w-8 h-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z"/></svg>
      <svg v-else class="block fill-current text-white w-8 h-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M16.4 9H3.6c-.552 0-.6.447-.6 1 0 .553.048 1 .6 1h12.8c.552 0 .6-.447.6-1 0-.553-.048-1-.6-1zm0 4H3.6c-.552 0-.6.447-.6 1 0 .553.048 1 .6 1h12.8c.552 0 .6-.447.6-1 0-.553-.048-1-.6-1zM3.6 7h12.8c.552 0 .6-.447.6-1 0-.553-.048-1-.6-1H3.6c-.552 0-.6.447-.6 1 0 .553.048 1 .6 1z"/></svg>
    </button>

    <div class="absolute pin-l pin-r pin-t mt-16 mx-10 sm:hidden" v-show="open">
      <nav class="w-full border border-grey-light bg-red-90">
        <a class="w-full p-3 block no-underline text-white border-b border-grey-light" href="/">Coaches</a>
        <a class="w-full p-3 block no-underline text-white border-b border-grey-light" href="/schedule">Schedule</a>
        <a class="w-full p-3 block no-underline text-white border-b border-grey-light" href="/membership">Membership</a>
        <a class="w-full p-3 block no-underline text-white" href="/contact">Contact</a>
      </nav>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
        return {
            open: false,
        }
    }
  }
</script>
