deployn/astro-deploy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: update header component to improve mobile menu functionality

Browse Source
This commit is contained in:
Jewgeni 2024-09-12 07:45:50 +02:00
parent 158231fd64
commit 8609c753f5
1 changed files with 24 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
src/components/layout/Header.astro
View File

@ -45,21 +45,18 @@ const setTheme = (document: Document) => {
</script> </script>
<header <header
x-data={`{ x-data="{
open: false, open: false,
windowWidth: window.innerWidth, toggleMenu() {
init() { this.open = !this.open;
this.$watch('windowWidth', () => { },
closeMenu() {
this.open = false; this.open = false;
});
window.addEventListener('resize', () => {
this.$nextTick(() => {
this.windowWidth = window.innerWidth;
});
});
} }
}`} }"
x-init="init()" x-init="$watch('open', value => {
if (window.innerWidth >= 600) closeMenu();
})"
class="sticky top-0 z-10 block h-max w-full max-w-full rounded-none border border-white/80 bg-opacity-80 px-4 py-2 text-black shadow-md backdrop-blur-2xl backdrop-saturate-200 dark:border-black/80 dark:bg-zinc-900 lg:px-8 lg:py-4"> class="sticky top-0 z-10 block h-max w-full max-w-full rounded-none border border-white/80 bg-opacity-80 px-4 py-2 text-black shadow-md backdrop-blur-2xl backdrop-saturate-200 dark:border-black/80 dark:bg-zinc-900 lg:px-8 lg:py-4">
<div class="flex items-center justify-between text-zinc-900 dark:text-zinc-100"> <div class="flex items-center justify-between text-zinc-900 dark:text-zinc-100">
<a <a
@ -75,39 +72,35 @@ const setTheme = (document: Document) => {
Astro Deploy Astro Deploy
</div> </div>
</a> </a>
<nav <nav class="hidden items-center space-x-4 sm:flex">
class="mb-6 mt-4 hidden min-w-60 flex-col gap-1 p-0 font-sans text-base font-normal text-zinc-700 dark:text-zinc-300 sm:mb-0 sm:mt-0 sm:flex sm:flex-row sm:p-1">
{ {
navLinks.map(({ href, label }) => ( navLinks.map(({ href, label }) => (
<HeaderLink <HeaderLink
href={href} href={href}
class="block w-full rounded-lg px-4 py-2 text-center font-sans text-sm leading-normal text-zinc-900 antialiased transition-all hover:bg-zinc-50 dark:text-zinc-100 dark:hover:bg-zinc-950 md:text-xl"> class="block rounded-lg px-4 py-2 text-center font-sans text-sm leading-normal text-zinc-900 antialiased transition-all hover:bg-zinc-50 dark:text-zinc-100 dark:hover:bg-zinc-950 md:text-xl">
{label} {label}
</HeaderLink> </HeaderLink>
)) ))
} }
</nav> </nav>
<div class="flex"> <div class="flex items-center">
<button <button
@click="toggleMenu"
class="relative h-10 w-10 text-gray-500 focus:outline-none sm:hidden" class="relative h-10 w-10 text-gray-500 focus:outline-none sm:hidden"
aria-controls="menu" aria-label="Toggle menu">
@click="open = !open">
<span class="sr-only">Open main menu</span>
<span <span
aria-hidden="true"
class="absolute left-1/2 top-1/2 block w-5 -translate-x-1/2 -translate-y-1/2 transform"> class="absolute left-1/2 top-1/2 block w-5 -translate-x-1/2 -translate-y-1/2 transform">
<span <span
aria-hidden="true" class="absolute block h-0.5 w-5 transform bg-current transition duration-500 ease-in-out"
class="absolute block h-0.5 w-5 transform bg-current transition duration-200 ease-in-out" :class="{'rotate-45': open, ' -translate-y-1.5': !open }">
:class="{'rotate-45': open,' -translate-y-1.5': !open }">
</span> </span>
<span <span
aria-hidden="true" class="absolute block h-0.5 w-5 transform bg-current transition duration-500 ease-in-out"
class="absolute block h-0.5 w-5 transform bg-current transition duration-200 ease-in-out"
:class="{'opacity-0': open }"> :class="{'opacity-0': open }">
</span> </span>
<span <span
aria-hidden="true" class="absolute block h-0.5 w-5 transform bg-current transition duration-500 ease-in-out"
class="absolute block h-0.5 w-5 transform bg-current transition duration-200 ease-in-out"
:class="{'-rotate-45': open, ' translate-y-1.5': !open}"> :class="{'-rotate-45': open, ' translate-y-1.5': !open}">
</span> </span>
</span> </span>
@ -116,8 +109,6 @@ const setTheme = (document: Document) => {
</div> </div>
</div> </div>
<nav <nav
id="menu"
:class="{'flex': open, 'hidden': !open}"
x-show="open" x-show="open"
x-transition:enter="transition ease-out duration-200" x-transition:enter="transition ease-out duration-200"
x-transition:enter-start="opacity-0 transform scale-90" x-transition:enter-start="opacity-0 transform scale-90"
@ -125,12 +116,14 @@ const setTheme = (document: Document) => {
x-transition:leave="transition ease-in duration-200" x-transition:leave="transition ease-in duration-200"
x-transition:leave-start="opacity-100 transform scale-100" x-transition:leave-start="opacity-100 transform scale-100"
x-transition:leave-end="opacity-0 transform scale-90" x-transition:leave-end="opacity-0 transform scale-90"
class="mb-6 mt-4 hidden min-w-60 flex-col gap-1 p-0 font-sans text-base font-normal text-zinc-700 dark:text-zinc-300 sm:mb-0 sm:mt-0 sm:hidden sm:flex-row sm:p-1"> @click.away="closeMenu"
class="mt-4 sm:hidden">
{ {
navLinks.map(({ href, label }) => ( navLinks.map(({ href, label }) => (
<HeaderLink <HeaderLink
href={href} href={href}
class="flex w-full items-center gap-2 rounded-lg p-3 py-2 pr-4 text-start font-sans text-sm font-medium leading-tight text-zinc-900 antialiased outline-none transition-all hover:bg-zinc-50 hover:bg-opacity-80 hover:text-zinc-900 focus:bg-zinc-50 focus:bg-opacity-80 focus:text-zinc-900 active:bg-zinc-50 active:bg-opacity-80 active:text-zinc-900 dark:text-zinc-100"> @click="closeMenu"
class="mb-2 block w-full rounded-lg px-4 py-2 text-left font-sans text-sm leading-normal text-zinc-900 antialiased transition-all hover:bg-zinc-100 dark:text-zinc-100 dark:hover:bg-zinc-700">
{label} {label}
</HeaderLink> </HeaderLink>
)) ))