mirror of
https://github.com/ThatGuySam/doesitarm.git
synced 2026-05-18 06:44:46 -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;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Here you would add any custom utilities you need that don't come out of the
|
* Here you would add any custom utilities you need that don't come out of the
|
||||||
* box with Tailwind.
|
* box with Tailwind.
|
||||||
|
|
@ -160,3 +159,15 @@ html {
|
||||||
background-position: -100% 0;
|
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
|
<nav
|
||||||
:class="[
|
:class="[
|
||||||
'fixed top-0 left-0 right-0 z-navbar',
|
'fixed top-0 left-0 right-0 flex z-navbar'
|
||||||
isOpen ? 'bg-blur' : ''
|
|
||||||
]"
|
]"
|
||||||
>
|
>
|
||||||
<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 justify-between h-16">
|
||||||
<div class="flex">
|
<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 class="flex-shrink-0 flex items-center text-4xl lg:text-5xl py-3">
|
||||||
<div>🦾</div>
|
<div>🦾</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -103,27 +124,6 @@
|
||||||
|
|
||||||
Menu open: "block", Menu closed: "hidden"
|
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>
|
</nav>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -170,10 +170,10 @@ export default {
|
||||||
])
|
])
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data: function () {
|
// data: function () {
|
||||||
return {
|
// return {
|
||||||
isOpen: false
|
// // isOpen: false
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue