Add Cart button and opening/closing transition

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>
-                </button>
+
+                <CartButton />
             </div>
         </header>
 
@@ -75,14 +77,8 @@
                 </select>
             </dd>
         </dl>
-        <div class="shop-location__cart">
-            <ButtonCircle
-                color= 'purple'
-            >
-                <img src="/images/icons/pin.svg" alt="">
-            </ButtonCircle>
-            <p class="quantity">3</p>
-        </div>
+
+        <CartButton />
     </nav>
 
     <section class="shop-page__about grid">