From b217cf5366b677b9751167f51bfa24c4a0a51a79 Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Sun, 16 Dec 2018 16:57:08 +0000
Subject: [PATCH] Re-structure navbar

---
 assets/js/components/Navbar.vue          | 66 ++++++++++++------------
 source/_partials/layout/navbar.html.twig | 13 +++--
 2 files changed, 41 insertions(+), 38 deletions(-)

diff --git a/assets/js/components/Navbar.vue b/assets/js/components/Navbar.vue
index dc35ade8b..c8d3476c3 100644
--- a/assets/js/components/Navbar.vue
+++ b/assets/js/components/Navbar.vue
@@ -1,40 +1,38 @@
 <template>
-    <div role="banner">
-        <header class="container mx-auto px-4">
-            <div class="sm:flex">
-                <div class="w-full sm:w-1/3 lg:w-1/4 flex items-center">
-                    <div class="w-3/4 py-5">
-                        {{ siteName }}
-                    </div>
+  <div>
+    <div class="sm:flex">
+      <div class="w-full sm:w-1/3 lg:w-1/4 flex items-center">
+        <div class="w-3/4 py-5">
+          {{ siteName }}
+        </div>
 
-                    <div class="w-1/4 text-right sm:hidden">
-                        <button type="button" class="nav-toggle appearance-none" @click="mobileNavHidden = !mobileNavHidden" aria-label="Toggle main menu">
-                            <svg class="fill-current text-grey-dark w-6 h-6" xmlns="http://www.w3.org/2000/svg" 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>
-                        </button>
-                    </div>
-                </div>
+        <div class="w-1/4 text-right sm:hidden">
+          <button type="button" class="nav-toggle appearance-none" @click="mobileNavHidden = !mobileNavHidden" aria-label="Toggle main menu">
+            <svg class="fill-current text-grey-dark w-6 h-6" xmlns="http://www.w3.org/2000/svg" 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>
+          </button>
+        </div>
+      </div>
 
-                <nav
-                    class="w-full -mx-4 mt-px sm:mt-0 sm:mx-0 block sm:flex sm:flex-wrap sm:flex-1 sm:justify-end bg-white absolute sm:relative border-b sm:border-b-0"
-                    :class="{hidden: mobileNavHidden}"
-                    role="navigation"
-                >
-                    <a
-                        v-for="item in navItems"
-                        :href="item.href"
-                        class="block p-4 border-l-3 sm:border-l-0 sm:border-b-3 border-transparent hover:border-grey-light sm:ml-4 sm:mr-0 sm:p-0 hover:no-underline"
-                        :class="{
-                            'border-blue hover:border-blue': pageUrl.match(new RegExp(item.pattern)),
-                        }"
-                    >
-                        <span class="flex items-center h-full">
-                            {{ item.title }}
-                        </span>
-                    </a>
-                </nav>
-            </div>
-        </header>
+      <nav
+        class="w-full -mx-4 mt-px sm:mt-0 sm:mx-0 block sm:flex sm:flex-wrap sm:flex-1 sm:justify-end bg-white absolute sm:relative border-b sm:border-b-0"
+        :class="{hidden: mobileNavHidden}"
+        role="navigation"
+      >
+        <a
+          v-for="item in navItems"
+          :href="item.href"
+          class="block p-4 border-l-3 sm:border-l-0 sm:border-b-3 border-transparent hover:border-grey-light sm:ml-4 sm:mr-0 sm:p-0 hover:no-underline"
+          :class="{
+            'border-blue hover:border-blue': pageUrl.match(new RegExp(item.pattern)),
+          }"
+        >
+          <span class="flex items-center h-full">
+            {{ item.title }}
+          </span>
+        </a>
+      </nav>
     </div>
+  </div>
 </template>
 
 <script>
@@ -72,7 +70,7 @@
             pattern: '^/contact/?',
           }
         ]
-      }
     }
   }
+}
 </script>
diff --git a/source/_partials/layout/navbar.html.twig b/source/_partials/layout/navbar.html.twig
index c36aa051c..2cc109bc7 100644
--- a/source/_partials/layout/navbar.html.twig
+++ b/source/_partials/layout/navbar.html.twig
@@ -1,7 +1,12 @@
 <div class="border-bottom border-b border-grey-light mb-6">
-    <div class="container mx-auto v-cloak-block">
-        <div class="block py-5">{{ site.title }}</div>
-    </div>
+    <div class="container mx-auto">
+        <div class="block py-5 v-cloak-block">
+            {{ site.title }}
+        </div>
 
-    <navbar site-name="{{ site.title }}" page-url="{{ page.url }}"></navbar>
+        <navbar
+            site-name="{{ site.title }}"
+            page-url="{{ page.url }}"
+        ></navbar>
+    </div>
 </div>