From 41e2c716db8e0ead3291e7f71fca9f20dd99ca94 Mon Sep 17 00:00:00 2001 From: Ayush Sehrawat <69469790+AyushSehrawat@users.noreply.github.com> Date: Thu, 11 Jul 2024 10:15:45 +0530 Subject: [PATCH] fix: lower the z index and increase z index of header (#504) --- frontend/src/lib/components/header.svelte | 27 ++++++++++++------- frontend/src/lib/components/media-item.svelte | 2 +- frontend/src/routes/+page.svelte | 4 +-- 3 files changed, 21 insertions(+), 12 deletions(-) diff --git a/frontend/src/lib/components/header.svelte b/frontend/src/lib/components/header.svelte index 894951e1..4427ea1e 100644 --- a/frontend/src/lib/components/header.svelte +++ b/frontend/src/lib/components/header.svelte @@ -10,6 +10,7 @@ import { type Writable } from 'svelte/store'; import { goto } from '$app/navigation'; import { onMount, onDestroy } from 'svelte'; + import { browser } from '$app/environment'; const navItems: NavItem[] = [ { @@ -38,33 +39,41 @@ export let darkWhiteText: boolean = false; + let applyBackdropBlur = () => {}; + onMount(async () => { const header = document.getElementById('header'); - const headerHeight = header?.offsetHeight; - console.log(headerHeight); - - // header?.style.transition = 'padding 0.5s ease, other-properties 0.5s ease'; - window.addEventListener('scroll', () => { + applyBackdropBlur = () => { if (window.scrollY) { - // header?.classList.add('absolute'); header?.classList.remove('p-8'); header?.classList.add('p-4'); header?.classList.add('backdrop-blur-sm'); } else { - // header?.classList.remove('absolute'); header?.classList.remove('p-4'); header?.classList.add('p-8'); header?.classList.remove('backdrop-blur-sm'); } - }); + }; + + applyBackdropBlur(); + + if (browser) { + window.addEventListener('scroll', applyBackdropBlur); + } + }); + + onDestroy(() => { + if (browser) { + window.removeEventListener('scroll', applyBackdropBlur); + } });