32 lines
1.7 KiB
Vue
32 lines
1.7 KiB
Vue
<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>
|