mirror of
https://github.com/ThatGuySam/doesitarm.git
synced 2026-05-15 06:35:20 -07:00
Trigger mobile nav with css
This commit is contained in:
Sam Carlton
parent
848023788c
commit
3bc5943028
2 changed files with 77 additions and 66 deletions
|
|
@ -70,7 +70,6 @@ html {
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Here you would add any custom utilities you need that don't come out of the
|
||||
* box with Tailwind.
|
||||
|
|
@ -160,3 +159,15 @@ html {
|
|||
background-position: -100% 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
button:focus .parent-focus\:visible,
|
||||
button:active .parent-focus\:visible {
|
||||
display: block;
|
||||
}
|
||||
|
||||
button:focus .parent-focus\:hidden,
|
||||
button:active .parent-focus\:hidden {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue