From 60f2ee526d049bcc60519f0f078a6b10536941c6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Sun, 7 Nov 2021 11:47:51 +0100
Subject: [PATCH] Reveal Shop header when scrolling past Intro block

---
 src/routes/shop/__layout.svelte | 27 ++++++++++++++++++++++++++-
 src/style/pages/_shop.scss      |  8 ++++++++
 2 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/src/routes/shop/__layout.svelte b/src/routes/shop/__layout.svelte
index 4c9dc5e..97793e1 100644
--- a/src/routes/shop/__layout.svelte
+++ b/src/routes/shop/__layout.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     import { cartOpen } from '$utils/store'
+    import { onMount } from 'svelte'
     // Components
     import Metas from '$components/Metas.svelte'
     import SiteTitle from '$components/atoms/SiteTitle.svelte'
@@ -14,6 +15,29 @@
     export let locations: any
     export let posters: any
     export let product: any
+
+    let navEl: HTMLElement, introEl: HTMLElement
+    let navObserver: IntersectionObserver
+
+
+    onMount(async () => {
+        // Reveal the nav past the Intro
+        navObserver = new IntersectionObserver(entries => {
+            entries.forEach(entry => {
+                navEl.classList.toggle('is-visible', !entry.isIntersecting)
+            })
+        }, {
+            threshold: 0,
+            rootMargin: '0px 0px 0px'
+        })
+        navObserver.observe(introEl)
+
+
+        // Destroy
+        return () => {
+            navObserver && navObserver.unobserve(introEl)
+        }
+    })
 </script>
 
 <Metas
@@ -27,6 +51,7 @@
         <Cart />
     {/if}
     <section class="shop-page__intro">
+    <section class="shop-page__intro" bind:this={introEl}>
         <a href="/" class="back">
             Back to Houses Of
         </a>
@@ -67,7 +92,7 @@
         />
     </section>
 
-    <nav class="shop-location">
+    <nav class="shop-location" bind:this={navEl}>
         <dl class="shop-location__left">
             <dt class="text-label">shop your city</dt>
             <dd>
diff --git a/src/style/pages/_shop.scss b/src/style/pages/_shop.scss
index 8eed7ac..ffa8845 100644
--- a/src/style/pages/_shop.scss
+++ b/src/style/pages/_shop.scss
@@ -29,6 +29,9 @@
         left: 20px;
         right: 20px;
         justify-content: space-between;
+        transform: translate3d(0, -96px, 0);
+        transition: transform 1s var(--ease-quart);
+        transition-delay: 100ms;
 
         @include bp (sm) {
             top: 32px;
@@ -36,6 +39,11 @@
             right: 32px;
         }
 
+        // Visible state
+        &.is-visible {
+            transform: translate3d(0,0,0);
+        }
+
         // Left
         &__left {
             dt {