From 98a2798c0a6206651419b419c0052ba8b3c21c68 Mon Sep 17 00:00:00 2001
From: Ryan Atkinson <mail@ryanatkn.com>
Date: Sun, 28 Apr 2024 09:30:09 -0600
Subject: [PATCH] show shadow on `Library_Primary_Nav` only when scrolled down
 the page

---
 .changeset/tall-turkeys-judge.md   |  5 +++++
 package-lock.json                  | 14 +++++++-------
 src/lib/Library_Primary_Nav.svelte | 17 +++++++++++++----
 3 files changed, 25 insertions(+), 11 deletions(-)
 create mode 100644 .changeset/tall-turkeys-judge.md

diff --git a/.changeset/tall-turkeys-judge.md b/.changeset/tall-turkeys-judge.md
new file mode 100644
index 000000000..256b6a67f
--- /dev/null
+++ b/.changeset/tall-turkeys-judge.md
@@ -0,0 +1,5 @@
+---
+"@ryanatkn/fuz": patch
+---
+
+show shadow on `Library_Primary_Nav` only when scrolled down the page
diff --git a/package-lock.json b/package-lock.json
index 477f039c7..257673bcf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,15 +1,15 @@
 {
   "name": "@ryanatkn/fuz",
-  "version": "0.99.0",
+  "version": "0.99.3",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@ryanatkn/fuz",
-      "version": "0.99.0",
+      "version": "0.99.3",
       "license": "MIT",
       "dependencies": {
-        "@ryanatkn/fuz": "^0.99.0"
+        "@ryanatkn/fuz": "^0.99.3"
       },
       "devDependencies": {
         "@changesets/changelog-git": "^0.2.0",
@@ -375,11 +375,11 @@
       }
     },
     "node_modules/@ryanatkn/fuz": {
-      "version": "0.99.0",
-      "resolved": "https://registry.npmjs.org/@ryanatkn/fuz/-/fuz-0.99.0.tgz",
-      "integrity": "sha512-DwOjQE79hMwgg144YjELfMeCp5Usa3LTl9k5+0vBboJGp3L02rtNNF7jVH5DP4+p/vMhC83YVeu0outWYiH4TQ==",
+      "version": "0.99.3",
+      "resolved": "https://registry.npmjs.org/@ryanatkn/fuz/-/fuz-0.99.3.tgz",
+      "integrity": "sha512-wR5UiYIPHQ0JkEEGMEDd4ULzZSYSWmE652az0xXhItcY0lYu1P+sAEiKZbxVzEjfXH6Ri/qg7wYje4PvI9yqJw==",
       "dependencies": {
-        "@ryanatkn/fuz": "^0.99.0"
+        "@ryanatkn/fuz": "^0.99.3"
       },
       "engines": {
         "node": ">=20.10"
diff --git a/src/lib/Library_Primary_Nav.svelte b/src/lib/Library_Primary_Nav.svelte
index 08e4bb575..ab5f06b09 100644
--- a/src/lib/Library_Primary_Nav.svelte
+++ b/src/lib/Library_Primary_Nav.svelte
@@ -21,13 +21,16 @@
 	const iframed = is_iframed();
 	const enabled = !iframed;
 
-	// TODO BLOCK maybe when scrolled to the top, hide shadow, but show otherwise
-
 	// TODO BLOCK make this customizable, using snippet not pkg?
+
+	let scrollY = $state(0);
+	const scrolled = $derived(scrollY > 0);
 </script>
 
+<svelte:window bind:scrollY />
+
 {#if enabled}
-	<div class="library_nav shadow_xs">
+	<div class="library_primary_nav" class:scrolled>
 		<div class="background" />
 		<div class="content">
 			<nav class:selected_root>
@@ -45,12 +48,18 @@
 {/if}
 
 <style>
-	.library_nav {
+	.library_primary_nav {
 		position: sticky;
 		top: 0;
 		z-index: 10;
 		background-color: var(--bg);
 		height: var(--library_primary_nav_height);
+		transition: box-shadow var(--duration_2);
+		box-shadow: none;
+	}
+
+	.scrolled {
+		box-shadow: var(--shadow_xs);
 	}
 
 	.background {