Add dropdown menu
This commit is contained in:
samaradel
@@ -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
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -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 class="hover:text-white py-1">
|
||||
<div @click="open = false" class="relative" 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>LIST</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 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-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>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li> -->
|
||||
<li
|
||||
class="py-1"
|
||||
:key="element.name"
|
||||
v-for="(element, index) in $static.metadata.navigation"
|
||||
:class="{
|
||||
'mr-4':
|
||||
index != Object.keys($static.metadata.navigation).length - 1,
|
||||
}"
|
||||
>
|
||||
<div
|
||||
v-if="element.expandable"
|
||||
class="relative"
|
||||
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>
|
||||
</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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user