Replace vuejs with alpinejs

This commit is contained in:
Oliver Davies 2020-01-16 08:32:14 +00:00
parent 083637b89f
commit 778111e806
8 changed files with 21 additions and 153 deletions

View file

@ -1,6 +1,6 @@
<div id="nav" class="bg-blue-500 border-b-3 border-blue-700">
<div class="container">
<div class="md:flex">
<div class="md:flex" x-data="{ isOpen: false }">
<div class="w-full flex items-center md:w-1/3 lg:w-1/4">
<div class="w-3/4 py-6">
<div class="text-sm">
@ -15,11 +15,11 @@
type="button"
class="nav-toggle appearance-none text-white hover:text-gray-300 focus:outline-none"
aria-label="Toggle main menu"
@click="toggle"
@click="isOpen = !isOpen"
>
<svg class="js-hidden fill-current text-inherit w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path v-if="!isOpen" 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"/>
<path v-else d="M10 8.586L2.929 1.515 1.515 2.929 8.585 10l-7.07 7.071 1.414 1.414L10 11.415l7.071 7.07 1.414-1.414L11.415 10l7.07-7.071-1.414-1.414L10 8.585z" fill-rule="evenodd"/>
<path x-show="!isOpen" 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"/>
<path x-show="isOpen" d="M10 8.586L2.929 1.515 1.515 2.929 8.585 10l-7.07 7.071 1.414 1.414L10 11.415l7.071 7.07 1.414-1.414L11.415 10l7.07-7.071-1.414-1.414L10 8.585z" fill-rule="evenodd"/>
</svg>
</button>
</div>