Create notification for cart

src/components/molecules/NotificationCart.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+    import { getContext } from 'svelte'
+    // Components
+    import Button from '$components/atoms/Button.svelte'
+    import Image from '$components/atoms/Image.svelte'
+
+    const { locations, shop } = getContext('global')
+
+</script>
+
+<aside class="notification-cart shadow-small">
+    <div class="notification-cart__left">
+        <img src="/images/issue-1.jpg" width={58} height={88} alt="">
+    </div>
+    <div class="notification-cart__right">
+        <h3>Added to cart</h3>
+        <p>Houses Of Melbourne</p>
+    </div>
+</aside>

src/routes/shop/__layout.svelte

@@ -7,6 +7,7 @@
     import CartButton from '$components/atoms/CartButton.svelte'
     import PosterLayout from '$components/layouts/PosterLayout.svelte'
     import Poster from '$components/molecules/Poster.svelte'
+    import NotificationCart from '$components/molecules/NotificationCart.svelte'
     import EmailForm from '$components/molecules/EmailForm.svelte'
     import Cart from '$components/organisms/Cart.svelte'
 
@@ -79,6 +80,9 @@
         </dl>
 
         <CartButton />
+        <div class="notifications">
+            <NotificationCart />
+        </div>
     </nav>
 
     <section class="shop-page__about grid">

src/style/molecules/_notification-cart.scss

@@ -0,0 +1,60 @@
+.notification-cart {
+    display: flex;
+    background-color: #fff;
+    color: $color-gray;
+    border-radius: 6px;
+    align-items: center;
+    overflow: hidden;
+    cursor: pointer;
+
+    // Left Image
+    &__left {
+        margin-right: 20px;
+        width: 100px;
+        height: 150px;
+
+        @include bp (sm) {
+            margin-right: 24px;
+            width: 58px;
+            height: 88px;
+        }
+
+        img {
+            display: block;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+    }
+
+    // Details
+    &__right {
+        display: flex;
+        flex-direction: column;
+        margin-right: 24px;
+        justify-content: center;
+
+        // Poster Title
+        h3 {
+            font-family: $font-serif;
+            color: $color-secondary;
+            font-size: rem(20px);
+
+            @include bp (sm) {
+                font-size: rem(18px);
+            }
+        }
+        // Text
+        p {
+            font-size: rem(12px);
+            line-height: 1.4;
+            max-width: 124px;
+            margin: 4px 0;
+
+            @include bp (sm) {
+                font-size: rem(13px);
+                max-width: none;
+            }
+        }
+    }
+}

src/style/pages/_shop.scss

@@ -105,6 +105,19 @@
                 border-radius: 100%;
             }
         }
+
+        .notifications {
+            position: absolute;
+            z-index: 100;
+            top: 72px;
+            right: 0;
+
+            & > * {
+                &:not(:last-child) {
+                    margin-bottom: 8px;
+                }
+            }
+        }
     }
 
     // Intro

src/style/style.scss

@@ -52,6 +52,7 @@
 @import "molecules/issue";
 @import "molecules/newsletter-form";
 @import "molecules/poster";
+@import "molecules/notification-cart";
 
 // Organisms
 @import "organisms/locations";