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

Use :target to trigger menu

Browse source
This commit is contained in:
Sam Carlton 2021-04-24 21:21:39 -05:00
parent 3bc5943028
commit 4cef2bce1f
2 changed files with 59 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

4
assets/css/tailwind.css
View file

@ -171,3 +171,7 @@ button:focus .parent-focus\:hidden,
button:active .parent-focus\:hidden {
display: none;
}
.target\:visible:target {
display: block;
}

48
components/navbar.vue
View file

@ -8,8 +8,14 @@
<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"
<a
:class="[
'mobile-menu-toggle rounded-md focus:pointer-events-none p-2',
'inline-flex items-center justify-center',
'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'
]"
href="#mobile-menu"
aria-label="Main menu"
>
<!-- Icon when menu is closed. -->
@ -37,12 +43,42 @@
d="M6 18L18 6M6 6l12 12" />
</svg>
</a>
</div>
<div
id="mobile-menu"
:class="[
'mobile-menu hidden parent-focus:visible lg:hidden absolute bg-blur pt-16 top-0 left-0 right-0 w-full',
'mobile-menu hidden target:visible lg:hidden absolute bg-blur top-0 left-0 right-0 w-full py-3 px-2',
]"
style="z-index: -1;"
>
<!-- Mobile menu button -->
<a
:class="[
'mobile-menu-close rounded-md focus:pointer-events-none p-2',
'inline-flex items-center justify-center',
'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'
]"
href="#"
aria-label="Main menu"
>
<!-- Icon when menu is open. -->
<svg
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>
</a>
<div class="px-2 pt-2 pb-3 lg:px-3">
<a
v-for="(item, index) in items"
@ -59,10 +95,6 @@
<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">