From df18245f0dd34f073e0e7035472bd120f10d532e Mon Sep 17 00:00:00 2001
From: KevinMidboe <kevin.midboe@gmail.com>
Date: Sun, 19 Jul 2020 16:11:15 +0200
Subject: [PATCH] Separated cart nav item to separate component.

Includes a badge that shows number of items, connected with store and
links to /cart page.
Always visible on mobile.
---
 frontend/components/Navigation.vue | 31 +++++++-------
 frontend/components/ui/cart.vue    | 67 ++++++++++++++++++++++++++++++
 2 files changed, 83 insertions(+), 15 deletions(-)
 create mode 100644 frontend/components/ui/cart.vue

diff --git a/frontend/components/Navigation.vue b/frontend/components/Navigation.vue
index 071f232..e9ae306 100644
--- a/frontend/components/Navigation.vue
+++ b/frontend/components/Navigation.vue
@@ -1,6 +1,8 @@
 <template>
   <header :class="{ dark: showDarkText }">
     <div class="main col-wrap max-width">
+
+      <!-- Desktop menu -->
       <div class="main-content" v-if="!isMobile">
         <div class="logo">
           <router-link to="/">
@@ -16,13 +18,16 @@
 
         <ul class="secondary-nav-items">
           <li v-for="item in rightNavItems">
-            <router-link :to="item.link" class="">
-              <i v-if="item.icon" :class="'icon ' + item.icon"></i>
-              <span v-else>{{ item.name }}</span>
+            <router-link :to="item.link">
+              <span>{{ item.name }}</span>
             </router-link>
           </li>
+
+          <cart :isDark="showDarkText" />
         </ul>
       </div>
+
+      <!-- Mobile menu -->
       <div class="main-content" v-else>
         <div>
           <router-link to="/">
@@ -31,6 +36,8 @@
         </div>
 
         <div class="menu">
+          <cart :isDark="showDarkText" />
+
           <div class="menu-toggle" :class="{ active: showMenu }" @click="showMenu = !showMenu">
             <span v-if="!showMenu">Menu</span>
             <span v-else>Close menu</span>
@@ -44,7 +51,7 @@
                   <h4>{{ item.name }}</h4>
                   <i class="icon icon--arrow-forward"></i>
                 </router-link>
-              </li>                
+              </li>
             </ul>
           </div>
         </div>
@@ -55,10 +62,11 @@
 
 <script>
 import logo from '@/components/ui/logo';
+import cart from '@/components/ui/cart';
 
 export default {
   name: 'Navigation',
-  components: { logo },
+  components: { logo, cart },
   data() {
     return {
       showDarkText: false,
@@ -78,10 +86,6 @@ export default {
       rightNavItems: [{
         name: 'Admin',
         link: '/admin'
-      },{
-        name: 'Cart',
-        link: '/cart',
-        icon: 'icon--basket-outline'
       }]
     }
   },
@@ -163,10 +167,6 @@ a, span {
   }
 }
 
-.icon {
-  font-size: 1.5rem;
-}
-
 .main-nav-items, .secondary-nav-items {
   display: flex;
   flex-direction: row;
@@ -180,11 +180,12 @@ a, span {
 
 
 .menu {
+  display: flex;
+
   &-toggle {
-    display: flex;
-    justify-content: flex-end;
     position: relative;
     z-index: 2;
+    margin-left: 1rem;
 
     &.active span {
       border-bottom: 2px solid white;
diff --git a/frontend/components/ui/cart.vue b/frontend/components/ui/cart.vue
new file mode 100644
index 0000000..e00f532
--- /dev/null
+++ b/frontend/components/ui/cart.vue
@@ -0,0 +1,67 @@
+
+<template>
+  <router-link to="/cart" class="cart" :class="{ dark: isDark }">
+    <div class="cart-counter">
+      {{ cartInventory.length }}
+    </div>
+    <i class="icon icon--cart-outline"></i>
+  </router-link>
+</template>
+
+<script>
+import store from '@/store'
+export default {
+  props: {
+    isDark: {
+      type: Boolean,
+      default: false,
+      required: false
+    }
+  },
+  data() {
+    return {
+      cartItems: [0,0,0,0]
+    }
+  },
+  computed: {
+    cartInventory() {
+      return store.getters['cartModule/inventory']
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.cart {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  height: min-content;
+
+  cursor: pointer;
+  z-index: 3;
+
+  &-counter {
+    color: var(--color-background);
+    background-color: var(--color-yellow);
+    padding: 0.2rem 0.5rem;
+    height: min-content;
+
+    margin-right: 0.5rem;
+  }
+
+  &:hover {
+    border-bottom: unset;
+  }
+}
+
+.dark .icon {
+  color: var(--color-background);
+}
+
+.icon {
+  font-size: 1.5rem;
+  color: white;
+}
+</style>
+