From 5923ff2977479945d81466d1d27309d8eb1a6df2 Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Tue, 20 Nov 2018 20:16:42 +0000
Subject: [PATCH] Determine active tab using a data value

---
 src/components/MainMenu.vue | 12 +++---------
 1 file changed, 3 insertions(+), 9 deletions(-)

diff --git a/src/components/MainMenu.vue b/src/components/MainMenu.vue
index 6220b63..bbd1691 100644
--- a/src/components/MainMenu.vue
+++ b/src/components/MainMenu.vue
@@ -21,11 +21,11 @@
           <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"
+            v-for="(link, index) 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' ]"
+              :class="[ index == activeTab ? 'bg-white' : 'bg-blue-lighter hover:bg-white' ]"
               :href="link.href"
             >
               {{ link.title }}
@@ -41,38 +41,32 @@
   export default {
     data: function () {
       return {
+        activeTab: 0,
         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/rebuilding-bartik',
-            active: false,
           },
           // {
           //   title: 'Read blog post',
           //   href: 'https://github.com/opdavies/rebuilding-bartik',
-          //   active: false,
           // },
         ]
       }