From 30e4411792226f8b7c419f6f42a38d734b804e4d Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Tue, 20 Nov 2018 02:26:07 +0000
Subject: [PATCH] Add more links

---
 README.md                   |  2 +-
 src/components/MainMenu.vue | 55 ++++++++++++++++++++++++++++++++++---
 2 files changed, 52 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 057a6f4..85bf3d9 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-# tailwind-bartik
+# vue-tailwind-bartik
 
 ## Project setup
 ```
diff --git a/src/components/MainMenu.vue b/src/components/MainMenu.vue
index 73698be..252ef6a 100644
--- a/src/components/MainMenu.vue
+++ b/src/components/MainMenu.vue
@@ -15,10 +15,24 @@
       </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 class="container mx-auto px-4 sm:block" :class="[ open ? 'block' : 'hidden' ]">
+      <div class="mt-2 sm:mt-0">
+        <nav class="flex flex-wrap pb-1 md:p-0 -mx-3 sm:-mx-0">
+          <div
+            class="px-1 sm:pl-0 mb-1 md:mb-0 inline-block w-full sm:w-1/3 md:w-auto"
+            :key="link.title"
+            v-for="link in links"
+          >
+            <a
+              class="block text-sm no-underline text-black px-3 py-2 rounded-lg md:rounded-none md:rounded-t-lg sm:text-center"
+              :class="[ link.active ? 'bg-white' : 'bg-blue-lighter hover:bg-white' ]"
+              :href="link.href"
+            >
+              {{ link.title }}
+            </a>
+          </div>
+        </nav>
+      </div>
     </div>
   </div>
 </template>
@@ -28,6 +42,39 @@
     data: function () {
       return {
         open: false,
+
+        links: [
+          {
+            title: 'Home',
+            href: '#0',
+            active: true,
+          },
+          {
+            title: 'Drupal',
+            href: 'https://www.drupal.org',
+            active: false,
+          },
+          {
+            title: 'Vue.js',
+            href: 'https://vuejs.org',
+            active: false,
+          },
+          {
+            title: 'Tailwind CSS',
+            href: 'https://tailwindcss.com',
+            active: false,
+          },
+          {
+            title: 'View code on GitHub',
+            href: 'https://github.com/opdavies/vue-tailwind-bartik',
+            active: false,
+          },
+          // {
+          //   title: 'Read blog post',
+          //   href: 'https://github.com/opdavies/tailwind-bartik',
+          //   active: false,
+          // },
+        ]
       }
     },