From 3363816d5ba38307fa1074cbbec73f14be9a2477 Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Mon, 16 Mar 2020 00:39:34 +0000
Subject: [PATCH] Use Alpine for the navigation menu

References #34
---
 public/index.html | 21 ++++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/public/index.html b/public/index.html
index 876a542..5d9e7e6 100644
--- a/public/index.html
+++ b/public/index.html
@@ -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">