feat: implement sticky header with height compression and glassmorphism

default.hbs

@@ -5,6 +5,7 @@
         mobileMenuOpen: false,
         currentPath: window.location.pathname,
         showScrollTop: false,
+        isSticky: false,
         init() {
             $watch('theme', val => {
                 localStorage.setItem('theme', val);
@@ -13,9 +14,10 @@
             document.documentElement.setAttribute('data-theme', this.theme);
             document.documentElement.classList.remove('hidden');
 
-            // Handle scroll for scroll-to-top button
+            // Handle scroll for sticky header and scroll-to-top button
             window.addEventListener('scroll', () => {
                 this.showScrollTop = window.scrollY > 400;
+                this.isSticky = window.scrollY > 50;
             });
 
             // Update currentPath on navigation to keep menu highlights in sync

partials/header.hbs

@@ -1,10 +1,14 @@
-<header class="text-[var(--text-primary)] body-font shadow-lg bg-[var(--bg-primary)]">
-    <div class="container mx-auto flex p-5 items-center justify-between">
+<header 
+    class="sticky top-0 z-40 w-full transition-all duration-500 ease-in-out border-b border-transparent"
+    :class="isSticky ? 'bg-[var(--bg-primary)]/80 backdrop-blur-md py-2 shadow-lg border-[var(--bg-tertiary)]' : 'bg-[var(--bg-primary)] py-5 shadow-none'">
+    <div class="container mx-auto flex items-center justify-between transition-all duration-500 ease-in-out px-5">
         <a href="{{@site.url}}" class="flex title-font font-medium items-center text-[var(--text-primary)]" @click.stop>
             {{#if @site.logo}}
-                <img src="{{@site.logo}}" alt="{{@site.title}}" class="h-10 w-auto site-logo">
+                <img src="{{@site.logo}}" alt="{{@site.title}}" class="transition-all duration-500 w-auto site-logo" :class="isSticky ? 'h-8' : 'h-10'">
             {{else}}
-                {{> "icons/logo" class="h-10 w-auto site-logo"}}
+                <div class="transition-all duration-500" :class="isSticky ? 'scale-90' : 'scale-100'">
+                    {{> "icons/logo" class="h-10 w-auto site-logo"}}
+                </div>
             {{/if}}
         </a>