added shadow to the nav when scrolling

NIAEFEUP · Jan 25, 2025 · 1aa836f · 1aa836f
1 parent b88b95f
commit 1aa836f
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 1 deletion.
diff --git a/src/app.css b/src/app.css
@@ -26,6 +26,10 @@ body {
   background-image: linear-gradient(180deg, rgba(179, 54, 54, 1) 0%, rgba(162, 49, 49, 1) 100%);
 }
 
+.isScrolled {
+  box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.12);
+}
+
 .footer-icons svg,
 .footer-icons path {
   pointer-events: none;

diff --git a/src/routes/(app)/_components/layout/navbar.svelte b/src/routes/(app)/_components/layout/navbar.svelte
@@ -1,5 +1,28 @@
+<script>
+  import { onMount } from 'svelte';
+
+  let isScrolled = false;
+  let y = 0;
+
+  function handleScroll() {
+    y = document.body.scrollTop || document.documentElement.scrollTop;
+    isScrolled = y > 0;
+  }
+
+  onMount(() => {
+    // Add scroll listener to the body
+    document.body.addEventListener('scroll', handleScroll);
+
+    // Cleanup on unmount
+    return () => {
+      document.body.removeEventListener('scroll', handleScroll);
+    };
+  });
+</script>
+
 <nav
-  class="bg-ni-topnav fixed z-30 hidden h-min w-full grid-cols-2 items-center justify-center px-7 py-2 font-raleway text-xs text-white sm:grid sm:text-base"
+  class="bg-ni-navbar fixed z-30 hidden h-min w-full grid-cols-2 items-center justify-center px-7 py-2 font-raleway text-xs text-white sm:grid sm:text-base"
+  class:isScrolled
   aria-label="Navigation Bar"
 >
   <div class="flex w-full justify-start">