Create Aside for Cart

With Poster Cart component

src/components/molecules/PosterCart.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+    import { getContext } from 'svelte'
+    // Components
+    import Button from '$components/atoms/Button.svelte'
+    import Image from '$components/atoms/Image.svelte'
+import Select from './Select.svelte'
+
+    const { locations, shop } = getContext('global')
+
+</script>
+
+<aside class="poster-cart">
+    <div class="poster-cart__left">
+        <img src="/images/issue-1.jpg" alt="">
+    </div>
+    <div class="poster-cart__right">
+        <h3>Poster</h3>
+        <p>Houses Of Melbourne – 30€</p>
+        <Select
+            name="quantity" id="filter_country"
+            options={[
+                {
+                    value: '1',
+                    name: '1',
+                    default: true,
+                    selected: true,
+                },
+            ]}
+        />
+    </div>
+</aside>

src/components/organisms/Cart.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+    import { getContext } from 'svelte'
+    // 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')
+
+</script>
+
+<aside class="cart">
+    <header class="cart__heading">
+        <h2>Cart</h2>
+        <a class="text-label" href="#">Close</a>
+    </header>
+
+    <div class="cart__content">
+        <PosterCart />
+        <PosterCart />
+    </div>
+
+    <footer class="cart__total">
+        <div class="cart__total--sum">
+            <h3>Total</h3>
+            <span>3 articles</span>
+            <p>90€</p>
+        </div>
+        <div class="cart__total--checkout">
+            <p>Shipping will be calculated from the delivery address during the checkout process</p>
+            <Button
+                text="Checkout"
+                color="pink"
+                size="small"
+            />
+        </div>
+    </footer>
+</aside>

src/routes/shop/__layout.svelte

@@ -6,6 +6,7 @@
     import PosterLayout from '$components/layouts/PosterLayout.svelte'
     import Poster from '$components/molecules/Poster.svelte'
     import EmailForm from '$components/molecules/EmailForm.svelte'
+    import Cart from '$components/organisms/Cart.svelte'
 
     export let shop: any
     export let locations: any
@@ -20,6 +21,7 @@
 />
 
 <main class="shop-page">
+    <Cart />
     <section class="shop-page__intro">
         <a href="/" class="back">
             Back to Houses Of
@@ -44,7 +46,7 @@
                         {/each}
                     </ul>
                 </nav>
-                <button class="cart">
+                <button class="button-cart">
                     <span>2</span>
                 </button>
             </div>

src/style/organisms/_cart.scss

@@ -0,0 +1,170 @@
+.cart {
+    display: flex;
+    flex-direction: column;
+    background-color: $color-cream;
+    border-radius: 8px;
+    padding: 20px 20px 24px;
+
+    @include bp (sm) {
+        padding: 24px 32px 0 32px;
+    }
+
+    // Heading
+    &__heading {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding-bottom: 8px;
+        margin-bottom: 24px;
+        border-bottom: 1px solid #E1D0C0;
+
+        @include bp (sm) {
+            padding-bottom: 12px;
+            margin-bottom: 32px;
+        }
+
+        // Title
+        h2 {
+            font-size: rem(32px);
+            font-family: $font-serif;
+            color: $color-secondary;
+
+            @include bp (sm) {
+                font-size: rem(48px);
+            }
+        }
+        // Close
+        a {
+            color: $color-gray;
+            text-decoration: none;
+        }
+    }
+
+    // Poster Cart
+    .poster-cart {
+        display: flex;
+        background-color: #fff;
+        color: $color-gray;
+        margin-bottom: 24px;
+        border-radius: 6px;
+        align-items: center;
+
+        &:last-child {
+            margin-bottom: 0;
+        }
+
+        // Left Image
+        &__left {
+            margin-right: 20px;
+            width: 100px;
+            height: 150px;
+
+            @include bp (sm) {
+                margin-right: 32px;
+                width: 124px;
+                height: 180px;
+            }
+
+            img {
+                display: block;
+                width: 100%;
+                height: 100%;
+                object-fit: cover;
+                border-radius: 6px 0 0 6px;
+            }
+        }
+
+        &__right {
+            // Poster Title
+            h3 {
+                font-family: $font-serif;
+                color: $color-secondary;
+                font-size: rem(20px);
+
+                @include bp (sm) {
+                    font-size: rem(28px);
+                }
+            }
+            // Text
+            p {
+                font-size: rem(12px);
+                line-height: 1.4;
+                max-width: 124px;
+                margin: 8px 0 20px;
+
+                @include bp (sm) {
+                    font-size: rem(13px);
+                }
+            }
+        }
+    }
+
+    // Total
+    &__total {
+        color: $color-gray;
+        margin-bottom: 10px;
+        margin-top: auto;
+        padding-top: 20px;
+
+        // Sum
+        &--sum {
+            display: flex;
+            align-items: baseline;
+            padding-bottom: 10px;
+            margin-bottom: 17px;
+            border-bottom: 1px solid #E1D0C0;
+
+            @include bp (sm) {
+                padding-bottom: 12px;
+                margin-bottom: 32px;
+            }
+
+            h3 {
+                color: $color-text;
+                font-size: rem(26px);
+                font-family: $font-serif;
+
+                @include bp (sm) {
+                    font-size: rem(32px);
+                }
+            }
+            span {
+                font-size: rem(12px);
+                margin-left: 20px;
+
+                @include bp (sm) {
+                    font-size: rem(13px);
+                }
+            }
+            p {
+                color: $color-secondary;
+                font-family: $font-serif;
+                font-size: rem(26px);
+                margin-left: auto;
+
+                @include bp (sm) {
+                    font-size: rem(32px);
+                }
+            }
+        }
+
+        // Checkout
+        &--checkout {
+            display: flex;
+
+            p {
+                font-size: rem(11px);
+                line-height: 1.5;
+                color: $color-gray;
+                max-width: 180px;
+                margin-right: auto;
+
+                @include bp (sm) {
+                    font-size: rem(12px);
+                    line-height: 1.6;
+                    max-width: 190px;
+                }
+            }
+        }
+    }
+}

