opdavies/rebuilding-bartik
Archived
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Use Alpine for the navigation menu

Browse source 
References #34
This commit is contained in:
Oliver Davies 2020-03-16 00:39:34 +00:00
parent 9843418417
commit 3363816d5b
1 changed files with 14 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
public/index.html
View file

@ -23,16 +23,23 @@
</div>
</div>
<div class="mt-1">
<div>
<button type="button" class="w-full block p-3 bg-blue-100 text-sm text-grey-600 text-left focus:outline-none sm:hidden">
<div x-data="{ isOpen: false }">
<button
type="button"
class="w-full block p-3 bg-blue-100 text-sm text-grey-600 text-left focus:outline-none sm:hidden"
@click="isOpen = !isOpen"
>
<div class="flex items-center justify-between">
<div>
Show - Main navigation
</div>
<div><img src="/img/hamburger.48998d54.svg" alt=""></div>
<div x-text="[
isOpen ? 'Hide - main navigation': 'Show - main navigation'
]"></div>
<div><img src="/images/hamburger.svg" alt=""></div>
</div>
</button>
<div class="mx-auto px-4 sm:block xl:max-w-6xl hidden">
<div
class="mx-auto px-4 sm:block xl:max-w-6xl"
:class="[ isOpen ? 'block' : 'hidden' ]"
>
<div class="mt-2 sm:mt-0">
<nav class="flex flex-wrap pb-2 -mt-1 -mx-3 sm:-mx-0 md:p-0">
<div class="w-full inline-block px-1 mt-1 md:mb-0 sm:w-1/3 sm:pl-0 md:w-auto"><a href="#0" class="block px-3 py-2 rounded-lg text-sm text-black no-underline sm:text-center md:rounded-none md:rounded-t-lg bg-white">