From 61e1cdfcf0d7c5cc25af4485f821dc8c0ca17bcd Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Tue, 25 Dec 2018 22:46:21 +0000
Subject: [PATCH] Move sidbar into a component

---
 src/components/Sidebar.vue | 31 +++++++++++++++++++++++++++++++
 src/main.js                |  2 ++
 src/views/Applications.vue | 29 +++++------------------------
 src/views/Environments.vue | 36 ++++++------------------------------
 4 files changed, 44 insertions(+), 54 deletions(-)
 create mode 100644 src/components/Sidebar.vue

diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
new file mode 100644
index 0000000..68c16a1
--- /dev/null
+++ b/src/components/Sidebar.vue
@@ -0,0 +1,31 @@
+<template>
+  <div class="w-auto lg:w-64 bg-grey-darkest text-white antialiased">
+    <div>
+      <ul class="list-reset">
+        <li v-for="link in links" :key="link.title">
+          <a
+            href="#0"
+            class="flex items-center no-underline hover:underline focus:underline border-l-6 px-4 py-5"
+            :class="{
+              'border-blue bg-grey-darker': link.active,
+              'border-transparent': !link.active,
+              'text-grey cursor-not-allowed': link.disabled,
+              'text-white': !link.disabled,
+            }"
+          >
+            <svg class="h-6 w-6 fill-current" role="presentation"><use :xlink:href="`/img/icons.symbol.svg#${link.icon}`"></use></svg>
+            <span class="hidden lg:block lg:ml-4">{{ link.title }}</span>
+          </a>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    links: Array,
+  },
+}
+</script>
diff --git a/src/main.js b/src/main.js
index 643b8b7..1c26654 100644
--- a/src/main.js
+++ b/src/main.js
@@ -4,9 +4,11 @@ import router from './router'
 
 Vue.config.productionTip = false
 
+import Sidebar from '@/components/Sidebar'
 import Navbar from '@/components/Navbar'
 
 Vue.component('navbar', Navbar);
+Vue.component('sidebar', Sidebar);
 
 new Vue({
   render: h => h(App),
diff --git a/src/views/Applications.vue b/src/views/Applications.vue
index c888c8f..2ed1ac2 100644
--- a/src/views/Applications.vue
+++ b/src/views/Applications.vue
@@ -52,30 +52,11 @@
         </div>
       </div>
 
-      <div class="w-auto lg:w-64 bg-grey-darkest text-white antialiased">
-        <div>
-          <ul class="list-reset">
-            <li>
-              <a href="#0" class="flex items-center text-white no-underline hover:underline focus:underline border-l-6 border-blue px-4 py-5 bg-grey-darker">
-                <svg class="h-6 w-6 text-white fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#alpha__grid"></use></svg>
-                <span class="hidden lg:block lg:ml-4">All</span>
-              </a>
-            </li>
-            <li>
-              <a href="#0" class="flex items-center text-white no-underline hover:underline focus:underline border-l-6 border-transparent px-4 py-5">
-                <svg class="h-6 w-6 text-white fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#state__starred"></use></svg>
-                <span class="hidden lg:block lg:ml-4">Starred</span>
-              </a>
-            </li>
-            <li>
-              <a href="#0" class="flex items-center text-white no-underline hover:underline focus:underline border-l-6 border-transparent px-4 py-5">
-                <svg class="h-6 w-6 text-white fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#objects__recent"></use></svg>
-                <span class="hidden lg:block lg:ml-4">Recents</span>
-              </a>
-            </li>
-          </ul>
-        </div>
-      </div>
+      <sidebar :links="[
+        { title: 'All', icon: 'alpha__grid', active: true, disabled: false },
+        { title: 'Starred', icon: 'state__starred', active: false, disabled: false },
+        { title: 'Recents', icon: 'objects__recent', active: false, disabled: false },
+      ]"></sidebar>
     </div>
   </div>
 </template>
diff --git a/src/views/Environments.vue b/src/views/Environments.vue
index 984d5fd..a2f06ec 100644
--- a/src/views/Environments.vue
+++ b/src/views/Environments.vue
@@ -75,36 +75,12 @@
         <task-log></task-log>
       </div>
 
-      <div class="w-auto lg:w-64 bg-grey-darkest text-white antialiased">
-        <div>
-          <ul class="list-reset">
-            <li>
-              <a href="#0" class="flex items-center text-white no-underline hover:underline focus:underline border-l-6 border-blue px-4 py-5 bg-grey-darker">
-                <svg class="h-6 w-6 text-white fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#alpha__grid"></use></svg>
-                <span class="hidden lg:block lg:ml-4">Environments</span>
-              </a>
-            </li>
-            <li>
-              <div class="flex items-center text-grey no-underline hover:underline focus:underline border-l-6 border-transparent px-4 py-5 cursor-not-allowed hover:bg-grey-darker">
-                <svg class="h-6 w-6 text-grey fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#locations__keys"></use></svg>
-                <span class="hidden lg:block lg:ml-4">Product Keys</span>
-              </div>
-            </li>
-            <li>
-              <div class="flex items-center text-grey no-underline hover:underline focus:underline border-l-6 border-transparent px-4 py-5 cursor-not-allowed hover:bg-grey-darker">
-                <svg class="h-6 w-6 text-grey fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#alpha__security"></use></svg>
-                <span class="hidden lg:block lg:ml-4">Security</span>
-              </div>
-            </li>
-            <li>
-              <a href="#0" class="flex items-center text-white no-underline hover:underline focus:underline border-l-6 border-transparent px-4 py-5 hover:bg-grey-darker">
-                <svg class="h-6 w-6 text-white fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__search"></use></svg>
-                <span class="hidden lg:block lg:ml-4">Acquia Search</span>
-              </a>
-            </li>
-          </ul>
-        </div>
-      </div>
+      <sidebar :links="[
+        { title: 'Environments', icon: 'alpha__grid', active: true, disabled: false },
+        { title: 'Product Keys', icon: 'locations__keys', active: false, disabled: true },
+        { title: 'Security', icon: 'alpha__security', active: false, disabled: true },
+        { title: 'Acquia Search', icon: 'actions__search', active: false, disabled: false },
+      ]"></sidebar>
     </div>
   </div>
 </template>