diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/Header.astro | 56 | ||||
| -rw-r--r-- | src/components/MobileLogo.astro | 9 |
2 files changed, 56 insertions, 9 deletions
diff --git a/src/components/Header.astro b/src/components/Header.astro index ff2a8ef..7f5dd31 100644 --- a/src/components/Header.astro +++ b/src/components/Header.astro @@ -8,21 +8,25 @@ import logo from '../../public/static/logo.svg' --- <div class="border-b md:border-b-0"> + <div id="scroll-trigger" class="relative -top-0.5 h-px"></div> <div - class="mx-auto flex max-w-3xl flex-row items-center justify-center gap-4 px-4 py-3 md:justify-between" + id="navbar" + class="mx-auto flex max-w-3xl flex-row items-center justify-between gap-4 px-4 py-3" > - <Link - href="/" - class="hidden shrink-0 items-center justify-center gap-3 md:flex" - > - <Image src={logo} alt="Logo" class="size-5 sm:size-6" /> + <Link href="/" class="shrink-0 items-center justify-center gap-3 md:flex"> + <Image + src={logo} + alt="Logo" + id="navbar-logo" + class="size-8 transition-all duration-300 md:size-12 md:saturate-100" + /> <span class="hidden h-full py-4 font-mono leading-none font-medium italic md:block md:text-3xl" > foss<span class="text-primary">cet</span> </span> </Link> - <div class="flex items-center gap-4"> + <div class="flex items-center gap-4 transition-all"> <nav class="flex items-center gap-4 text-sm sm:gap-6"> { NAV_LINKS.map((item) => ( @@ -40,3 +44,41 @@ import logo from '../../public/static/logo.svg' </div> </div> </div> + +<script> + const target = document.querySelector('#scroll-trigger') + const nav = document.querySelector('#navbar') as HTMLDivElement + const logo = document.querySelector('#navbar-logo') as HTMLImageElement + + if (!target) { + console.error( + "Observer Error: Target element '#scroll-trigger' not found in DOM.", + ) + } else { + const observer = new IntersectionObserver( + (entries) => { + entries.forEach((entry) => { + console.log('Intersection Ratio:', entry.intersectionRatio) + console.log('Is Intersecting?:', entry.isIntersecting) + + if (!entry.isIntersecting) { + console.log('Trigger hit the top (Exited viewport)') + document.querySelector('#main-nav')?.classList.add('is-at-top') + logo.classList.remove('opacity-0', 'scale-0', 'w-0') + nav.style.marginLeft = '0' + nav.style.justifyContent = 'space-between' + } else { + console.log('Trigger is back in view') + document.querySelector('#main-nav')?.classList.remove('is-at-top') + logo.classList.add('opacity-0', 'scale-0', 'w-0') + nav.style.marginLeft = '-1rem' + nav.style.justifyContent = 'center' + } + }) + }, + { threshold: 0 }, + ) + + observer.observe(target) + } +</script> diff --git a/src/components/MobileLogo.astro b/src/components/MobileLogo.astro index 9a6406e..f677761 100644 --- a/src/components/MobileLogo.astro +++ b/src/components/MobileLogo.astro @@ -1,11 +1,16 @@ --- +import { Image } from 'astro:assets' +import logo from '../../public/static/logo.svg' import Link from './Link.astro' --- <Link href="/" class="contents"> <div - class="flex h-full items-center justify-center pt-8 text-center font-mono text-3xl leading-none font-medium italic md:hidden lg:text-3xl" + class="flex h-full items-center justify-center gap-3 pt-8 text-center font-mono text-3xl leading-none font-medium italic md:hidden lg:text-3xl" > - foss<span class="text-primary">cet</span> + <Image src={logo} alt="Logo" class="size-11" /> + <span> + foss<span class="text-primary">cet</span> + </span> </div> </Link> |