Apply category

src/components/custom/TagFilterHeader.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="top-16 left-0 z-50 mb-5 h-16 bg-gray-200 w-full rounded shadow">
+  <div class="left-0 z-50 mb-5 h-16 bg-gray-200 w-full rounded shadow">
     <header
       class="flex items-center flex-wrap container mx-auto pt-1 pb-0 sm:px-0 transition-all transition-500"
     >
@@ -9,14 +9,15 @@
             >filter:</span
           >
         </div>
-        <div class="sm:block md:hidden">
+        <!-- <div class="sm:block md:hidden">
           <ul class="list-none inline-flex justify-center md:justify-end">
             <li class="py-1 mx-5 cursor-pointer" @click="resetAll()">Reset</li>
           </ul>
-        </div>
+        </div> -->
       </div>
 
       <nav
+        :class="isOpen ? 'block' : 'hidden'"
         class="inline-flex md:order-2 px-2 pt-2 pb-4 sm:flex sm:p-0 bg-transparent"
       >
         <ul
@@ -29,13 +30,13 @@
                 @click="setActive(0)"
                 class="flex flex-row items-center w-full md:w-auto md:inline md:mt-0 md:ml-4 animated-link"
               >
-                <span class="capitalize">{{ selected }}</span>
+                <span class="capitalize">{{ selected.replace("_", " ") }}</span>
                 <svg
                   fill="currentColor"
                   viewBox="0 0 20 20"
                   :class="{
                     'rotate-180': active == 0,
-                    'rotate-0': !active == 0,
+                    'rotate-0': active == !0,
                   }"
                   class="inline w-4 h-4 mt-1 ml-1 transition-transform duration-200 transform md:-mt-1"
                 >
@@ -47,7 +48,7 @@
                 </svg>
               </button>
               <div
-                v-if="active == 0"
+                v-if="open"
                 x-show="open"
                 x-transition:enter="transition ease-out duration-100"
                 x-transition:enter-start="transform opacity-0 scale-95"
@@ -66,8 +67,8 @@
                     :key="tag.path"
                     class="cursor-pointer block px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark:bg-transparent dark:hover:bg-gray-600 dark-:focus:bg-gray-600 dark:focus:text-white dark:hover:text-white dark:text-gray-200 md:mt-0 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
                     :href="$url(tag.path)"
-                    @click.self="open = false"
-                    >{{ tag.title }}</a
+                    @click="open = false"
+                    >{{ tag.title.replace("_", " ") }}</a
                   >
                 </div>
               </div>
@@ -75,11 +76,11 @@
           </li>
         </ul>
       </nav>
-      <div class="hidden md:ml-auto md:inline-block md:order-last">
+      <!-- <div class="hidden md:ml-auto md:inline-block md:order-last">
         <ul class="list-none inline-flex justify-center md:justify-end">
           <li class="py-1 mx-5 cursor-pointer" @click="resetAll()">Reset</li>
         </ul>
-      </div>
+      </div> -->
     </header>
   </div>
 </template>
@@ -104,21 +105,22 @@ export default {
       active: null,
     };
   },
-
   methods: {
     setActive(index) {
-      this.active = index;
+      this.active = !this.active;
       this.open = !this.open;
     },
     close(e) {
       if (!this.$el.contains(e.target)) {
         this.open = false;
+        this.active = !this.active;
       }
     },
     resetAll() {
       this.$emit("resetAll", true);
     },
   },
+
   mounted() {
     document.addEventListener("click", this.close);
   },