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> </div>
<div class="mt-1"> <div class="mt-1">
<div> <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"> <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 class="flex items-center justify-between">
<div> <div x-text="[
Show - Main navigation isOpen ? 'Hide - main navigation': 'Show - main navigation'
</div> ]"></div>
<div><img src="/img/hamburger.48998d54.svg" alt=""></div> <div><img src="/images/hamburger.svg" alt=""></div>
</div> </div>
</button> </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"> <div class="mt-2 sm:mt-0">
<nav class="flex flex-wrap pb-2 -mt-1 -mx-3 sm:-mx-0 md:p-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"> <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">