From f9bab3bdfc89b371a78314ce7d85c4bb404d3f20 Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Tue, 1 Dec 2020 16:45:59 +0200
Subject: [PATCH] Fix dropdown behavior

---
 src/layouts/partials/Navbar.vue | 32 +++++++++++++++++++-------------
 1 file changed, 19 insertions(+), 13 deletions(-)

diff --git a/src/layouts/partials/Navbar.vue b/src/layouts/partials/Navbar.vue
index eb4c9cd3d..e83365773 100644
--- a/src/layouts/partials/Navbar.vue
+++ b/src/layouts/partials/Navbar.vue
@@ -109,7 +109,10 @@
                 <svg
                   fill="currentColor"
                   viewBox="0 0 20 20"
-                  :class="{ 'rotate-180': open, 'rotate-0': !open }"
+                  :class="{
+                    'rotate-180': active == index,
+                    'rotate-0': !active == index,
+                  }"
                   class="inline w-4 h-4 mt-1 ml-1 transition-transform duration-200 transform md:-mt-1"
                 >
                   <path
@@ -131,38 +134,40 @@
                 class="absolute w-full mt-2 origin-top-right rounded-md shadow-lg md:w-48 z-30"
               >
                 <div
-                  v-if="element.name == 'Projects'"
+                  v-if="element.name == 'Projects' && open"
                   class="px-2 py-2 bg-white rounded-md shadow dark:bg-gray-700"
                 >
                   <g-link
                     :to="element.link"
-                    class="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"
+                    class="block px-4 py-2 capitalize 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"
                     >All</g-link
                   >
-                  <g-link
+                  <a
                     v-for="edge in $static.allProjectTag.edges"
                     :key="edge.node.id"
-                    class="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"
-                    :to="edge.node.path"
-                    >{{ edge.node.title }}</g-link
+                    class="block px-4 py-2 mt-2 capitalize 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"
+                    @click="open = false"
+                    :href="edge.node.path"
+                    >{{ edge.node.title }}</a
                   >
                 </div>
 
                 <div
-                  v-else
+                  v-else-if="element.name == 'People' && open"
                   class="px-2 py-2 bg-white rounded-md shadow dark:bg-gray-700"
                 >
                   <g-link
                     :to="element.link"
-                    class="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"
+                    class="block px-4 py-2 mt-2 capitalize 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"
                     >All</g-link
                   >
-                  <g-link
+                  <a
                     v-for="edge in $static.allMembership.edges"
                     :key="edge.node.id"
-                    class="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"
-                    :to="edge.node.path"
-                    >{{ edge.node.title }}</g-link
+                    class="block px-4 py-2 mt-2 text-sm capitalize 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"
+                    @click="open = false"
+                    :href="edge.node.path"
+                    >{{ edge.node.title }}</a
                   >
                 </div>
               </div>
@@ -271,6 +276,7 @@ export default {
     },
     setActive(index) {
       this.active = index;
+      this.open = !this.open;
     },
   },