From 1fdd2a3ddc1d4d85680680c0be03c2045cd626e8 Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Mon, 19 Nov 2018 20:41:47 +0000
Subject: [PATCH] Mobile nav

---
 public/img/hamburger.svg           |  1 +
 src/components/MainMenu.vue        | 40 ++++++++++++++++++++++++++++++
 src/components/WelcomeToDrupal.vue | 11 +++++---
 3 files changed, 48 insertions(+), 4 deletions(-)
 create mode 100644 public/img/hamburger.svg
 create mode 100644 src/components/MainMenu.vue

diff --git a/public/img/hamburger.svg b/public/img/hamburger.svg
new file mode 100644
index 0000000..708b09b
--- /dev/null
+++ b/public/img/hamburger.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><g><path fill="#ffffff" d="M14.752 6h-13.502c-.69 0-1.25.56-1.25 1.25v.5c0 .689.56 1.25 1.25 1.25h13.502c.689 0 1.25-.561 1.25-1.25v-.5c0-.69-.561-1.25-1.25-1.25zM14.752 0h-13.502c-.69 0-1.25.56-1.25 1.25v.5c0 .69.56 1.25 1.25 1.25h13.502c.689 0 1.25-.56 1.25-1.25v-.5c0-.69-.561-1.25-1.25-1.25zM14.752 12h-13.502c-.69 0-1.25.561-1.25 1.25v.5c0 .689.56 1.25 1.25 1.25h13.502c.689 0 1.25-.561 1.25-1.25v-.5c0-.689-.561-1.25-1.25-1.25z"/></g></svg>
diff --git a/src/components/MainMenu.vue b/src/components/MainMenu.vue
new file mode 100644
index 0000000..73698be
--- /dev/null
+++ b/src/components/MainMenu.vue
@@ -0,0 +1,40 @@
+<template>
+  <div class="bg-blue-dark">
+    <button
+      type="button"
+      class="w-full p-3 block sm:hidden bg-blue-lighter text-sm text-grey-darker text-left focus:outline-none"
+      @click="open = !open"
+    >
+      <div class="flex items-center justify-between">
+        <div>
+          {{ navText }} - Main navigation
+        </div>
+        <div>
+          <img src="img/hamburger.svg" alt="">
+        </div>
+      </div>
+    </button>
+
+    <div class="container mx-auto px-4">
+      <nav class="p-1 md:p-0 sm:block" :class="[ open ? 'block' : 'hidden' ]">
+        <a href="#0" class="inline-block text-sm no-underline text-black bg-white px-3 py-2 rounded-lg md:rounded-none md:rounded-t-lg w-full sm:w-1/3 md:w-auto sm:text-center">Home</a>
+      </nav>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    data: function () {
+      return {
+        open: false,
+      }
+    },
+
+    computed: {
+      navText: function () {
+        return this.open ? 'Hide' : 'Show';
+      }
+    }
+  }
+</script>
diff --git a/src/components/WelcomeToDrupal.vue b/src/components/WelcomeToDrupal.vue
index c1fc617..09ae372 100644
--- a/src/components/WelcomeToDrupal.vue
+++ b/src/components/WelcomeToDrupal.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="bg-blue-dark text-white pt-4">
+    <div class="bg-blue-dark text-white py-4">
       <div class="container mx-auto px-4 relative">
         <div class="text-sm flex justify-end">
           <a href="#0" class="text-white no-underline hover:underline">Log in</a>
@@ -13,12 +13,11 @@
           </div>
         </div>
 
-        <nav class="mt-4">
-          <a href="#0" class="inline-block text-sm no-underline text-black bg-white px-3 py-2 rounded-t-lg">Home</a>
-        </nav>
       </div>
     </div>
 
+    <main-menu></main-menu>
+
     <div class="bg-white pt-3 pb-4 lg:pb-12">
       <div class="container mx-auto px-4">
         <div class="flex flex-col md:flex-row-reverse md:-mx-8 my-6">
@@ -72,7 +71,11 @@
 </template>
 
 <script>
+import MainMenu from './MainMenu.vue';
+
 export default {
+  components: { MainMenu },
+
   props: {
     version: {
       type: String,