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">
@@ -35,4 +41,9 @@
             />
         </div>
     </footer>
-</aside>
+</aside>
+
+<div class="cart-overlay"
+    transition:fade={{ duration: 600, easing: quartOut }}
+    on:click={handleCloseCart}
+/>