From 94e805f95b64284c2acf69c8809a2b4492c66d7a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Wed, 28 Oct 2020 19:24:42 +0100
Subject: [PATCH] Add sticky transition for grid nav

---
 components/Grid.vue | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/components/Grid.vue b/components/Grid.vue
index e25ec13..fa4aa00 100644
--- a/components/Grid.vue
+++ b/components/Grid.vue
@@ -3,7 +3,7 @@
     <h2 class="text-4xl mb-6">Projects</h2>
 
     <!-- Filters Nav -->
-    <ul class="flex mb-8">
+    <ul id="grid-nav" class="bg-white flex mb-8 p-3">
       <li class="mr-3">
         <button
           :class="'btn ' + (filter === 'all' ? 'btn-active' : 'btn-ghost')"
@@ -98,11 +98,29 @@ export default {
   },
   mounted() {
     this.data = shuffle(this.data);
+
+    // get the sticky element
+    const stickyElm = document.getElementById("grid-nav");
+
+    const observer = new IntersectionObserver(
+      ([e]) => e.target.classList.toggle("shadow-md", e.intersectionRatio < 1),
+      { threshold: [1] }
+    );
+
+    observer.observe(stickyElm);
   }
 };
 </script>
 
 <style>
+#grid-nav {
+  position: sticky;
+  top: -1px;
+  z-index: 15;
+  transition: all 0.1s;
+  padding-top: calc(0.75rem + 1px);
+}
+
 .grid-item-thumbnail {
   max-height: 200px;
   object-fit: cover;