opdavies/oliverdavies.uk-old-sculpin
Archived
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Change icon when the menu is open

Browse source
This commit is contained in:
Oliver Davies 2019-06-14 12:43:30 +01:00
parent 3bbbc2f166
commit 526db282a7
1 changed files with 14 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
resources/js/components/Navbar.vue
View file

@ -14,25 +14,35 @@
</div> </div>
</div> </div>
<div class="w-1/4 text-right md:hidden"> <div class="w-1/4 text-right flex items-center justify-end md:hidden">
<button <button
type="button" type="button"
class="nav-toggle appearance-none" class="nav-toggle appearance-none text-white hover:text-gray-300 focus:outline-none"
aria-label="Toggle main menu" aria-label="Toggle main menu"
@click="hidden = !hidden" @click="hidden = !hidden"
> >
<svg <svg
class="fill-current text-white w-6 h-6" v-if="hidden"
class="fill-current text-inherit w-6 h-6"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20" 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> ><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>
<svg
v-if="!hidden"
class="fill-current text-inherit w-5 h-5"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
><path
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> </button>
</div> </div>
</div> </div>
<nav <nav
class="block w-full absolute py-4 -mx-4 mt-2px bg-blue-700 border-b md:mt-0 md:mx-0 md:relative md:flex md:flex-wrap md:flex-1 md:justify-end md:bg-blue-500 md:border-b-0" class="block w-full absolute py-4 -mx-4 mt-2px bg-blue-700 border-b md:mt-0 md:mx-0 md:relative md:flex md:flex-wrap md:flex-1 md:justify-end md:bg-blue-500 md:border-b-0"
style="margin-top: 3px"
:class="{ hidden: hidden }" :class="{ hidden: hidden }"
role="navigation" role="navigation"
> >