From cc009b1ffd8dd888a181675e7155f1150195bfc6 Mon Sep 17 00:00:00 2001
From: KevinMidboe <kevin.midboe@gmail.com>
Date: Tue, 21 Jul 2020 13:22:08 +0200
Subject: [PATCH] Cart icon follows scroll on all shop pages. w/ shopping cart
 icon & lower desktop positioning.

---
 frontend/components/ui/cart.vue | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/frontend/components/ui/cart.vue b/frontend/components/ui/cart.vue
index 4f62a0f..90ec0d8 100644
--- a/frontend/components/ui/cart.vue
+++ b/frontend/components/ui/cart.vue
@@ -27,9 +27,14 @@ export default {
       isHeaderOffScreen: false
     }
   },
+  watch: {
+    $route(to, from) {
+      this.isHeaderOffScreen = false;
+    }
+  },
   mounted() {
     let observer = new IntersectionObserver((entry, observer) => {
-      if (this.$route.name == 'Shop') {
+      if (this.$route.path.includes('shop')) {
         const isHeaderIntersecting = entry[0].isIntersecting;
         this.isHeaderOffScreen = !isHeaderIntersecting;
       } else {
@@ -52,6 +57,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import '/frontend/styles/variables';
+
 .cart {
   display: flex;
   flex-direction: row;
@@ -75,10 +82,18 @@ export default {
     top: 0.5rem;
     right: -6px;
     padding: 0.5rem;
-    padding-right: 2.5rem;
+    padding-right: 1.5rem;
     background-color: var(--color-background);
     border-radius: 6px;
     border: 0px solid !important;
+
+    .icon {
+      color: white;
+    }
+
+    @include desktop {
+      top: 1.5rem;
+    }
   }
 
   &:hover {