src/style/pages/_shop.scss

@@ -1,7 +1,115 @@
 .shop-page {
+    position: relative;
+    // Cart
+    .cart {
+        display: flex;
+        position: fixed;
+        z-index: 100;
+        top: 72px;
+        right: 0;
+        width: 100%;
+        height: calc(100vh - 72px);
+
+        @include bp (sm) {
+            top: 24px;
+            right: 24px;
+            width: clamp(320px, 35vw, 500px);
+            height: calc(100vh - 48px);
+            max-height: 1000px;
+        }
+    }
+
+    // Nav
+    .shop-location {
+        display: flex;
+        position: fixed;
+        z-index: 20;
+        top: 18px;
+        left: 20px;
+        right: 20px;
+        width: calc(100% - 80px);
+        justify-content: space-between;
+
+        @include bp (sm) {
+            top: 32px;
+            left: 40px;
+            right: 40px;
+        }
+
+        // Left
+        &__left {
+
+            dt {
+                color: $color-primary;
+                font-weight: 400;
+                line-height: 1;
+                font-size: rem(12px);
+                color: #fff;
+            }
+            dd {
+                img {
+                    display: none;
+
+                    @include bp (sm) {
+                        display: inline-block;
+                        width: 14px;
+                        height: 14px;
+                        margin-right: 8px;
+                    }
+                }
+
+                select {
+                    background: none;
+                    border: none;
+                    font-size: rem(18px);
+                    color: $color-secondary;
+                    font-family: $font-serif;
+                    appearance: none;
+                    line-height: 1;
+
+                    @include bp (sm) {
+                        font-size: rem(24px);
+                    }
+
+
+                    option {
+                        font-size: rem(16px);
+                    }
+                }
+            }
+        }
+        // Cart
+        &__cart {
+            display: none;
+            position: relative;
+
+            @include bp (sm) {
+                display: flex;
+            }
+
+            .quantity {
+                position: absolute;
+                top: 50%;
+                left: -12px;
+                transform: translateY(-50%);
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                width: 22px;
+                height: 22px;
+                font-size: rem(11px);
+                font-weight: 600;
+                color: #fff;
+                background-color: $color-secondary;
+                border-radius: 100vh;
+            }
+        }
+    }
+
     // Intro
     &__intro {
         position: relative;
+        z-index: 30;
         height: 100vh;
         min-height: 800px;
         overflow: hidden;

src/style/style.scss

@@ -59,6 +59,7 @@
 @import "organisms/newsletter";
 @import "organisms/carousel";
 @import "organisms/shop";
+@import "organisms/cart";
 @import "organisms/footer";
 
 // Layouts