Add dropdown menu

content/site/navigation.json

@@ -3,34 +3,40 @@
     {
       "name": "About",
       "link": "/about",
-      "external": false
+      "external": false,
+      "expandable": false
     },
     {
       "name": "Projects",
       "link": "/projects",
-      "external": false
+      "external": false,
+      "expandable": false
     },
     {
       "name": "People",
       "link": "/people",
-      "external": false
+      "external": false,
+      "expandable": true
     },
     {
       "name": "Blog",
       "link": "/blog",
-      "external": false
+      "external": false,
+      "expandable": false
     },
     {
       "name": "NewsRoom",
       "link": "/news",
-      "external": false
+      "external": false,
+      "expandable": false
     }
   ],
   "footerNavigation": [
     {
       "name": "",
       "link": "",
-      "external": false
+      "external": false,
+      "expandable": false
     }
   ]
 }

src/layouts/partials/Navbar.vue

@@ -8,7 +8,7 @@
       }"
     >
       <div class="flex items-center justify-between px-4 py-3 sm:p-0">
-        <div class="inline-flex items-center flex-shrink-0 mr-6">
+        <div class="inline-flex items-center flex-shrink-0">
           <a href="/" class="flex">
             <img
               src="../../../static/img/TFN_black.svg"
@@ -87,7 +87,7 @@
         <ul
           class="list-none sm:flex justify-left uppercase transition-all transition-500"
         >
-          <li
+          <!-- <li
             :key="element.name"
             v-for="(element, index) in $static.metadata.navigation"
             class="py-1"
@@ -107,22 +107,73 @@
             <g-link v-else :to="element.link" class="animated-link">{{
               element.name
             }}</g-link>
-          </li>
+          </li> -->
-          <!-- <li class="hover:text-white py-1">
+          <li
-          <div @click="open = false" class="relative" x-data="{ open: false }">
+            class="py-1"
-                    <button @click="open = !open" class="flex flex-row items-center w-full md:w-auto md:inline md:mt-0 md:ml-4 animated-link ">
+            :key="element.name"
-                        <span>LIST</span>
+            v-for="(element, index) in $static.metadata.navigation"
-                        <svg fill="currentColor" viewBox="0 0 20 20" :class="{'rotate-180': open, 'rotate-0': !open}" class="inline w-4 h-4 mt-1 ml-1 transition-transform duration-200 transform md:-mt-1"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+            :class="{
-                    </button>
+              'mr-4':
-                    <div x-show="open" x-transition:enter="transition ease-out duration-100" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95" class="absolute w-full mt-2 origin-top-right rounded-md shadow-lg md:w-48 z-30">
+                index != Object.keys($static.metadata.navigation).length - 1,
-                        <div class="px-2 py-2 bg-black rounded-md shadow dark-mode:bg-gray-700">
+            }"
-                            <a class="block px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode: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="#">Link #1</a>
+          >
-                            <a class="block px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode: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="#">Link #2</a>
+            <div
-                            <a class="block px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode: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="#">Link #3</a>
+              v-if="element.expandable"
-                        </div>
+              class="relative"
-                    </div>
+              x-data="{ open: false }"
+            >
+              <button
+                @click="open = !open"
+                class="flex flex-row items-center w-full md:w-auto md:inline md:mt-0 md:ml-4 animated-link"
+              >
+                <span class="uppercase">{{ element.name }}</span>
+                <svg
+                  fill="currentColor"
+                  viewBox="0 0 20 20"
+                  :class="{ 'rotate-180': open, 'rotate-0': !open }"
+                  class="inline w-4 h-4 mt-1 ml-1 transition-transform duration-200 transform md:-mt-1"
+                >
+                  <path
+                    fill-rule="evenodd"
+                    d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+                    clip-rule="evenodd"
+                  ></path>
+                </svg>
+              </button>
+              <div
+                v-if="open"
+                x-show="open"
+                x-transition:enter="transition ease-out duration-100"
+                x-transition:enter-start="transform opacity-0 scale-95"
+                x-transition:enter-end="transform opacity-100 scale-100"
+                x-transition:leave="transition ease-in duration-75"
+                x-transition:leave-start="transform opacity-100 scale-100"
+                x-transition:leave-end="transform opacity-0 scale-95"
+                class="absolute w-full mt-2 origin-top-right rounded-md shadow-lg md:w-48 z-30"
+              >
+                <div
+                  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"
+                    >All</g-link
+                  >
+                  <g-link
+                    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
+                  >
                 </div>
-           </li> -->
+              </div>
+            </div>
+
+            <g-link v-else :to="element.link" class="animated-link">{{
+              element.name
+            }}</g-link>
+          </li>
         </ul>
         <div class="md:hidden inline-flex rounded-full border w-1/2">
           <span class="w-auto flex justify-end items-center p-2">
@@ -239,12 +290,22 @@ query {
       name
       link
       external
+      expandable
     }
     social {
       icon
       link
     }
   }
+  allMembership{
+     edges{
+      node{
+        id
+        title
+        path
+      }
+    }
+  }
 }
 </static-query>