Make about page dynamic

src/components/FilterHeader.vue

@@ -9,38 +9,13 @@
     >
       <div class="flex items-center justify-between px-4 sm:p-0">
         <div class="inline-flex items-center flex-shrink-0">
-          <span
-            class="flex hidden md:block text-xl p-3 capitalize tracking-tight"
+          <span class="flex text-xl p-3 capitalize tracking-tight"
             >filter:</span
           >
         </div>
-
-        <div class="sm:hidden ml-auto">
-          <button
-            @click="isOpen = !isOpen"
-            type="button"
-            class="block text-gray-500 hover:text-white focus:text-white focus:outline-none p-3"
-          >
-            <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24">
-              <path
-                v-if="isOpen"
-                fill-rule="evenodd"
-                d="M18.278 16.864a1 1 0 0 1-1.414 1.414l-4.829-4.828-4.828 4.828a1 1 0 0 1-1.414-1.414l4.828-4.829-4.828-4.828a1 1 0 0 1 1.414-1.414l4.829 4.828 4.828-4.828a1 1 0 1 1 1.414 1.414l-4.828 4.829 4.828 4.828z"
-              />
-              <path
-                v-if="!isOpen"
-                fill-rule="evenodd"
-                d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"
-              />
-            </svg>
-          </button>
-        </div>
       </div>
 
-      <nav
-        :class="isOpen ? 'block' : 'hidden'"
-        class="md:order-2 px-2 pt-2 pb-4 sm:flex sm:p-0 bg-transparent"
-      >
+      <nav class="inline-flex md:order-2 px-2 pt-2 pb-4 sm:flex sm:p-0 bg-transparent">
         <ul
           class="list-none sm:flex justify-left uppercase transition-all transition-500"
         >

src/components/VerticalNav.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="my-12">
+    <nav class="inline-block w-1/4 border-r-2 border-gray-200">
+      <a
+        v-for="(slide, index) in slides"
+        :key="index"
+        :href="`#${index}`"
+        class="mt-1 capitalize group flex items-center px-3 py-2 text-sm leading-5 font-medium text-gray-600 hover:text-gray-900 hover:bg-gray-50 focus:outline-none focus:text-gray-900 focus:bg-gray-50 transition ease-in-out duration-150"
+        :class="{
+          'text-gray-900 border-r-3 border-blue-500 hover:bg-gray-100':
+            activeIndex === index,
+        }"
+        @click="setActive(index)"
+      >
+        <span class="truncate"> {{ slide.title }} </span>
+      </a>
+    </nav>
+
+    <div
+      class="content inline-block h-full w-3/4 align-top p-5 transition ease-in-out duration-150"
+    >
+      <div :id="slides[activeIndex]" class="hidden" style="display: block">
+        <img
+          v-if="slides[activeIndex].img"
+          :src="slides[activeIndex].img.src"
+          :alt="slides[activeIndex].title"
+        />
+        <p v-html="slides[activeIndex].content"></p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["slides"],
+  data() {
+    return {
+      activeIndex: 0,
+    };
+  },
+  methods: {
+    setActive(index) {
+      this.activeIndex = index;
+    },
+  },
+};
+</script>
+