From 7c5808e7db3507985b8a6059f9451bc19f530b02 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Tue, 20 Sep 2022 10:59:19 +0200
Subject: [PATCH] Set Shop nav left scroll of current link if further than half
 of viewport width

---
 src/components/organisms/ShopBanner.svelte | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/components/organisms/ShopBanner.svelte b/src/components/organisms/ShopBanner.svelte
index 4b6e701..3813d0b 100644
--- a/src/components/organisms/ShopBanner.svelte
+++ b/src/components/organisms/ShopBanner.svelte
@@ -20,7 +20,7 @@
     const { shop, shopLocations }: any = getContext('shop')
 
     let navObserver: IntersectionObserver
-    let introEl: HTMLElement
+    let introEl: HTMLElement, navChooseEl: HTMLElement
     let scrolledPastIntro = false
 
 
@@ -36,6 +36,14 @@
         })
         navObserver.observe(introEl)
 
+        // Set navigation horizontal scroll depending on current link position
+        const navChooseActive: HTMLElement = navChooseEl.querySelector('.is-active')
+        const offsetLeft = navChooseActive.offsetLeft
+
+        if (offsetLeft > window.innerWidth / 2) {
+            navChooseEl.scrollLeft = offsetLeft
+        }
+
 
         /**
          * Animations
@@ -114,7 +122,7 @@
         <div class="container">
             <p class="text-label">Choose a city</p>
             <nav>
-                <ul data-sveltekit-noscroll data-sveltekit-prefetch>
+                <ul data-sveltekit-noscroll data-sveltekit-prefetch bind:this={navChooseEl}>
                     {#each shopLocations as { name, slug }}
                         <li class:is-active={product && slug === product.location.slug}>
                             <a href="/shop/poster-{slug}" on:click={() => $smoothScroll.scrollTo('#poster', { duration: 2 })}>