Buck9195/doesitarm
1
0
Fork 0
mirror of https://github.com/ThatGuySam/doesitarm.git synced 2026-05-15 06:35:20 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Trigger mobile nav with css

Browse source
This commit is contained in:
Sam Carlton 2021-04-24 20:21:39 -05:00
parent 848023788c
commit 3bc5943028
2 changed files with 77 additions and 66 deletions
Download patch file Download diff file Expand all files Collapse all files

130
components/navbar.vue
View file

@ -2,49 +2,70 @@
<nav
:class="[
'fixed top-0 left-0 right-0 z-navbar',
isOpen ? 'bg-blur' : ''
'fixed top-0 left-0 right-0 flex z-navbar'
]"
>
<div class="max-w-7xl mx-auto px-4 lg:px-6">
<div class="mobile-menu-container flex items-center lg:hidden p-2">
<!-- Mobile menu button -->
<button
class="mobile-menu-toggle inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:bg-gray-700 focus:text-white transition duration-150 ease-in-out"
aria-label="Main menu"
>
<!-- Icon when menu is closed. -->
<svg
class="parent-focus:hidden h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 6h16M4 12h16M4 18h16" />
</svg>
<!-- Icon when menu is open. -->
<svg
class="hidden parent-focus:visible h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12" />
</svg>
<div
:class="[
'mobile-menu hidden parent-focus:visible lg:hidden absolute bg-blur pt-16 top-0 left-0 right-0 w-full',
]"
style="z-index: -1;"
>
<div class="px-2 pt-2 pb-3 lg:px-3">
<a
v-for="(item, index) in items"
:key="index"
:href="item.url"
:class="[
'mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700 transition duration-150 ease-in-out',
($nuxt.$route.path === item.url) ? 'text-white bg-gray-900 hover:text-white' : 'text-gray-300 hover:bg-gray-700'
]"
>
{{ item.label }}
</a>
</div>
<hr>
</div>
</button>
</div>
<div class="reponsive-menu-container relative w-full max-w-7xl mx-auto lg:px-6">
<div class="flex justify-between h-16">
<div class="flex">
<div class="-ml-2 mr-2 flex items-center lg:hidden">
<!-- Mobile menu button -->
<button
:aria-expanded="isOpen ? 'true' : 'false'"
class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:bg-gray-700 focus:text-white transition duration-150 ease-in-out"
aria-label="Main menu"
@click="isOpen = !isOpen"
>
<!-- Icon when menu is closed. -->
<svg
v-if="!isOpen"
class="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 6h16M4 12h16M4 18h16" />
</svg>
<!-- Icon when menu is open. -->
<svg
v-if="isOpen"
class="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<div class="flex-shrink-0 flex items-center text-4xl lg:text-5xl py-3">
<div>🦾</div>
</div>
@ -103,27 +124,6 @@
Menu open: "block", Menu closed: "hidden"
-->
<div
:class="[
'lg:hidden',
isOpen ? 'block' : 'hidden'
]"
>
<div class="px-2 pt-2 pb-3 lg:px-3">
<a
v-for="(item, index) in items"
:key="index"
:href="item.url"
:class="[
'mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700 transition duration-150 ease-in-out',
($nuxt.$route.path === item.url) ? 'text-white bg-gray-900 hover:text-white' : 'text-gray-300 hover:bg-gray-700'
]"
>
{{ item.label }}
</a>
</div>
<hr>
</div>
</nav>
</template>
@ -170,10 +170,10 @@ export default {
])
}
},
data: function () {
return {
isOpen: false
}
}
// data: function () {
// return {
// // isOpen: false
// }
// }
}
</script>