Add Cart button and opening/closing transition

src/components/atoms/CartButton.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+    import { cartOpen, cartAmount } from '$utils/store'
+    import ButtonCircle from './ButtonCircle.svelte'
+
+
+    const handleCartOpening = () => {
+        $cartOpen = true
+    }
+</script>
+
+<div class="shop-location__cart">
+    <ButtonCircle color="purple" on:click={handleCartOpening}>
+        <img src="/images/icons/pin.svg" alt="">
+    </ButtonCircle>
+
+    {#if $cartAmount > 0}
+        <span class="quantity">{$cartAmount}</span>
+    {/if}
+</div>

src/components/organisms/Cart.svelte

@@ -1,18 +1,24 @@
 <script lang="ts">
-    import { getContext } from 'svelte'
+    import { fade, fly } from 'svelte/transition'
+    import { cartOpen } from '$utils/store'
+    import { quartOut } from 'svelte/easing'
     // Components
     import Button from '$components/atoms/Button.svelte'
-    import Image from '$components/atoms/Image.svelte'
     import PosterCart from '$components/molecules/PosterCart.svelte'
 
-    const { locations, shop } = getContext('global')
 
+    // Closing the cart
+    const handleCloseCart = () => {
+        $cartOpen = false
+    }
 </script>
 
-<aside class="cart">
+<aside class="cart"
+    transition:fly={{ x: 48, duration: 600, easing: quartOut }}
+>
     <header class="cart__heading">
         <h2>Cart</h2>
-        <a class="text-label" href="#">Close</a>
+        <button class="text-label" on:click={handleCloseCart}>Close</button>
     </header>
 
     <div class="cart__content">
@@ -36,3 +42,8 @@
         </div>
     </footer>
 </aside>
+
+<div class="cart-overlay"
+    transition:fade={{ duration: 600, easing: quartOut }}
+    on:click={handleCloseCart}
+/>

src/routes/shop/__layout.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
+    import { cartOpen } from '$utils/store'
     // Components
     import Metas from '$components/Metas.svelte'
     import SiteTitle from '$components/atoms/SiteTitle.svelte'
     import Image from '$components/atoms/Image.svelte'
-    import ButtonCircle from '$components/atoms/ButtonCircle.svelte'
+    import CartButton from '$components/atoms/CartButton.svelte'
     import PosterLayout from '$components/layouts/PosterLayout.svelte'
     import Poster from '$components/molecules/Poster.svelte'
     import EmailForm from '$components/molecules/EmailForm.svelte'
@@ -22,7 +23,9 @@
 />
 
 <main class="shop-page">
-    <Cart />
+    {#if $cartOpen}
+        <Cart />
+    {/if}
     <section class="shop-page__intro">
         <a href="/" class="back">
             Back to Houses Of
@@ -47,9 +50,8 @@
                         {/each}
                     </ul>
                 </nav>
-                <button class="button-cart">
+
-                    <span>2</span>
+                <CartButton />
-                </button>
             </div>
         </header>
 
@@ -75,14 +77,8 @@
                 </select>
             </dd>
         </dl>
-        <div class="shop-location__cart">
+
-            <ButtonCircle
+        <CartButton />
-                color= 'purple'
-            >
-                <img src="/images/icons/pin.svg" alt="">
-            </ButtonCircle>
-            <p class="quantity">3</p>
-        </div>
     </nav>
 
     <section class="shop-page__about grid">

src/style/organisms/_cart.scss

@@ -167,4 +167,15 @@
             }
         }
     }
+
+    // Overlay
+    &-overlay {
+        position: fixed;
+        z-index: 99;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: rgba($color-primary, 0.9);
+    }
 }

src/style/pages/_shop.scss

@@ -1,5 +1,6 @@
 .shop-page {
     position: relative;
+
     // Cart
     .cart {
         display: flex;
@@ -27,18 +28,16 @@
         top: 18px;
         left: 20px;
         right: 20px;
-        width: calc(100% - 80px);
         justify-content: space-between;
 
         @include bp (sm) {
             top: 32px;
-            left: 40px;
+            left: 32px;
-            right: 40px;
+            right: 32px;
         }
 
         // Left
         &__left {
-
             dt {
                 color: $color-primary;
                 font-weight: 400;
@@ -78,6 +77,7 @@
                 }
             }
         }
+
         // Cart
         &__cart {
             display: none;
@@ -85,6 +85,7 @@
 
             @include bp (sm) {
                 display: flex;
+                margin-left: auto;
             }
 
             .quantity {
@@ -101,7 +102,7 @@
                 font-weight: 600;
                 color: #fff;
                 background-color: $color-secondary;
-                border-radius: 100vh;
+                border-radius: 100%;
             }
         }
     }
@@ -149,13 +150,13 @@
 
         // Site Title
         h1 {
-            font-size: clamp(#{rem(88px)}, 10vw, #{rem(140px)});
             position: absolute;
             z-index: 2;
             top: 50%;
             left: 50%;
-            transform: translate(-50%, -50%);
             width: 100%;
+            transform: translate3d(-50%, -50%, 0);
+            font-size: clamp(#{rem(88px)}, 10vw, #{rem(140px)});
             text-align: center;
 
             span, strong {

src/utils/store.ts

@@ -0,0 +1,5 @@
+import { writable } from 'svelte/store'
+
+// Shop
+export const cartOpen = writable(false)
+export const cartAmount = writable(3)