Add more links

README.md

@@ -1,4 +1,4 @@
-# tailwind-bartik
+# vue-tailwind-bartik
 
 ## Project setup
 ```

src/components/MainMenu.vue

@@ -15,12 +15,26 @@
       </div>
     </button>
 
-    <div class="container mx-auto px-4">
+    <div class="container mx-auto px-4 sm:block" :class="[ open ? 'block' : 'hidden' ]">
-      <nav class="p-1 md:p-0 sm:block" :class="[ open ? 'block' : 'hidden' ]">
+      <div class="mt-2 sm:mt-0">
-        <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 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>
 
 <script>
@@ -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,
+          // },
+        ]
       }
     },