valknar/sexy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: transparent header at top, solid on scroll

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Sebastian Krüger
2026-03-08 19:03:39 +01:00
parent b315062d43
commit 21b8d2c223
1 changed files with 8 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
packages/frontend/src/lib/components/header/header.svelte
View File

@@ -19,6 +19,13 @@
let { authStatus }: Props = $props(); let { authStatus }: Props = $props();
let isMobileMenuOpen = $state(false); let isMobileMenuOpen = $state(false);
let scrolled = $state(false);
$effect(() => {
const onScroll = () => (scrolled = window.scrollY > 10);
window.addEventListener("scroll", onScroll, { passive: true });
return () => window.removeEventListener("scroll", onScroll);
});
const navLinks = [ const navLinks = [
{ name: $_("header.home"), href: "/" }, { name: $_("header.home"), href: "/" },
@@ -47,7 +54,7 @@
</script> </script>
<header <header
class="sticky top-0 z-50 w-full bg-gradient-to-br from-card/85 via-card/90 to-card/80 backdrop-blur-xl shadow-2xl shadow-primary/20" class={`sticky top-0 z-50 w-full backdrop-blur-xl transition-all duration-500 ${scrolled ? "bg-gradient-to-br from-card/85 via-card/90 to-card/80 shadow-2xl shadow-primary/20 border-b border-border/20" : "bg-transparent border-b border-transparent shadow-none"}`}
> >
<div class="container mx-auto px-4"> <div class="container mx-auto px-4">
<div class="flex items-center justify-evenly h-16"> <div class="flex items-center justify-evenly h-16">