Show header border only after scrolling

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>

Author: waldekmastykarz

src/layouts/Layout.astro

@@ -114,7 +114,7 @@ const structuredDataJson = structuredData
     </script>
   </head>
   <body class="min-h-screen flex flex-col">
-    <nav class="border-b sticky top-0 z-50 backdrop-blur-sm" style="border-color: var(--border-primary); background: var(--bg-nav);">
+    <nav class="site-nav border-b sticky top-0 z-50 backdrop-blur-sm" style="background: var(--bg-nav);">
       <div class="max-w-6xl mx-auto px-4 h-16 flex items-center justify-between">
         <a href={`${import.meta.env.BASE_URL}`} class="flex items-center gap-2 text-xl font-bold hover:text-purple-400 transition-colors">
           <img src={`${import.meta.env.BASE_URL}icon.svg`} alt="Dev Proxy" class="w-6 h-6" />
@@ -212,6 +212,16 @@ const structuredDataJson = structuredData
 
     <script is:inline>
       (function() {
+        var header = document.querySelector('.site-nav');
+
+        function updateHeaderBorder() {
+          header.classList.toggle('is-scrolled', window.scrollY > 0);
+        }
+
+        updateHeaderBorder();
+        window.addEventListener('scroll', updateHeaderBorder, { passive: true });
+        window.addEventListener('pageshow', updateHeaderBorder);
+
         // Theme toggle (desktop + mobile)
         var toggles = [document.getElementById('theme-toggle'), document.getElementById('theme-toggle-mobile')];
         var sunIcons = [document.getElementById('theme-icon-sun'), document.getElementById('theme-icon-sun-mobile')];
@@ -252,3 +262,13 @@ const structuredDataJson = structuredData
     </script>
   </body>
 </html>
+
+<style>
+  .site-nav {
+    border-color: transparent;
+  }
+
+  .site-nav.is-scrolled {
+    border-color: var(--border-primary);
+  }
+</style>