From 364360b165b6c0db2e8ab3fb726fe49074ced3a0 Mon Sep 17 00:00:00 2001
From: w3bdesign <45217974+w3bdesign@users.noreply.github.com>
Date: Thu, 28 Jan 2021 03:21:48 +0100
Subject: [PATCH 1/5] Remove unused component references

---
 public/js/app.js                              | 289 +++++++++---------
 resources/js/app.js                           |   7 +-
 .../components/{MainIndex.vue => Index.vue}   |   0
 resources/js/components/Layouts/Layout.vue    |   1 -
 4 files changed, 145 insertions(+), 152 deletions(-)
 rename resources/js/components/{MainIndex.vue => Index.vue} (100%)

diff --git a/public/js/app.js b/public/js/app.js
index 79eca114..4c7a13df 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -16306,31 +16306,10 @@ __webpack_require__.r(__webpack_exports__);
 
 /***/ }),
 
-/***/ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/Layouts/Layout.vue?vue&type=script&lang=js":
-/*!********************************************************************************************************************************************************************************************************!*\
-  !*** ./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/Layouts/Layout.vue?vue&type=script&lang=js ***!
-  \********************************************************************************************************************************************************************************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "default": () => __WEBPACK_DEFAULT_EXPORT__
-/* harmony export */ });
-/* harmony import */ var _Header_Navbar__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../Header/Navbar */ "./resources/js/components/Header/Navbar.vue");
-
-/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({
-  components: {
-    NavBar: _Header_Navbar__WEBPACK_IMPORTED_MODULE_0__.default
-  }
-});
-
-/***/ }),
-
-/***/ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/MainIndex.vue?vue&type=script&lang=js":
-/*!***************************************************************************************************************************************************************************************************!*\
-  !*** ./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/MainIndex.vue?vue&type=script&lang=js ***!
-  \***************************************************************************************************************************************************************************************************/
+/***/ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/Index.vue?vue&type=script&lang=js":
+/*!***********************************************************************************************************************************************************************************************!*\
+  !*** ./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/Index.vue?vue&type=script&lang=js ***!
+  \***********************************************************************************************************************************************************************************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
@@ -16375,6 +16354,27 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 /***/ }),
 
+/***/ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/Layouts/Layout.vue?vue&type=script&lang=js":
+/*!********************************************************************************************************************************************************************************************************!*\
+  !*** ./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/Layouts/Layout.vue?vue&type=script&lang=js ***!
+  \********************************************************************************************************************************************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => __WEBPACK_DEFAULT_EXPORT__
+/* harmony export */ });
+/* harmony import */ var _Header_Navbar__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../Header/Navbar */ "./resources/js/components/Header/Navbar.vue");
+
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({
+  components: {
+    NavBar: _Header_Navbar__WEBPACK_IMPORTED_MODULE_0__.default
+  }
+});
+
+/***/ }),
+
 /***/ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/Products/Products.vue?vue&type=script&lang=js":
 /*!***********************************************************************************************************************************************************************************************************!*\
   !*** ./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/Products/Products.vue?vue&type=script&lang=js ***!
@@ -16551,6 +16551,55 @@ var render = /*#__PURE__*/_withId(function (_ctx, _cache, $props, $setup, $data,
 
 /***/ }),
 
+/***/ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/Index.vue?vue&type=template&id=bb962f12":
+/*!***************************************************************************************************************************************************************************************************************************************************************************!*\
+  !*** ./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/Index.vue?vue&type=template&id=bb962f12 ***!
+  \***************************************************************************************************************************************************************************************************************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "render": () => /* binding */ render
+/* harmony export */ });
+/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue */ "./node_modules/vue/dist/vue.esm-bundler.js");
+
+
+var _hoisted_1 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)(" Laravel Vue 3 Ecommerce ");
+
+var _hoisted_2 = {
+  key: 1
+};
+
+var _hoisted_3 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("br", null, null, -1
+/* HOISTED */
+);
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _component_loading_spinner = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("loading-spinner");
+
+  return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("div", null, [_hoisted_1, _ctx.loading ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)(_component_loading_spinner, {
+    key: 0
+  })) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true), _ctx.products ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("div", _hoisted_2, [((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(true), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)(vue__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, (0,vue__WEBPACK_IMPORTED_MODULE_0__.renderList)(_ctx.products, function (product) {
+    return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("div", {
+      key: product.id
+    }, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(product.id) + " - " + (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(product.name) + " - " + (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(product.description) + " - " + (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(product.price), 1
+    /* TEXT */
+    );
+  }), 128
+  /* KEYED_FRAGMENT */
+  )), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("button", {
+    "class": "p-2 mt-4 mb-4 text-lg font-bold text-white bg-blue-500 rounded",
+    onClick: _cache[1] || (_cache[1] = function ($event) {
+      return _ctx.$store.commit('addProductToCart', 'clicktestproduct');
+    })
+  }, " Add to cart button"), _hoisted_3, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)(" Cart: " + (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(_ctx.$store.state.cart), 1
+  /* TEXT */
+  )])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true)]);
+}
+
+/***/ }),
+
 /***/ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/Layouts/Layout.vue?vue&type=template&id=4759768a":
 /*!************************************************************************************************************************************************************************************************************************************************************************************!*\
   !*** ./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/Layouts/Layout.vue?vue&type=template&id=4759768a ***!
@@ -16565,9 +16614,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue */ "./node_modules/vue/dist/vue.esm-bundler.js");
 
 
-var _hoisted_1 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)(" Layout! ");
-
-var _hoisted_2 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("footer", null, null, -1
+var _hoisted_1 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("footer", null, null, -1
 /* HOISTED */
 );
 
@@ -16576,7 +16623,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 
   var _component_router_view = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("router-view");
 
-  return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)(vue__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, [_hoisted_1, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_nav_bar), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_router_view), _hoisted_2], 64
+  return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)(vue__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_nav_bar), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_router_view), _hoisted_1], 64
   /* STABLE_FRAGMENT */
   );
 }
@@ -16612,55 +16659,6 @@ function render(_ctx, _cache) {
 
 /***/ }),
 
-/***/ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/MainIndex.vue?vue&type=template&id=12fed784":
-/*!*******************************************************************************************************************************************************************************************************************************************************************************!*\
-  !*** ./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/MainIndex.vue?vue&type=template&id=12fed784 ***!
-  \*******************************************************************************************************************************************************************************************************************************************************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "render": () => /* binding */ render
-/* harmony export */ });
-/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue */ "./node_modules/vue/dist/vue.esm-bundler.js");
-
-
-var _hoisted_1 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)(" Laravel Vue 3 Ecommerce ");
-
-var _hoisted_2 = {
-  key: 1
-};
-
-var _hoisted_3 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("br", null, null, -1
-/* HOISTED */
-);
-
-function render(_ctx, _cache, $props, $setup, $data, $options) {
-  var _component_loading_spinner = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("loading-spinner");
-
-  return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("div", null, [_hoisted_1, _ctx.loading ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)(_component_loading_spinner, {
-    key: 0
-  })) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true), _ctx.products ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("div", _hoisted_2, [((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(true), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)(vue__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, (0,vue__WEBPACK_IMPORTED_MODULE_0__.renderList)(_ctx.products, function (product) {
-    return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("div", {
-      key: product.id
-    }, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(product.id) + " - " + (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(product.name) + " - " + (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(product.description) + " - " + (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(product.price), 1
-    /* TEXT */
-    );
-  }), 128
-  /* KEYED_FRAGMENT */
-  )), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("button", {
-    "class": "p-2 mt-4 mb-4 text-lg font-bold text-white bg-blue-500 rounded",
-    onClick: _cache[1] || (_cache[1] = function ($event) {
-      return _ctx.$store.commit('addProductToCart', 'clicktestproduct');
-    })
-  }, " Add to cart button"), _hoisted_3, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)(" Cart: " + (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(_ctx.$store.state.cart), 1
-  /* TEXT */
-  )])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true)]);
-}
-
-/***/ }),
-
 /***/ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/Products/Products.vue?vue&type=template&id=4a553918":
 /*!***************************************************************************************************************************************************************************************************************************************************************************************!*\
   !*** ./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/Products/Products.vue?vue&type=template&id=4a553918 ***!
@@ -16687,13 +16685,12 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue */ "./node_modules/vue/dist/vue.esm-bundler.js");
-/* harmony import */ var vue_router__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! vue-router */ "./node_modules/vue-router/dist/vue-router.esm-bundler.js");
+/* harmony import */ var vue_router__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! vue-router */ "./node_modules/vue-router/dist/vue-router.esm-bundler.js");
 /* harmony import */ var _store_index__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./store/index */ "./resources/js/store/index.js");
 /* harmony import */ var _components_Layouts_Layout_vue__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./components/Layouts/Layout.vue */ "./resources/js/components/Layouts/Layout.vue");
-/* harmony import */ var _components_MainIndex_vue__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./components/MainIndex.vue */ "./resources/js/components/MainIndex.vue");
-/* harmony import */ var _components_Header_Navbar_vue__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./components/Header/Navbar.vue */ "./resources/js/components/Header/Navbar.vue");
-/* harmony import */ var _components_Products_Products_vue__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./components/Products/Products.vue */ "./resources/js/components/Products/Products.vue");
-/* harmony import */ var _components_Categories_Categories_vue__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./components/Categories/Categories.vue */ "./resources/js/components/Categories/Categories.vue");
+/* harmony import */ var _components_Index_vue__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./components/Index.vue */ "./resources/js/components/Index.vue");
+/* harmony import */ var _components_Products_Products_vue__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./components/Products/Products.vue */ "./resources/js/components/Products/Products.vue");
+/* harmony import */ var _components_Categories_Categories_vue__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./components/Categories/Categories.vue */ "./resources/js/components/Categories/Categories.vue");
 __webpack_require__(/*! ./bootstrap */ "./resources/js/bootstrap.js");
 
 
@@ -16703,28 +16700,26 @@ __webpack_require__(/*! ./bootstrap */ "./resources/js/bootstrap.js");
 
 
 
-
 var routes = [{
   path: "/",
-  component: _components_MainIndex_vue__WEBPACK_IMPORTED_MODULE_3__.default
+  component: _components_Index_vue__WEBPACK_IMPORTED_MODULE_3__.default
 }, {
   path: "/products",
-  component: _components_Products_Products_vue__WEBPACK_IMPORTED_MODULE_5__.default
+  component: _components_Products_Products_vue__WEBPACK_IMPORTED_MODULE_4__.default
 }, {
   path: "/categories",
-  component: _components_Categories_Categories_vue__WEBPACK_IMPORTED_MODULE_6__.default
+  component: _components_Categories_Categories_vue__WEBPACK_IMPORTED_MODULE_5__.default
 }];
-var router = (0,vue_router__WEBPACK_IMPORTED_MODULE_7__.createRouter)({
-  history: (0,vue_router__WEBPACK_IMPORTED_MODULE_7__.createWebHashHistory)(),
+var router = (0,vue_router__WEBPACK_IMPORTED_MODULE_6__.createRouter)({
+  history: (0,vue_router__WEBPACK_IMPORTED_MODULE_6__.createWebHashHistory)(),
   routes: routes
 });
 (0,vue__WEBPACK_IMPORTED_MODULE_0__.createApp)({
   components: {
     Layout: _components_Layouts_Layout_vue__WEBPACK_IMPORTED_MODULE_2__.default,
-    Navbar: _components_Header_Navbar_vue__WEBPACK_IMPORTED_MODULE_4__.default,
-    MainIndex: _components_MainIndex_vue__WEBPACK_IMPORTED_MODULE_3__.default,
-    Products: _components_Products_Products_vue__WEBPACK_IMPORTED_MODULE_5__.default,
-    Categories: _components_Categories_Categories_vue__WEBPACK_IMPORTED_MODULE_6__.default
+    Index: _components_Index_vue__WEBPACK_IMPORTED_MODULE_3__.default,
+    Products: _components_Products_Products_vue__WEBPACK_IMPORTED_MODULE_4__.default,
+    Categories: _components_Categories_Categories_vue__WEBPACK_IMPORTED_MODULE_5__.default
   }
 }).use(_store_index__WEBPACK_IMPORTED_MODULE_1__.default).use(router).mount("#app");
 
@@ -34641,6 +34636,32 @@ _Navbar_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__.default.__file
 
 /***/ }),
 
+/***/ "./resources/js/components/Index.vue":
+/*!*******************************************!*\
+  !*** ./resources/js/components/Index.vue ***!
+  \*******************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => __WEBPACK_DEFAULT_EXPORT__
+/* harmony export */ });
+/* harmony import */ var _Index_vue_vue_type_template_id_bb962f12__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Index.vue?vue&type=template&id=bb962f12 */ "./resources/js/components/Index.vue?vue&type=template&id=bb962f12");
+/* harmony import */ var _Index_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Index.vue?vue&type=script&lang=js */ "./resources/js/components/Index.vue?vue&type=script&lang=js");
+
+
+
+_Index_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__.default.render = _Index_vue_vue_type_template_id_bb962f12__WEBPACK_IMPORTED_MODULE_0__.render
+/* hot reload */
+if (false) {}
+
+_Index_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__.default.__file = "resources/js/components/Index.vue"
+
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (_Index_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__.default);
+
+/***/ }),
+
 /***/ "./resources/js/components/Layouts/Layout.vue":
 /*!****************************************************!*\
   !*** ./resources/js/components/Layouts/Layout.vue ***!
@@ -34691,32 +34712,6 @@ script.__file = "resources/js/components/LoadingSpinner/LoadingSpinner.vue"
 
 /***/ }),
 
-/***/ "./resources/js/components/MainIndex.vue":
-/*!***********************************************!*\
-  !*** ./resources/js/components/MainIndex.vue ***!
-  \***********************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "default": () => __WEBPACK_DEFAULT_EXPORT__
-/* harmony export */ });
-/* harmony import */ var _MainIndex_vue_vue_type_template_id_12fed784__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./MainIndex.vue?vue&type=template&id=12fed784 */ "./resources/js/components/MainIndex.vue?vue&type=template&id=12fed784");
-/* harmony import */ var _MainIndex_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./MainIndex.vue?vue&type=script&lang=js */ "./resources/js/components/MainIndex.vue?vue&type=script&lang=js");
-
-
-
-_MainIndex_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__.default.render = _MainIndex_vue_vue_type_template_id_12fed784__WEBPACK_IMPORTED_MODULE_0__.render
-/* hot reload */
-if (false) {}
-
-_MainIndex_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__.default.__file = "resources/js/components/MainIndex.vue"
-
-/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (_MainIndex_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__.default);
-
-/***/ }),
-
 /***/ "./resources/js/components/Products/Products.vue":
 /*!*******************************************************!*\
   !*** ./resources/js/components/Products/Products.vue ***!
@@ -34775,34 +34770,34 @@ __webpack_require__.r(__webpack_exports__);
 
 /***/ }),
 
-/***/ "./resources/js/components/Layouts/Layout.vue?vue&type=script&lang=js":
-/*!****************************************************************************!*\
-  !*** ./resources/js/components/Layouts/Layout.vue?vue&type=script&lang=js ***!
-  \****************************************************************************/
+/***/ "./resources/js/components/Index.vue?vue&type=script&lang=js":
+/*!*******************************************************************!*\
+  !*** ./resources/js/components/Index.vue?vue&type=script&lang=js ***!
+  \*******************************************************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "default": () => /* reexport safe */ _node_modules_babel_loader_lib_index_js_clonedRuleSet_5_use_0_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_Layout_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_0__.default
+/* harmony export */   "default": () => /* reexport safe */ _node_modules_babel_loader_lib_index_js_clonedRuleSet_5_use_0_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_Index_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_0__.default
 /* harmony export */ });
-/* harmony import */ var _node_modules_babel_loader_lib_index_js_clonedRuleSet_5_use_0_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_Layout_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../../node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!../../../../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./Layout.vue?vue&type=script&lang=js */ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/Layouts/Layout.vue?vue&type=script&lang=js");
+/* harmony import */ var _node_modules_babel_loader_lib_index_js_clonedRuleSet_5_use_0_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_Index_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!../../../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./Index.vue?vue&type=script&lang=js */ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/Index.vue?vue&type=script&lang=js");
  
 
 /***/ }),
 
-/***/ "./resources/js/components/MainIndex.vue?vue&type=script&lang=js":
-/*!***********************************************************************!*\
-  !*** ./resources/js/components/MainIndex.vue?vue&type=script&lang=js ***!
-  \***********************************************************************/
+/***/ "./resources/js/components/Layouts/Layout.vue?vue&type=script&lang=js":
+/*!****************************************************************************!*\
+  !*** ./resources/js/components/Layouts/Layout.vue?vue&type=script&lang=js ***!
+  \****************************************************************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "default": () => /* reexport safe */ _node_modules_babel_loader_lib_index_js_clonedRuleSet_5_use_0_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_MainIndex_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_0__.default
+/* harmony export */   "default": () => /* reexport safe */ _node_modules_babel_loader_lib_index_js_clonedRuleSet_5_use_0_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_Layout_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_0__.default
 /* harmony export */ });
-/* harmony import */ var _node_modules_babel_loader_lib_index_js_clonedRuleSet_5_use_0_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_MainIndex_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!../../../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./MainIndex.vue?vue&type=script&lang=js */ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/MainIndex.vue?vue&type=script&lang=js");
+/* harmony import */ var _node_modules_babel_loader_lib_index_js_clonedRuleSet_5_use_0_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_Layout_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../../node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!../../../../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./Layout.vue?vue&type=script&lang=js */ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/Layouts/Layout.vue?vue&type=script&lang=js");
  
 
 /***/ }),
@@ -34853,6 +34848,22 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _node_modules_babel_loader_lib_index_js_clonedRuleSet_5_use_0_node_modules_vue_loader_dist_templateLoader_js_ruleSet_1_rules_2_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_Navbar_vue_vue_type_template_id_41f95097_scoped_true__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../../node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!../../../../node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!../../../../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./Navbar.vue?vue&type=template&id=41f95097&scoped=true */ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/Header/Navbar.vue?vue&type=template&id=41f95097&scoped=true");
 
 
+/***/ }),
+
+/***/ "./resources/js/components/Index.vue?vue&type=template&id=bb962f12":
+/*!*************************************************************************!*\
+  !*** ./resources/js/components/Index.vue?vue&type=template&id=bb962f12 ***!
+  \*************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "render": () => /* reexport safe */ _node_modules_babel_loader_lib_index_js_clonedRuleSet_5_use_0_node_modules_vue_loader_dist_templateLoader_js_ruleSet_1_rules_2_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_Index_vue_vue_type_template_id_bb962f12__WEBPACK_IMPORTED_MODULE_0__.render
+/* harmony export */ });
+/* harmony import */ var _node_modules_babel_loader_lib_index_js_clonedRuleSet_5_use_0_node_modules_vue_loader_dist_templateLoader_js_ruleSet_1_rules_2_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_Index_vue_vue_type_template_id_bb962f12__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!../../../node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!../../../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./Index.vue?vue&type=template&id=bb962f12 */ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/Index.vue?vue&type=template&id=bb962f12");
+
+
 /***/ }),
 
 /***/ "./resources/js/components/Layouts/Layout.vue?vue&type=template&id=4759768a":
@@ -34885,22 +34896,6 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _node_modules_babel_loader_lib_index_js_clonedRuleSet_5_use_0_node_modules_vue_loader_dist_templateLoader_js_ruleSet_1_rules_2_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_LoadingSpinner_vue_vue_type_template_id_2f541e94__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../../node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!../../../../node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!../../../../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./LoadingSpinner.vue?vue&type=template&id=2f541e94 */ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/LoadingSpinner/LoadingSpinner.vue?vue&type=template&id=2f541e94");
 
 
-/***/ }),
-
-/***/ "./resources/js/components/MainIndex.vue?vue&type=template&id=12fed784":
-/*!*****************************************************************************!*\
-  !*** ./resources/js/components/MainIndex.vue?vue&type=template&id=12fed784 ***!
-  \*****************************************************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "render": () => /* reexport safe */ _node_modules_babel_loader_lib_index_js_clonedRuleSet_5_use_0_node_modules_vue_loader_dist_templateLoader_js_ruleSet_1_rules_2_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_MainIndex_vue_vue_type_template_id_12fed784__WEBPACK_IMPORTED_MODULE_0__.render
-/* harmony export */ });
-/* harmony import */ var _node_modules_babel_loader_lib_index_js_clonedRuleSet_5_use_0_node_modules_vue_loader_dist_templateLoader_js_ruleSet_1_rules_2_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_MainIndex_vue_vue_type_template_id_12fed784__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!../../../node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!../../../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./MainIndex.vue?vue&type=template&id=12fed784 */ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/MainIndex.vue?vue&type=template&id=12fed784");
-
-
 /***/ }),
 
 /***/ "./resources/js/components/Products/Products.vue?vue&type=template&id=4a553918":
diff --git a/resources/js/app.js b/resources/js/app.js
index 52cfa37c..d2eaad94 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -6,13 +6,12 @@ import { createRouter, createWebHashHistory } from "vue-router";
 import store from "./store/index";
 
 import Layout from "./components/Layouts/Layout.vue";
-import MainIndex from "./components/MainIndex.vue";
-import Navbar from "./components/Header/Navbar.vue";
+import Index from "./components/Index.vue";
 import Products from "./components/Products/Products.vue";
 import Categories from "./components/Categories/Categories.vue";
 
 const routes = [
-    { path: "/", component: MainIndex },
+    { path: "/", component: Index },
     { path: "/products", component: Products },
     { path: "/categories", component: Categories },
 ];
@@ -23,7 +22,7 @@ const router = createRouter({
 });
 
 createApp({
-    components: { Layout, Navbar, MainIndex, Products, Categories },
+    components: { Layout, Index, Products, Categories },
 })
     .use(store)
     .use(router)
diff --git a/resources/js/components/MainIndex.vue b/resources/js/components/Index.vue
similarity index 100%
rename from resources/js/components/MainIndex.vue
rename to resources/js/components/Index.vue
diff --git a/resources/js/components/Layouts/Layout.vue b/resources/js/components/Layouts/Layout.vue
index 2d8b1250..ffbf3bd8 100644
--- a/resources/js/components/Layouts/Layout.vue
+++ b/resources/js/components/Layouts/Layout.vue
@@ -1,5 +1,4 @@
 <template>
-    Layout!
     <nav-bar />
     <router-view></router-view>
     <footer />

From 8bffed87d75185083d81ad9c52b4b431421ad406 Mon Sep 17 00:00:00 2001
From: w3bdesign <45217974+w3bdesign@users.noreply.github.com>
Date: Thu, 28 Jan 2021 03:51:55 +0100
Subject: [PATCH 2/5] Start work on mobile menu

---
 public/js/app.js                              | 146 +++++++++++++++---
 resources/js/components/Header/MobileMenu.vue |   4 +-
 resources/js/components/Header/Navbar.vue     |   4 +-
 resources/views/welcome.blade.php             |   4 +-
 4 files changed, 131 insertions(+), 27 deletions(-)

diff --git a/public/js/app.js b/public/js/app.js
index 4c7a13df..bc313999 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -16289,6 +16289,21 @@ __webpack_require__.r(__webpack_exports__);
 
 /***/ }),
 
+/***/ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/Header/MobileMenu.vue?vue&type=script&lang=js":
+/*!***********************************************************************************************************************************************************************************************************!*\
+  !*** ./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/Header/MobileMenu.vue?vue&type=script&lang=js ***!
+  \***********************************************************************************************************************************************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => __WEBPACK_DEFAULT_EXPORT__
+/* harmony export */ });
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({});
+
+/***/ }),
+
 /***/ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/Header/Navbar.vue?vue&type=script&lang=js":
 /*!*******************************************************************************************************************************************************************************************************!*\
   !*** ./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/Header/Navbar.vue?vue&type=script&lang=js ***!
@@ -16300,8 +16315,13 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "default": () => __WEBPACK_DEFAULT_EXPORT__
 /* harmony export */ });
+/* harmony import */ var _MobileMenu__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./MobileMenu */ "./resources/js/components/Header/MobileMenu.vue");
+
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({
-  name: "Navbar"
+  name: "Navbar",
+  components: {
+    MobileMenu: _MobileMenu__WEBPACK_IMPORTED_MODULE_0__.default
+  }
 });
 
 /***/ }),
@@ -16407,6 +16427,28 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 
 /***/ }),
 
+/***/ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/Header/MobileMenu.vue?vue&type=template&id=a706a4b0":
+/*!***************************************************************************************************************************************************************************************************************************************************************************************!*\
+  !*** ./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/Header/MobileMenu.vue?vue&type=template&id=a706a4b0 ***!
+  \***************************************************************************************************************************************************************************************************************************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "render": () => /* binding */ render
+/* harmony export */ });
+/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue */ "./node_modules/vue/dist/vue.esm-bundler.js");
+
+var _hoisted_1 = {
+  "class": "w-5/12 lg:hidden"
+};
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("div", _hoisted_1, "Mobile");
+}
+
+/***/ }),
+
 /***/ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/Header/Navbar.vue?vue&type=template&id=41f95097&scoped=true":
 /*!***********************************************************************************************************************************************************************************************************************************************************************************************!*\
   !*** ./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/Header/Navbar.vue?vue&type=template&id=41f95097&scoped=true ***!
@@ -16448,67 +16490,65 @@ var _hoisted_3 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("
 /* HOISTED */
 );
 
-var _hoisted_4 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)(" MobileMenu ");
-
-var _hoisted_5 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", {
+var _hoisted_4 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", {
   "class": "hidden lg:w-1/12 lg:block"
 }, null, -1
 /* HOISTED */
 );
 
-var _hoisted_6 = {
+var _hoisted_5 = {
   id: "nav-content",
   "class": "hidden w-full mt-4 bg-black lg:w-8/12 lg:block lg:bg-white lg:mt-0 lg:text-right",
   "aria-expanded": "false"
 };
-var _hoisted_7 = {
+var _hoisted_6 = {
   "class": "px-6 lg:px-0 lg:pt-5 xl:pt-7"
 };
-var _hoisted_8 = {
+var _hoisted_7 = {
   id: "block-main",
   role: "navigation",
   "aria-labelledby": "block-main-menu"
 };
-var _hoisted_9 = {
+var _hoisted_8 = {
   "class": "items-center justify-end flex-1 pr-4 -mr-4 list-reset lg:flex"
 };
-var _hoisted_10 = {
+var _hoisted_9 = {
   "class": "inline-block py-2 text-xl font-semibold no-underline lg:text-base lg:px-4"
 };
 
-var _hoisted_11 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("span", {
+var _hoisted_10 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("span", {
   "class": "text-xl text-white no-underline lg:text-black is-active"
 }, " Home ", -1
 /* HOISTED */
 );
 
-var _hoisted_12 = {
+var _hoisted_11 = {
   "class": "inline-block py-2 text-xl font-semibold no-underline lg:text-base lg:px-4"
 };
 
-var _hoisted_13 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("span", {
+var _hoisted_12 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("span", {
   "class": "text-xl text-white no-underline lg:text-black"
 }, "Products", -1
 /* HOISTED */
 );
 
-var _hoisted_14 = {
+var _hoisted_13 = {
   "class": "inline-block py-2 text-xl font-semibold no-underline lg:text-base lg:px-4"
 };
 
-var _hoisted_15 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("span", {
+var _hoisted_14 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("span", {
   "class": "text-xl text-white no-underline lg:text-black is-active"
 }, "Categories", -1
 /* HOISTED */
 );
 
-var _hoisted_16 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("li", {
+var _hoisted_15 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("li", {
   "class": "inline-block py-2 text-xl font-semibold no-underline lg:text-base lg:px-4"
 }, " Search ", -1
 /* HOISTED */
 );
 
-var _hoisted_17 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("li", {
+var _hoisted_16 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("li", {
   "class": "inline-block py-2 text-xl font-semibold no-underline lg:text-base lg:px-4"
 }, " Shopping cart ", -1
 /* HOISTED */
@@ -16517,36 +16557,38 @@ var _hoisted_17 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(
 (0,vue__WEBPACK_IMPORTED_MODULE_0__.popScopeId)();
 
 var render = /*#__PURE__*/_withId(function (_ctx, _cache, $props, $setup, $data, $options) {
+  var _component_mobile_menu = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("mobile-menu");
+
   var _component_router_link = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("router-link");
 
-  return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("header", _hoisted_1, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_2, [_hoisted_3, _hoisted_4, _hoisted_5, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_6, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_7, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", null, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("nav", _hoisted_8, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("ul", _hoisted_9, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("li", _hoisted_10, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_router_link, {
+  return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("header", _hoisted_1, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_2, [_hoisted_3, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_mobile_menu), _hoisted_4, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_5, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_6, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", null, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("nav", _hoisted_7, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("ul", _hoisted_8, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("li", _hoisted_9, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_router_link, {
     to: "/"
   }, {
     "default": _withId(function () {
-      return [_hoisted_11];
+      return [_hoisted_10];
     }),
     _: 1
     /* STABLE */
 
-  })]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("li", _hoisted_12, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_router_link, {
+  })]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("li", _hoisted_11, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_router_link, {
     to: "/products"
   }, {
     "default": _withId(function () {
-      return [_hoisted_13];
+      return [_hoisted_12];
     }),
     _: 1
     /* STABLE */
 
-  })]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("li", _hoisted_14, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_router_link, {
+  })]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("li", _hoisted_13, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_router_link, {
     to: "/categories"
   }, {
     "default": _withId(function () {
-      return [_hoisted_15];
+      return [_hoisted_14];
     }),
     _: 1
     /* STABLE */
 
-  })]), _hoisted_16, _hoisted_17])])])])])])]);
+  })]), _hoisted_15, _hoisted_16])])])])])])]);
 });
 
 /***/ }),
@@ -34606,6 +34648,32 @@ _Categories_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__.default.__f
 
 /***/ }),
 
+/***/ "./resources/js/components/Header/MobileMenu.vue":
+/*!*******************************************************!*\
+  !*** ./resources/js/components/Header/MobileMenu.vue ***!
+  \*******************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => __WEBPACK_DEFAULT_EXPORT__
+/* harmony export */ });
+/* harmony import */ var _MobileMenu_vue_vue_type_template_id_a706a4b0__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./MobileMenu.vue?vue&type=template&id=a706a4b0 */ "./resources/js/components/Header/MobileMenu.vue?vue&type=template&id=a706a4b0");
+/* harmony import */ var _MobileMenu_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./MobileMenu.vue?vue&type=script&lang=js */ "./resources/js/components/Header/MobileMenu.vue?vue&type=script&lang=js");
+
+
+
+_MobileMenu_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__.default.render = _MobileMenu_vue_vue_type_template_id_a706a4b0__WEBPACK_IMPORTED_MODULE_0__.render
+/* hot reload */
+if (false) {}
+
+_MobileMenu_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__.default.__file = "resources/js/components/Header/MobileMenu.vue"
+
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (_MobileMenu_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__.default);
+
+/***/ }),
+
 /***/ "./resources/js/components/Header/Navbar.vue":
 /*!***************************************************!*\
   !*** ./resources/js/components/Header/Navbar.vue ***!
@@ -34752,6 +34820,22 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _node_modules_babel_loader_lib_index_js_clonedRuleSet_5_use_0_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_Categories_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../../node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!../../../../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./Categories.vue?vue&type=script&lang=js */ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/Categories/Categories.vue?vue&type=script&lang=js");
  
 
+/***/ }),
+
+/***/ "./resources/js/components/Header/MobileMenu.vue?vue&type=script&lang=js":
+/*!*******************************************************************************!*\
+  !*** ./resources/js/components/Header/MobileMenu.vue?vue&type=script&lang=js ***!
+  \*******************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => /* reexport safe */ _node_modules_babel_loader_lib_index_js_clonedRuleSet_5_use_0_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_MobileMenu_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_0__.default
+/* harmony export */ });
+/* harmony import */ var _node_modules_babel_loader_lib_index_js_clonedRuleSet_5_use_0_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_MobileMenu_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../../node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!../../../../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./MobileMenu.vue?vue&type=script&lang=js */ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/Header/MobileMenu.vue?vue&type=script&lang=js");
+ 
+
 /***/ }),
 
 /***/ "./resources/js/components/Header/Navbar.vue?vue&type=script&lang=js":
@@ -34832,6 +34916,22 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _node_modules_babel_loader_lib_index_js_clonedRuleSet_5_use_0_node_modules_vue_loader_dist_templateLoader_js_ruleSet_1_rules_2_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_Categories_vue_vue_type_template_id_3a992334__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../../node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!../../../../node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!../../../../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./Categories.vue?vue&type=template&id=3a992334 */ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/Categories/Categories.vue?vue&type=template&id=3a992334");
 
 
+/***/ }),
+
+/***/ "./resources/js/components/Header/MobileMenu.vue?vue&type=template&id=a706a4b0":
+/*!*************************************************************************************!*\
+  !*** ./resources/js/components/Header/MobileMenu.vue?vue&type=template&id=a706a4b0 ***!
+  \*************************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "render": () => /* reexport safe */ _node_modules_babel_loader_lib_index_js_clonedRuleSet_5_use_0_node_modules_vue_loader_dist_templateLoader_js_ruleSet_1_rules_2_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_MobileMenu_vue_vue_type_template_id_a706a4b0__WEBPACK_IMPORTED_MODULE_0__.render
+/* harmony export */ });
+/* harmony import */ var _node_modules_babel_loader_lib_index_js_clonedRuleSet_5_use_0_node_modules_vue_loader_dist_templateLoader_js_ruleSet_1_rules_2_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_MobileMenu_vue_vue_type_template_id_a706a4b0__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../../node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!../../../../node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!../../../../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./MobileMenu.vue?vue&type=template&id=a706a4b0 */ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/Header/MobileMenu.vue?vue&type=template&id=a706a4b0");
+
+
 /***/ }),
 
 /***/ "./resources/js/components/Header/Navbar.vue?vue&type=template&id=41f95097&scoped=true":
diff --git a/resources/js/components/Header/MobileMenu.vue b/resources/js/components/Header/MobileMenu.vue
index 4d9c440b..36969dc2 100644
--- a/resources/js/components/Header/MobileMenu.vue
+++ b/resources/js/components/Header/MobileMenu.vue
@@ -1,4 +1,6 @@
-<template>Mobile menu</template>
+<template>
+    <div class="w-5/12 lg:hidden">Mobile</div>
+</template>
 
 <script>
 export default {};
diff --git a/resources/js/components/Header/Navbar.vue b/resources/js/components/Header/Navbar.vue
index 04c302de..e2224a4b 100644
--- a/resources/js/components/Header/Navbar.vue
+++ b/resources/js/components/Header/Navbar.vue
@@ -14,7 +14,7 @@
                     />
                 </div>
             </div>
-            MobileMenu
+            <mobile-menu />
             <div class="hidden lg:w-1/12 lg:block"></div>
             <div
                 id="nav-content"
@@ -82,8 +82,10 @@
 </template>
 
 <script>
+import MobileMenu from "./MobileMenu";
 export default {
     name: "Navbar",
+    components: { MobileMenu },
 };
 </script>
 
diff --git a/resources/views/welcome.blade.php b/resources/views/welcome.blade.php
index 79f5dd31..b31ee309 100644
--- a/resources/views/welcome.blade.php
+++ b/resources/views/welcome.blade.php
@@ -10,7 +10,7 @@
         <link type="text/css" rel="stylesheet" href="{{ mix('css/app.css') }}">
     </head>
     <body class="antialiased">
-        <div class="relative flex justify-center min-h-screen bg-gray-100 items-top dark:bg-gray-900 sm:items-center sm:pt-0">
+        <div>
             @if (Route::has('login'))
                 <div class="fixed top-0 right-0 hidden px-6 py-4 sm:block">
                     @auth
@@ -25,7 +25,7 @@
                 </div>
             @endif
 
-            <div id="app">
+            <div id="app" class="container p-4 mx-auto">
                 <layout />
             </div>
             <script src="{{ mix('js/app.js') }}"></script>

From 66b34cba48e614d791145a603b1752879b9b8d16 Mon Sep 17 00:00:00 2001
From: w3bdesign <45217974+w3bdesign@users.noreply.github.com>
Date: Thu, 28 Jan 2021 04:45:22 +0100
Subject: [PATCH 3/5] Add SVG files

Added the SVGs we are going to use
---
 public/images/Logo.svg                    | 70 +++++++++++++++++++++++
 public/js/app.js                          | 14 ++---
 resources/img/svg/Cart.svg                | 15 +++++
 resources/img/svg/CloseHamburger.svg      | 40 +++++++++++++
 resources/img/svg/Hamburger.svg           |  1 +
 resources/img/svg/Logo.svg                | 70 +++++++++++++++++++++++
 resources/img/svg/Remove.svg              | 16 ++++++
 resources/img/svg/Search.svg              |  9 +++
 resources/js/components/Header/Cart.vue   |  0
 resources/js/components/Header/Navbar.vue |  2 +-
 10 files changed, 229 insertions(+), 8 deletions(-)
 create mode 100644 public/images/Logo.svg
 create mode 100644 resources/img/svg/Cart.svg
 create mode 100644 resources/img/svg/CloseHamburger.svg
 create mode 100644 resources/img/svg/Hamburger.svg
 create mode 100644 resources/img/svg/Logo.svg
 create mode 100644 resources/img/svg/Remove.svg
 create mode 100644 resources/img/svg/Search.svg
 create mode 100644 resources/js/components/Header/Cart.vue

diff --git a/public/images/Logo.svg b/public/images/Logo.svg
new file mode 100644
index 00000000..4c63e1ff
--- /dev/null
+++ b/public/images/Logo.svg
@@ -0,0 +1,70 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 934 345" style="enable-background:new 0 0 934 345;" xml:space="preserve">
+<g>
+	<g>
+		<polygon style="fill:#EF3B2D;" points="389.647,121.376 373.181,121.376 373.181,221.606 420.575,221.606 420.575,206.858 
+			389.647,206.858 		"/>
+		<path style="fill:#EF3B2D;" d="M478.706,163.902c-2.101-3.341-5.083-5.965-8.949-7.875c-3.865-1.909-7.756-2.864-11.669-2.864
+			c-5.062,0-9.69,0.931-13.89,2.792c-4.201,1.861-7.804,4.417-10.811,7.661c-3.007,3.246-5.347,6.993-7.016,11.239
+			c-1.672,4.249-2.506,8.713-2.506,13.389c0,4.774,0.834,9.26,2.506,13.459c1.669,4.202,4.009,7.925,7.016,11.169
+			c3.007,3.246,6.609,5.799,10.811,7.66c4.199,1.861,8.828,2.792,13.89,2.792c3.913,0,7.804-0.955,11.669-2.863
+			c3.866-1.908,6.849-4.533,8.949-7.875v9.021h15.607v-66.725h-15.607V163.902z M477.275,196.405
+			c-0.955,2.578-2.291,4.821-4.009,6.73c-1.719,1.91-3.795,3.437-6.229,4.582c-2.435,1.146-5.133,1.718-8.091,1.718
+			c-2.96,0-5.633-0.572-8.019-1.718c-2.387-1.146-4.438-2.672-6.156-4.582c-1.719-1.909-3.032-4.152-3.938-6.73
+			c-0.909-2.577-1.36-5.298-1.36-8.161c0-2.864,0.451-5.585,1.36-8.162c0.905-2.577,2.219-4.819,3.938-6.729
+			c1.718-1.908,3.77-3.437,6.156-4.582c2.386-1.146,5.059-1.718,8.019-1.718c2.958,0,5.656,0.572,8.091,1.718
+			c2.434,1.146,4.51,2.674,6.229,4.582c1.718,1.91,3.054,4.152,4.009,6.729c0.953,2.577,1.432,5.298,1.432,8.162
+			C478.706,191.107,478.228,193.828,477.275,196.405z"/>
+		<path style="fill:#EF3B2D;" d="M605.569,163.902c-2.101-3.341-5.083-5.965-8.949-7.875c-3.865-1.909-7.756-2.864-11.669-2.864
+			c-5.062,0-9.69,0.931-13.89,2.792c-4.201,1.861-7.804,4.417-10.811,7.661c-3.007,3.246-5.347,6.993-7.016,11.239
+			c-1.672,4.249-2.506,8.713-2.506,13.389c0,4.774,0.834,9.26,2.506,13.459c1.669,4.202,4.009,7.925,7.016,11.169
+			c3.007,3.246,6.609,5.799,10.811,7.66c4.199,1.861,8.828,2.792,13.89,2.792c3.913,0,7.804-0.955,11.669-2.863
+			c3.866-1.908,6.849-4.533,8.949-7.875v9.021h15.607v-66.725h-15.607V163.902z M604.137,196.405
+			c-0.955,2.578-2.291,4.821-4.009,6.73c-1.719,1.91-3.795,3.437-6.229,4.582c-2.435,1.146-5.133,1.718-8.091,1.718
+			c-2.96,0-5.633-0.572-8.019-1.718c-2.387-1.146-4.438-2.672-6.156-4.582c-1.719-1.909-3.032-4.152-3.938-6.73
+			c-0.909-2.577-1.36-5.298-1.36-8.161c0-2.864,0.451-5.585,1.36-8.162c0.905-2.577,2.219-4.819,3.938-6.729
+			c1.718-1.908,3.77-3.437,6.156-4.582c2.386-1.146,5.059-1.718,8.019-1.718c2.958,0,5.656,0.572,8.091,1.718
+			c2.434,1.146,4.51,2.674,6.229,4.582c1.718,1.91,3.054,4.152,4.009,6.729c0.953,2.577,1.432,5.298,1.432,8.162
+			C605.569,191.107,605.09,193.828,604.137,196.405z"/>
+		<rect x="776.781" y="121.376" style="fill:#EF3B2D;" width="15.606" height="100.23"/>
+		<polygon style="fill:#EF3B2D;" points="506.628,221.606 522.235,221.606 522.235,170.238 549.011,170.238 549.011,154.882 
+			506.628,154.882 		"/>
+		<polygon style="fill:#EF3B2D;" points="683.748,154.882 664.132,205.978 644.516,154.882 628.708,154.882 654.325,221.606 
+			673.939,221.606 699.556,154.882 		"/>
+		<path style="fill:#EF3B2D;" d="M733.595,153.166c-19.112,0-34.239,15.706-34.239,35.079c0,21.416,14.641,35.079,36.239,35.079
+			c12.088,0,19.806-4.622,29.234-14.688l-10.544-8.158c-0.006,0.008-7.958,10.449-19.832,10.449
+			c-13.802,0-19.612-11.127-19.612-16.884h51.777C769.338,172,754.846,153.166,733.595,153.166z M714.882,182.446
+			c0.12-1.284,1.917-16.884,18.589-16.884c16.671,0,18.697,15.598,18.813,16.884H714.882z"/>
+	</g>
+	<path style="fill:#EF3B2D;" d="M325.683,120.592c-0.024-0.088-0.073-0.165-0.104-0.25c-0.058-0.157-0.108-0.316-0.191-0.46
+		c-0.056-0.097-0.137-0.176-0.203-0.265c-0.087-0.117-0.161-0.242-0.265-0.345c-0.085-0.086-0.194-0.148-0.29-0.223
+		c-0.109-0.085-0.206-0.182-0.327-0.252c0,0-0.001,0-0.002-0.001c-0.001,0-0.001-0.001-0.002-0.002L288.651,98.27
+		c-0.917-0.528-2.047-0.528-2.964,0l-35.647,20.522c-0.001,0-0.001,0.001-0.002,0.002c-0.001,0-0.002,0-0.002,0.001
+		c-0.121,0.07-0.219,0.167-0.327,0.252c-0.096,0.075-0.205,0.138-0.29,0.223c-0.103,0.103-0.178,0.228-0.265,0.345
+		c-0.066,0.089-0.147,0.169-0.203,0.265c-0.083,0.144-0.133,0.304-0.191,0.46c-0.031,0.085-0.08,0.162-0.104,0.25
+		c-0.067,0.249-0.103,0.51-0.103,0.776v38.979l-29.706,17.103v-76.255c0-0.265-0.036-0.526-0.103-0.776
+		c-0.024-0.088-0.073-0.165-0.104-0.25c-0.058-0.157-0.108-0.316-0.191-0.46c-0.056-0.097-0.137-0.176-0.203-0.265
+		c-0.087-0.117-0.161-0.242-0.265-0.345c-0.085-0.086-0.194-0.148-0.29-0.223c-0.109-0.085-0.206-0.182-0.327-0.252
+		c0,0-0.001,0-0.002-0.001c-0.001,0-0.001-0.001-0.002-0.002l-35.647-20.523c-0.917-0.528-2.047-0.528-2.964,0l-35.647,20.523
+		c-0.001,0-0.001,0.001-0.002,0.002c-0.001,0-0.002,0-0.002,0.001c-0.121,0.07-0.219,0.167-0.327,0.252
+		c-0.096,0.075-0.205,0.138-0.29,0.223c-0.103,0.103-0.178,0.228-0.265,0.345c-0.066,0.089-0.147,0.169-0.203,0.265
+		c-0.083,0.144-0.133,0.304-0.191,0.46c-0.031,0.085-0.08,0.162-0.104,0.25c-0.067,0.249-0.103,0.51-0.103,0.776v122.09
+		c0,1.063,0.568,2.044,1.489,2.575l71.293,41.045c0.156,0.089,0.324,0.143,0.49,0.202c0.078,0.028,0.15,0.074,0.23,0.095
+		c0.249,0.066,0.506,0.1,0.762,0.1c0.256,0,0.512-0.033,0.762-0.1c0.069-0.018,0.132-0.059,0.2-0.083
+		c0.176-0.061,0.354-0.119,0.519-0.214l71.293-41.045c0.921-0.53,1.489-1.512,1.489-2.575v-38.979l34.158-19.666
+		c0.921-0.53,1.489-1.512,1.489-2.575v-40.697C325.786,121.102,325.751,120.841,325.683,120.592z M215.87,219.867l-29.648-16.779
+		l31.136-17.926c0,0,0,0,0.001-0.001l34.164-19.669l29.674,17.084l-21.772,12.428L215.87,219.867z M284.199,143.608v33.841
+		l-12.475-7.182l-17.231-9.92v-33.841l12.475,7.182L284.199,143.608z M287.169,104.273l29.693,17.095l-29.693,17.095l-29.693-17.095
+		L287.169,104.273z M195.675,190.789l-12.475,7.182v-74.538l17.231-9.92l12.475-7.182v74.537L195.675,190.789z M180.229,84.098
+		l29.693,17.095l-29.693,17.095l-29.693-17.095L180.229,84.098z M147.553,106.332l12.475,7.182l17.231,9.92v79.676
+		c0,0.002,0.001,0.003,0.001,0.005s-0.001,0.004-0.001,0.006c0,0.114,0.032,0.221,0.045,0.333c0.017,0.146,0.021,0.294,0.059,0.434
+		c0.001,0.002,0.001,0.005,0.002,0.007c0.032,0.117,0.094,0.222,0.14,0.334c0.051,0.124,0.088,0.255,0.156,0.371
+		c0.001,0.003,0.002,0.006,0.004,0.009c0.061,0.105,0.149,0.191,0.222,0.288c0.081,0.105,0.149,0.22,0.244,0.314
+		c0.003,0.003,0.005,0.007,0.008,0.01c0.084,0.083,0.19,0.142,0.284,0.215c0.106,0.083,0.202,0.178,0.32,0.247
+		c0.004,0.002,0.009,0.003,0.013,0.005c0.004,0.002,0.007,0.006,0.011,0.008l34.139,19.321v34.175l-65.352-37.625V106.332z
+		 M284.199,221.567l-65.352,37.625v-34.182l48.399-27.628l16.953-9.677V221.567z M319.845,160.347l-29.706,17.102v-33.841
+		l17.231-9.92l12.475-7.182V160.347z"/>
+</g>
+</svg>
diff --git a/public/js/app.js b/public/js/app.js
index bc313999..177c1381 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -16461,7 +16461,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "render": () => /* binding */ render
 /* harmony export */ });
 /* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue */ "./node_modules/vue/dist/vue.esm-bundler.js");
-/* harmony import */ var _img_laravel_logo_svg__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../img/laravel-logo.svg */ "./resources/img/laravel-logo.svg");
+/* harmony import */ var _img_svg_Logo_svg__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../img/svg/Logo.svg */ "./resources/img/svg/Logo.svg");
 
 
 
@@ -16485,7 +16485,7 @@ var _hoisted_3 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("
   alt: "Logo",
   "class": "h-20 lg:h-24",
   "aria-label": "Nettbutikk logo",
-  src: _img_laravel_logo_svg__WEBPACK_IMPORTED_MODULE_1__.default
+  src: _img_svg_Logo_svg__WEBPACK_IMPORTED_MODULE_1__.default
 })])], -1
 /* HOISTED */
 );
@@ -16927,10 +16927,10 @@ module.exports = function (cssWithMappingToString) {
 
 /***/ }),
 
-/***/ "./resources/img/laravel-logo.svg":
-/*!****************************************!*\
-  !*** ./resources/img/laravel-logo.svg ***!
-  \****************************************/
+/***/ "./resources/img/svg/Logo.svg":
+/*!************************************!*\
+  !*** ./resources/img/svg/Logo.svg ***!
+  \************************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
@@ -16938,7 +16938,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "default": () => __WEBPACK_DEFAULT_EXPORT__
 /* harmony export */ });
-/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ("/images/laravel-logo.svg?83eef76f698f6bf6b4a349895f928699");
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ("/images/Logo.svg?83eef76f698f6bf6b4a349895f928699");
 
 /***/ }),
 
diff --git a/resources/img/svg/Cart.svg b/resources/img/svg/Cart.svg
new file mode 100644
index 00000000..ac90aeeb
--- /dev/null
+++ b/resources/img/svg/Cart.svg
@@ -0,0 +1,15 @@
+<svg
+            class="fill-current hover:text-black"
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            aria-label="Handlekurv"
+          >
+            <path
+              d="M21,7H7.462L5.91,3.586C5.748,3.229,5.392,3,5,3H2v2h2.356L9.09,15.414C9.252,15.771,9.608,16,10,16h8 c0.4,0,0.762-0.238,0.919-0.606l3-7c0.133-0.309,0.101-0.663-0.084-0.944C21.649,7.169,21.336,7,21,7z M17.341,14h-6.697L8.371,9 h11.112L17.341,14z"
+              aria-label="Handlekurv"
+            />
+            <circle cx="10.5" cy="18.5" r="1.5" aria-label="Handlekurv" />
+            <circle cx="17.5" cy="18.5" r="1.5" aria-label="Handlekurv" />
+          </svg>
\ No newline at end of file
diff --git a/resources/img/svg/CloseHamburger.svg b/resources/img/svg/CloseHamburger.svg
new file mode 100644
index 00000000..1174a66c
--- /dev/null
+++ b/resources/img/svg/CloseHamburger.svg
@@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="windows-1252"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="357px" height="357px" viewBox="0 0 357 357" style="enable-background:new 0 0 357 357;" xml:space="preserve">
+<g>
+	<g id="close">
+		<polygon points="357,35.7 321.3,0 178.5,142.8 35.7,0 0,35.7 142.8,178.5 0,321.3 35.7,357 178.5,214.2 321.3,357 357,321.3     214.2,178.5   "/>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
\ No newline at end of file
diff --git a/resources/img/svg/Hamburger.svg b/resources/img/svg/Hamburger.svg
new file mode 100644
index 00000000..09052a0e
--- /dev/null
+++ b/resources/img/svg/Hamburger.svg
@@ -0,0 +1 @@
+<svg height="384pt" viewBox="0 -53 384 384" width="384pt" xmlns="http://www.w3.org/2000/svg"><path d="m368 154.667969h-352c-8.832031 0-16-7.167969-16-16s7.167969-16 16-16h352c8.832031 0 16 7.167969 16 16s-7.167969 16-16 16zm0 0"/><path d="m368 32h-352c-8.832031 0-16-7.167969-16-16s7.167969-16 16-16h352c8.832031 0 16 7.167969 16 16s-7.167969 16-16 16zm0 0"/><path d="m368 277.332031h-352c-8.832031 0-16-7.167969-16-16s7.167969-16 16-16h352c8.832031 0 16 7.167969 16 16s-7.167969 16-16 16zm0 0"/></svg>
\ No newline at end of file
diff --git a/resources/img/svg/Logo.svg b/resources/img/svg/Logo.svg
new file mode 100644
index 00000000..4c63e1ff
--- /dev/null
+++ b/resources/img/svg/Logo.svg
@@ -0,0 +1,70 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 934 345" style="enable-background:new 0 0 934 345;" xml:space="preserve">
+<g>
+	<g>
+		<polygon style="fill:#EF3B2D;" points="389.647,121.376 373.181,121.376 373.181,221.606 420.575,221.606 420.575,206.858 
+			389.647,206.858 		"/>
+		<path style="fill:#EF3B2D;" d="M478.706,163.902c-2.101-3.341-5.083-5.965-8.949-7.875c-3.865-1.909-7.756-2.864-11.669-2.864
+			c-5.062,0-9.69,0.931-13.89,2.792c-4.201,1.861-7.804,4.417-10.811,7.661c-3.007,3.246-5.347,6.993-7.016,11.239
+			c-1.672,4.249-2.506,8.713-2.506,13.389c0,4.774,0.834,9.26,2.506,13.459c1.669,4.202,4.009,7.925,7.016,11.169
+			c3.007,3.246,6.609,5.799,10.811,7.66c4.199,1.861,8.828,2.792,13.89,2.792c3.913,0,7.804-0.955,11.669-2.863
+			c3.866-1.908,6.849-4.533,8.949-7.875v9.021h15.607v-66.725h-15.607V163.902z M477.275,196.405
+			c-0.955,2.578-2.291,4.821-4.009,6.73c-1.719,1.91-3.795,3.437-6.229,4.582c-2.435,1.146-5.133,1.718-8.091,1.718
+			c-2.96,0-5.633-0.572-8.019-1.718c-2.387-1.146-4.438-2.672-6.156-4.582c-1.719-1.909-3.032-4.152-3.938-6.73
+			c-0.909-2.577-1.36-5.298-1.36-8.161c0-2.864,0.451-5.585,1.36-8.162c0.905-2.577,2.219-4.819,3.938-6.729
+			c1.718-1.908,3.77-3.437,6.156-4.582c2.386-1.146,5.059-1.718,8.019-1.718c2.958,0,5.656,0.572,8.091,1.718
+			c2.434,1.146,4.51,2.674,6.229,4.582c1.718,1.91,3.054,4.152,4.009,6.729c0.953,2.577,1.432,5.298,1.432,8.162
+			C478.706,191.107,478.228,193.828,477.275,196.405z"/>
+		<path style="fill:#EF3B2D;" d="M605.569,163.902c-2.101-3.341-5.083-5.965-8.949-7.875c-3.865-1.909-7.756-2.864-11.669-2.864
+			c-5.062,0-9.69,0.931-13.89,2.792c-4.201,1.861-7.804,4.417-10.811,7.661c-3.007,3.246-5.347,6.993-7.016,11.239
+			c-1.672,4.249-2.506,8.713-2.506,13.389c0,4.774,0.834,9.26,2.506,13.459c1.669,4.202,4.009,7.925,7.016,11.169
+			c3.007,3.246,6.609,5.799,10.811,7.66c4.199,1.861,8.828,2.792,13.89,2.792c3.913,0,7.804-0.955,11.669-2.863
+			c3.866-1.908,6.849-4.533,8.949-7.875v9.021h15.607v-66.725h-15.607V163.902z M604.137,196.405
+			c-0.955,2.578-2.291,4.821-4.009,6.73c-1.719,1.91-3.795,3.437-6.229,4.582c-2.435,1.146-5.133,1.718-8.091,1.718
+			c-2.96,0-5.633-0.572-8.019-1.718c-2.387-1.146-4.438-2.672-6.156-4.582c-1.719-1.909-3.032-4.152-3.938-6.73
+			c-0.909-2.577-1.36-5.298-1.36-8.161c0-2.864,0.451-5.585,1.36-8.162c0.905-2.577,2.219-4.819,3.938-6.729
+			c1.718-1.908,3.77-3.437,6.156-4.582c2.386-1.146,5.059-1.718,8.019-1.718c2.958,0,5.656,0.572,8.091,1.718
+			c2.434,1.146,4.51,2.674,6.229,4.582c1.718,1.91,3.054,4.152,4.009,6.729c0.953,2.577,1.432,5.298,1.432,8.162
+			C605.569,191.107,605.09,193.828,604.137,196.405z"/>
+		<rect x="776.781" y="121.376" style="fill:#EF3B2D;" width="15.606" height="100.23"/>
+		<polygon style="fill:#EF3B2D;" points="506.628,221.606 522.235,221.606 522.235,170.238 549.011,170.238 549.011,154.882 
+			506.628,154.882 		"/>
+		<polygon style="fill:#EF3B2D;" points="683.748,154.882 664.132,205.978 644.516,154.882 628.708,154.882 654.325,221.606 
+			673.939,221.606 699.556,154.882 		"/>
+		<path style="fill:#EF3B2D;" d="M733.595,153.166c-19.112,0-34.239,15.706-34.239,35.079c0,21.416,14.641,35.079,36.239,35.079
+			c12.088,0,19.806-4.622,29.234-14.688l-10.544-8.158c-0.006,0.008-7.958,10.449-19.832,10.449
+			c-13.802,0-19.612-11.127-19.612-16.884h51.777C769.338,172,754.846,153.166,733.595,153.166z M714.882,182.446
+			c0.12-1.284,1.917-16.884,18.589-16.884c16.671,0,18.697,15.598,18.813,16.884H714.882z"/>
+	</g>
+	<path style="fill:#EF3B2D;" d="M325.683,120.592c-0.024-0.088-0.073-0.165-0.104-0.25c-0.058-0.157-0.108-0.316-0.191-0.46
+		c-0.056-0.097-0.137-0.176-0.203-0.265c-0.087-0.117-0.161-0.242-0.265-0.345c-0.085-0.086-0.194-0.148-0.29-0.223
+		c-0.109-0.085-0.206-0.182-0.327-0.252c0,0-0.001,0-0.002-0.001c-0.001,0-0.001-0.001-0.002-0.002L288.651,98.27
+		c-0.917-0.528-2.047-0.528-2.964,0l-35.647,20.522c-0.001,0-0.001,0.001-0.002,0.002c-0.001,0-0.002,0-0.002,0.001
+		c-0.121,0.07-0.219,0.167-0.327,0.252c-0.096,0.075-0.205,0.138-0.29,0.223c-0.103,0.103-0.178,0.228-0.265,0.345
+		c-0.066,0.089-0.147,0.169-0.203,0.265c-0.083,0.144-0.133,0.304-0.191,0.46c-0.031,0.085-0.08,0.162-0.104,0.25
+		c-0.067,0.249-0.103,0.51-0.103,0.776v38.979l-29.706,17.103v-76.255c0-0.265-0.036-0.526-0.103-0.776
+		c-0.024-0.088-0.073-0.165-0.104-0.25c-0.058-0.157-0.108-0.316-0.191-0.46c-0.056-0.097-0.137-0.176-0.203-0.265
+		c-0.087-0.117-0.161-0.242-0.265-0.345c-0.085-0.086-0.194-0.148-0.29-0.223c-0.109-0.085-0.206-0.182-0.327-0.252
+		c0,0-0.001,0-0.002-0.001c-0.001,0-0.001-0.001-0.002-0.002l-35.647-20.523c-0.917-0.528-2.047-0.528-2.964,0l-35.647,20.523
+		c-0.001,0-0.001,0.001-0.002,0.002c-0.001,0-0.002,0-0.002,0.001c-0.121,0.07-0.219,0.167-0.327,0.252
+		c-0.096,0.075-0.205,0.138-0.29,0.223c-0.103,0.103-0.178,0.228-0.265,0.345c-0.066,0.089-0.147,0.169-0.203,0.265
+		c-0.083,0.144-0.133,0.304-0.191,0.46c-0.031,0.085-0.08,0.162-0.104,0.25c-0.067,0.249-0.103,0.51-0.103,0.776v122.09
+		c0,1.063,0.568,2.044,1.489,2.575l71.293,41.045c0.156,0.089,0.324,0.143,0.49,0.202c0.078,0.028,0.15,0.074,0.23,0.095
+		c0.249,0.066,0.506,0.1,0.762,0.1c0.256,0,0.512-0.033,0.762-0.1c0.069-0.018,0.132-0.059,0.2-0.083
+		c0.176-0.061,0.354-0.119,0.519-0.214l71.293-41.045c0.921-0.53,1.489-1.512,1.489-2.575v-38.979l34.158-19.666
+		c0.921-0.53,1.489-1.512,1.489-2.575v-40.697C325.786,121.102,325.751,120.841,325.683,120.592z M215.87,219.867l-29.648-16.779
+		l31.136-17.926c0,0,0,0,0.001-0.001l34.164-19.669l29.674,17.084l-21.772,12.428L215.87,219.867z M284.199,143.608v33.841
+		l-12.475-7.182l-17.231-9.92v-33.841l12.475,7.182L284.199,143.608z M287.169,104.273l29.693,17.095l-29.693,17.095l-29.693-17.095
+		L287.169,104.273z M195.675,190.789l-12.475,7.182v-74.538l17.231-9.92l12.475-7.182v74.537L195.675,190.789z M180.229,84.098
+		l29.693,17.095l-29.693,17.095l-29.693-17.095L180.229,84.098z M147.553,106.332l12.475,7.182l17.231,9.92v79.676
+		c0,0.002,0.001,0.003,0.001,0.005s-0.001,0.004-0.001,0.006c0,0.114,0.032,0.221,0.045,0.333c0.017,0.146,0.021,0.294,0.059,0.434
+		c0.001,0.002,0.001,0.005,0.002,0.007c0.032,0.117,0.094,0.222,0.14,0.334c0.051,0.124,0.088,0.255,0.156,0.371
+		c0.001,0.003,0.002,0.006,0.004,0.009c0.061,0.105,0.149,0.191,0.222,0.288c0.081,0.105,0.149,0.22,0.244,0.314
+		c0.003,0.003,0.005,0.007,0.008,0.01c0.084,0.083,0.19,0.142,0.284,0.215c0.106,0.083,0.202,0.178,0.32,0.247
+		c0.004,0.002,0.009,0.003,0.013,0.005c0.004,0.002,0.007,0.006,0.011,0.008l34.139,19.321v34.175l-65.352-37.625V106.332z
+		 M284.199,221.567l-65.352,37.625v-34.182l48.399-27.628l16.953-9.677V221.567z M319.845,160.347l-29.706,17.102v-33.841
+		l17.231-9.92l12.475-7.182V160.347z"/>
+</g>
+</svg>
diff --git a/resources/img/svg/Remove.svg b/resources/img/svg/Remove.svg
new file mode 100644
index 00000000..e1aac23d
--- /dev/null
+++ b/resources/img/svg/Remove.svg
@@ -0,0 +1,16 @@
+<svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 16 16"
+              height="25"
+              width="25"              
+            >
+              <g transform="translate(-421.71-531.79)" fill="#da4453">
+                <path
+                  d="m13.293 2l-11.293 11.293c0 0 .716.702.707.707l11.293-11.293"
+                  transform="translate(421.71 531.79)"
+                />
+                <path
+                  d="m424.42 533.79l11.293 11.293c0 0-.716.702-.707.707l-11.293-11.293z"
+                />
+              </g>
+            </svg>
\ No newline at end of file
diff --git a/resources/img/svg/Search.svg b/resources/img/svg/Search.svg
new file mode 100644
index 00000000..7e0459e5
--- /dev/null
+++ b/resources/img/svg/Search.svg
@@ -0,0 +1,9 @@
+<svg
+          class="w-6 h-6 text-gray-200 pointer-events-none fill-current"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 20 20"
+        >
+          <path
+            d="M12.9 14.32a8 8 0 1 1 1.41-1.41l5.35 5.33-1.42 1.42-5.33-5.34zM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z"
+          ></path>
+        </svg>
\ No newline at end of file
diff --git a/resources/js/components/Header/Cart.vue b/resources/js/components/Header/Cart.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/resources/js/components/Header/Navbar.vue b/resources/js/components/Header/Navbar.vue
index e2224a4b..c736cd12 100644
--- a/resources/js/components/Header/Navbar.vue
+++ b/resources/js/components/Header/Navbar.vue
@@ -10,7 +10,7 @@
                         alt="Logo"
                         class="h-20 lg:h-24"
                         aria-label="Nettbutikk logo"
-                        src="../../../img/laravel-logo.svg"
+                        src="../../../img/svg/Logo.svg"
                     />
                 </div>
             </div>

From f3043a9cbb958d3e3125295dfa31e3029e781a32 Mon Sep 17 00:00:00 2001
From: w3bdesign <45217974+w3bdesign@users.noreply.github.com>
Date: Thu, 28 Jan 2021 05:05:05 +0100
Subject: [PATCH 4/5] Add cart quantity implementation

---
 public/images/Cart.svg                    |  15 ++
 public/js/app.js                          | 287 ++++++++++++++++++++--
 resources/js/app.js                       |   3 +-
 resources/js/components/Header/Cart.vue   |  53 ++++
 resources/js/components/Header/Navbar.vue |   5 +-
 5 files changed, 341 insertions(+), 22 deletions(-)
 create mode 100644 public/images/Cart.svg

diff --git a/public/images/Cart.svg b/public/images/Cart.svg
new file mode 100644
index 00000000..ac90aeeb
--- /dev/null
+++ b/public/images/Cart.svg
@@ -0,0 +1,15 @@
+<svg
+            class="fill-current hover:text-black"
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            aria-label="Handlekurv"
+          >
+            <path
+              d="M21,7H7.462L5.91,3.586C5.748,3.229,5.392,3,5,3H2v2h2.356L9.09,15.414C9.252,15.771,9.608,16,10,16h8 c0.4,0,0.762-0.238,0.919-0.606l3-7c0.133-0.309,0.101-0.663-0.084-0.944C21.649,7.169,21.336,7,21,7z M17.341,14h-6.697L8.371,9 h11.112L17.341,14z"
+              aria-label="Handlekurv"
+            />
+            <circle cx="10.5" cy="18.5" r="1.5" aria-label="Handlekurv" />
+            <circle cx="17.5" cy="18.5" r="1.5" aria-label="Handlekurv" />
+          </svg>
\ No newline at end of file
diff --git a/public/js/app.js b/public/js/app.js
index 177c1381..adeeb584 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -16289,6 +16289,35 @@ __webpack_require__.r(__webpack_exports__);
 
 /***/ }),
 
+/***/ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/Header/Cart.vue?vue&type=script&lang=js":
+/*!*****************************************************************************************************************************************************************************************************!*\
+  !*** ./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/Header/Cart.vue?vue&type=script&lang=js ***!
+  \*****************************************************************************************************************************************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => __WEBPACK_DEFAULT_EXPORT__
+/* harmony export */ });
+/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue */ "./node_modules/vue/dist/vue.esm-bundler.js");
+/* harmony import */ var vuex__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! vuex */ "./node_modules/vuex/dist/vuex.mjs");
+
+
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({
+  setup: function setup() {
+    var store = (0,vuex__WEBPACK_IMPORTED_MODULE_1__.useStore)();
+    var cartLength = (0,vue__WEBPACK_IMPORTED_MODULE_0__.computed)(function () {
+      return store.state.cart.length;
+    });
+    return {
+      cartLength: cartLength
+    };
+  }
+});
+
+/***/ }),
+
 /***/ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/Header/MobileMenu.vue?vue&type=script&lang=js":
 /*!***********************************************************************************************************************************************************************************************************!*\
   !*** ./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/Header/MobileMenu.vue?vue&type=script&lang=js ***!
@@ -16315,12 +16344,15 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "default": () => __WEBPACK_DEFAULT_EXPORT__
 /* harmony export */ });
-/* harmony import */ var _MobileMenu__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./MobileMenu */ "./resources/js/components/Header/MobileMenu.vue");
+/* harmony import */ var _Cart__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Cart */ "./resources/js/components/Header/Cart.vue");
+/* harmony import */ var _MobileMenu__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./MobileMenu */ "./resources/js/components/Header/MobileMenu.vue");
+
 
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({
   name: "Navbar",
   components: {
-    MobileMenu: _MobileMenu__WEBPACK_IMPORTED_MODULE_0__.default
+    MobileMenu: _MobileMenu__WEBPACK_IMPORTED_MODULE_1__.default,
+    Cart: _Cart__WEBPACK_IMPORTED_MODULE_0__.default
   }
 });
 
@@ -16427,6 +16459,76 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 
 /***/ }),
 
+/***/ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/Header/Cart.vue?vue&type=template&id=a5f35132&scoped=true":
+/*!*********************************************************************************************************************************************************************************************************************************************************************************************!*\
+  !*** ./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/Header/Cart.vue?vue&type=template&id=a5f35132&scoped=true ***!
+  \*********************************************************************************************************************************************************************************************************************************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "render": () => /* binding */ render
+/* harmony export */ });
+/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue */ "./node_modules/vue/dist/vue.esm-bundler.js");
+/* harmony import */ var _img_svg_Cart_svg__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../img/svg/Cart.svg */ "./resources/img/svg/Cart.svg");
+
+
+
+var _withId = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.withScopeId)("data-v-a5f35132");
+
+(0,vue__WEBPACK_IMPORTED_MODULE_0__.pushScopeId)("data-v-a5f35132");
+
+var _hoisted_1 = {
+  key: 0,
+  "class": "text-xl text-white no-underline lg:text-black is-active"
+};
+
+var _hoisted_2 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("img", {
+  alt: "Cart icon",
+  "class": "h-12 ml-4 lg:ml-2",
+  "aria-label": "Cart",
+  src: _img_svg_Cart_svg__WEBPACK_IMPORTED_MODULE_1__.default
+}, null, -1
+/* HOISTED */
+);
+
+var _hoisted_3 = {
+  "class": "absolute w-6 h-6 pb-2 ml-16 -mt-12 text-center text-white bg-black rounded-full lg:ml-14"
+};
+
+var _hoisted_4 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("span", null, "Total: 0 ", -1
+/* HOISTED */
+);
+
+(0,vue__WEBPACK_IMPORTED_MODULE_0__.popScopeId)();
+
+var render = /*#__PURE__*/_withId(function (_ctx, _cache, $props, $setup, $data, $options) {
+  return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("div", null, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(vue__WEBPACK_IMPORTED_MODULE_0__.Transition, {
+    name: "cart"
+  }, {
+    "default": _withId(function () {
+      return [$setup.cartLength ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("span", _hoisted_1, [_hoisted_2])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true)];
+    }),
+    _: 1
+    /* STABLE */
+
+  }), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(vue__WEBPACK_IMPORTED_MODULE_0__.Transition, {
+    name: "cart"
+  }, {
+    "default": _withId(function () {
+      return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", null, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("span", _hoisted_3, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($setup.cartLength), 1
+      /* TEXT */
+      ), _hoisted_4])];
+    }),
+    _: 1
+    /* STABLE */
+
+  })]);
+});
+
+/***/ }),
+
 /***/ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/Header/MobileMenu.vue?vue&type=template&id=a706a4b0":
 /*!***************************************************************************************************************************************************************************************************************************************************************************************!*\
   !*** ./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/Header/MobileMenu.vue?vue&type=template&id=a706a4b0 ***!
@@ -16548,11 +16650,9 @@ var _hoisted_15 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(
 /* HOISTED */
 );
 
-var _hoisted_16 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("li", {
+var _hoisted_16 = {
   "class": "inline-block py-2 text-xl font-semibold no-underline lg:text-base lg:px-4"
-}, " Shopping cart ", -1
-/* HOISTED */
-);
+};
 
 (0,vue__WEBPACK_IMPORTED_MODULE_0__.popScopeId)();
 
@@ -16561,6 +16661,8 @@ var render = /*#__PURE__*/_withId(function (_ctx, _cache, $props, $setup, $data,
 
   var _component_router_link = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("router-link");
 
+  var _component_cart = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("cart");
+
   return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("header", _hoisted_1, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_2, [_hoisted_3, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_mobile_menu), _hoisted_4, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_5, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_6, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", null, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("nav", _hoisted_7, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("ul", _hoisted_8, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("li", _hoisted_9, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_router_link, {
     to: "/"
   }, {
@@ -16588,7 +16690,7 @@ var render = /*#__PURE__*/_withId(function (_ctx, _cache, $props, $setup, $data,
     _: 1
     /* STABLE */
 
-  })]), _hoisted_15, _hoisted_16])])])])])])]);
+  })]), _hoisted_15, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("li", _hoisted_16, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_cart)])])])])])])])]);
 });
 
 /***/ }),
@@ -16727,12 +16829,13 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue */ "./node_modules/vue/dist/vue.esm-bundler.js");
-/* harmony import */ var vue_router__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! vue-router */ "./node_modules/vue-router/dist/vue-router.esm-bundler.js");
+/* harmony import */ var vue_router__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! vue-router */ "./node_modules/vue-router/dist/vue-router.esm-bundler.js");
 /* harmony import */ var _store_index__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./store/index */ "./resources/js/store/index.js");
 /* harmony import */ var _components_Layouts_Layout_vue__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./components/Layouts/Layout.vue */ "./resources/js/components/Layouts/Layout.vue");
-/* harmony import */ var _components_Index_vue__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./components/Index.vue */ "./resources/js/components/Index.vue");
-/* harmony import */ var _components_Products_Products_vue__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./components/Products/Products.vue */ "./resources/js/components/Products/Products.vue");
-/* harmony import */ var _components_Categories_Categories_vue__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./components/Categories/Categories.vue */ "./resources/js/components/Categories/Categories.vue");
+/* harmony import */ var _components_Header_Cart_vue__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./components/Header/Cart.vue */ "./resources/js/components/Header/Cart.vue");
+/* harmony import */ var _components_Index_vue__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./components/Index.vue */ "./resources/js/components/Index.vue");
+/* harmony import */ var _components_Products_Products_vue__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./components/Products/Products.vue */ "./resources/js/components/Products/Products.vue");
+/* harmony import */ var _components_Categories_Categories_vue__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./components/Categories/Categories.vue */ "./resources/js/components/Categories/Categories.vue");
 __webpack_require__(/*! ./bootstrap */ "./resources/js/bootstrap.js");
 
 
@@ -16742,26 +16845,28 @@ __webpack_require__(/*! ./bootstrap */ "./resources/js/bootstrap.js");
 
 
 
+
 var routes = [{
   path: "/",
-  component: _components_Index_vue__WEBPACK_IMPORTED_MODULE_3__.default
+  component: _components_Index_vue__WEBPACK_IMPORTED_MODULE_4__.default
 }, {
   path: "/products",
-  component: _components_Products_Products_vue__WEBPACK_IMPORTED_MODULE_4__.default
+  component: _components_Products_Products_vue__WEBPACK_IMPORTED_MODULE_5__.default
 }, {
   path: "/categories",
-  component: _components_Categories_Categories_vue__WEBPACK_IMPORTED_MODULE_5__.default
+  component: _components_Categories_Categories_vue__WEBPACK_IMPORTED_MODULE_6__.default
 }];
-var router = (0,vue_router__WEBPACK_IMPORTED_MODULE_6__.createRouter)({
-  history: (0,vue_router__WEBPACK_IMPORTED_MODULE_6__.createWebHashHistory)(),
+var router = (0,vue_router__WEBPACK_IMPORTED_MODULE_7__.createRouter)({
+  history: (0,vue_router__WEBPACK_IMPORTED_MODULE_7__.createWebHashHistory)(),
   routes: routes
 });
 (0,vue__WEBPACK_IMPORTED_MODULE_0__.createApp)({
   components: {
+    Cart: _components_Header_Cart_vue__WEBPACK_IMPORTED_MODULE_3__.default,
     Layout: _components_Layouts_Layout_vue__WEBPACK_IMPORTED_MODULE_2__.default,
-    Index: _components_Index_vue__WEBPACK_IMPORTED_MODULE_3__.default,
-    Products: _components_Products_Products_vue__WEBPACK_IMPORTED_MODULE_4__.default,
-    Categories: _components_Categories_Categories_vue__WEBPACK_IMPORTED_MODULE_5__.default
+    Index: _components_Index_vue__WEBPACK_IMPORTED_MODULE_4__.default,
+    Products: _components_Products_Products_vue__WEBPACK_IMPORTED_MODULE_5__.default,
+    Categories: _components_Categories_Categories_vue__WEBPACK_IMPORTED_MODULE_6__.default
   }
 }).use(_store_index__WEBPACK_IMPORTED_MODULE_1__.default).use(router).mount("#app");
 
@@ -16825,6 +16930,30 @@ __webpack_require__.r(__webpack_exports__);
 
 }));
 
+/***/ }),
+
+/***/ "./node_modules/css-loader/dist/cjs.js??clonedRuleSet-9.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-9.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/Header/Cart.vue?vue&type=style&index=0&id=a5f35132&scoped=true&lang=css":
+/*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
+  !*** ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-9.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-9.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/Header/Cart.vue?vue&type=style&index=0&id=a5f35132&scoped=true&lang=css ***!
+  \******************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
+/***/ ((module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => __WEBPACK_DEFAULT_EXPORT__
+/* harmony export */ });
+/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../../node_modules/css-loader/dist/runtime/api.js */ "./node_modules/css-loader/dist/runtime/api.js");
+/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0__);
+// Imports
+
+var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default()(function(i){return i[1]});
+// Module
+___CSS_LOADER_EXPORT___.push([module.id, "\n.cart-enter-active[data-v-a5f35132],\n.cart-leave-active[data-v-a5f35132] {\n    transition: all 0.5s;\n}\n.cart-enter[data-v-a5f35132],\n.cart-leave-active[data-v-a5f35132] {\n    opacity: 0;\n    transform: translateX(-50px);\n    transform: translateY(-50px);\n}\n", ""]);
+// Exports
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
+
+
 /***/ }),
 
 /***/ "./node_modules/css-loader/dist/cjs.js??clonedRuleSet-9.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-9.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/Header/Navbar.vue?vue&type=style&index=0&id=41f95097&scoped=true&lang=css":
@@ -16927,6 +17056,21 @@ module.exports = function (cssWithMappingToString) {
 
 /***/ }),
 
+/***/ "./resources/img/svg/Cart.svg":
+/*!************************************!*\
+  !*** ./resources/img/svg/Cart.svg ***!
+  \************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => __WEBPACK_DEFAULT_EXPORT__
+/* harmony export */ });
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ("/images/Cart.svg?4c5936120c756fb8cbca398c6d542bb3");
+
+/***/ }),
+
 /***/ "./resources/img/svg/Logo.svg":
 /*!************************************!*\
   !*** ./resources/img/svg/Logo.svg ***!
@@ -34311,6 +34455,36 @@ process.chdir = function (dir) {
 process.umask = function() { return 0; };
 
 
+/***/ }),
+
+/***/ "./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-9.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-9.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/Header/Cart.vue?vue&type=style&index=0&id=a5f35132&scoped=true&lang=css":
+/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
+  !*** ./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-9.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-9.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/Header/Cart.vue?vue&type=style&index=0&id=a5f35132&scoped=true&lang=css ***!
+  \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => __WEBPACK_DEFAULT_EXPORT__
+/* harmony export */ });
+/* harmony import */ var _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! !../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js */ "./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js");
+/* harmony import */ var _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _node_modules_css_loader_dist_cjs_js_clonedRuleSet_9_use_1_node_modules_vue_loader_dist_stylePostLoader_js_node_modules_postcss_loader_dist_cjs_js_clonedRuleSet_9_use_2_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_Cart_vue_vue_type_style_index_0_id_a5f35132_scoped_true_lang_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! !!../../../../node_modules/css-loader/dist/cjs.js??clonedRuleSet-9.use[1]!../../../../node_modules/vue-loader/dist/stylePostLoader.js!../../../../node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-9.use[2]!../../../../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./Cart.vue?vue&type=style&index=0&id=a5f35132&scoped=true&lang=css */ "./node_modules/css-loader/dist/cjs.js??clonedRuleSet-9.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-9.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/Header/Cart.vue?vue&type=style&index=0&id=a5f35132&scoped=true&lang=css");
+
+            
+
+var options = {};
+
+options.insert = "head";
+options.singleton = false;
+
+var update = _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0___default()(_node_modules_css_loader_dist_cjs_js_clonedRuleSet_9_use_1_node_modules_vue_loader_dist_stylePostLoader_js_node_modules_postcss_loader_dist_cjs_js_clonedRuleSet_9_use_2_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_Cart_vue_vue_type_style_index_0_id_a5f35132_scoped_true_lang_css__WEBPACK_IMPORTED_MODULE_1__.default, options);
+
+
+
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (_node_modules_css_loader_dist_cjs_js_clonedRuleSet_9_use_1_node_modules_vue_loader_dist_stylePostLoader_js_node_modules_postcss_loader_dist_cjs_js_clonedRuleSet_9_use_2_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_Cart_vue_vue_type_style_index_0_id_a5f35132_scoped_true_lang_css__WEBPACK_IMPORTED_MODULE_1__.default.locals || {});
+
 /***/ }),
 
 /***/ "./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-9.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-9.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/Header/Navbar.vue?vue&type=style&index=0&id=41f95097&scoped=true&lang=css":
@@ -34648,6 +34822,36 @@ _Categories_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__.default.__f
 
 /***/ }),
 
+/***/ "./resources/js/components/Header/Cart.vue":
+/*!*************************************************!*\
+  !*** ./resources/js/components/Header/Cart.vue ***!
+  \*************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => __WEBPACK_DEFAULT_EXPORT__
+/* harmony export */ });
+/* harmony import */ var _Cart_vue_vue_type_template_id_a5f35132_scoped_true__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Cart.vue?vue&type=template&id=a5f35132&scoped=true */ "./resources/js/components/Header/Cart.vue?vue&type=template&id=a5f35132&scoped=true");
+/* harmony import */ var _Cart_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Cart.vue?vue&type=script&lang=js */ "./resources/js/components/Header/Cart.vue?vue&type=script&lang=js");
+/* harmony import */ var _Cart_vue_vue_type_style_index_0_id_a5f35132_scoped_true_lang_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Cart.vue?vue&type=style&index=0&id=a5f35132&scoped=true&lang=css */ "./resources/js/components/Header/Cart.vue?vue&type=style&index=0&id=a5f35132&scoped=true&lang=css");
+
+
+
+
+;
+_Cart_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__.default.render = _Cart_vue_vue_type_template_id_a5f35132_scoped_true__WEBPACK_IMPORTED_MODULE_0__.render
+_Cart_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__.default.__scopeId = "data-v-a5f35132"
+/* hot reload */
+if (false) {}
+
+_Cart_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__.default.__file = "resources/js/components/Header/Cart.vue"
+
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (_Cart_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__.default);
+
+/***/ }),
+
 /***/ "./resources/js/components/Header/MobileMenu.vue":
 /*!*******************************************************!*\
   !*** ./resources/js/components/Header/MobileMenu.vue ***!
@@ -34820,6 +35024,22 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _node_modules_babel_loader_lib_index_js_clonedRuleSet_5_use_0_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_Categories_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../../node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!../../../../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./Categories.vue?vue&type=script&lang=js */ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/Categories/Categories.vue?vue&type=script&lang=js");
  
 
+/***/ }),
+
+/***/ "./resources/js/components/Header/Cart.vue?vue&type=script&lang=js":
+/*!*************************************************************************!*\
+  !*** ./resources/js/components/Header/Cart.vue?vue&type=script&lang=js ***!
+  \*************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => /* reexport safe */ _node_modules_babel_loader_lib_index_js_clonedRuleSet_5_use_0_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_Cart_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_0__.default
+/* harmony export */ });
+/* harmony import */ var _node_modules_babel_loader_lib_index_js_clonedRuleSet_5_use_0_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_Cart_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../../node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!../../../../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./Cart.vue?vue&type=script&lang=js */ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/Header/Cart.vue?vue&type=script&lang=js");
+ 
+
 /***/ }),
 
 /***/ "./resources/js/components/Header/MobileMenu.vue?vue&type=script&lang=js":
@@ -34916,6 +35136,22 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _node_modules_babel_loader_lib_index_js_clonedRuleSet_5_use_0_node_modules_vue_loader_dist_templateLoader_js_ruleSet_1_rules_2_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_Categories_vue_vue_type_template_id_3a992334__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../../node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!../../../../node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!../../../../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./Categories.vue?vue&type=template&id=3a992334 */ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/Categories/Categories.vue?vue&type=template&id=3a992334");
 
 
+/***/ }),
+
+/***/ "./resources/js/components/Header/Cart.vue?vue&type=template&id=a5f35132&scoped=true":
+/*!*******************************************************************************************!*\
+  !*** ./resources/js/components/Header/Cart.vue?vue&type=template&id=a5f35132&scoped=true ***!
+  \*******************************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "render": () => /* reexport safe */ _node_modules_babel_loader_lib_index_js_clonedRuleSet_5_use_0_node_modules_vue_loader_dist_templateLoader_js_ruleSet_1_rules_2_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_Cart_vue_vue_type_template_id_a5f35132_scoped_true__WEBPACK_IMPORTED_MODULE_0__.render
+/* harmony export */ });
+/* harmony import */ var _node_modules_babel_loader_lib_index_js_clonedRuleSet_5_use_0_node_modules_vue_loader_dist_templateLoader_js_ruleSet_1_rules_2_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_Cart_vue_vue_type_template_id_a5f35132_scoped_true__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../../node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!../../../../node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!../../../../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./Cart.vue?vue&type=template&id=a5f35132&scoped=true */ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/Header/Cart.vue?vue&type=template&id=a5f35132&scoped=true");
+
+
 /***/ }),
 
 /***/ "./resources/js/components/Header/MobileMenu.vue?vue&type=template&id=a706a4b0":
@@ -35012,6 +35248,19 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _node_modules_babel_loader_lib_index_js_clonedRuleSet_5_use_0_node_modules_vue_loader_dist_templateLoader_js_ruleSet_1_rules_2_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_Products_vue_vue_type_template_id_4a553918__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../../node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!../../../../node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!../../../../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./Products.vue?vue&type=template&id=4a553918 */ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/Products/Products.vue?vue&type=template&id=4a553918");
 
 
+/***/ }),
+
+/***/ "./resources/js/components/Header/Cart.vue?vue&type=style&index=0&id=a5f35132&scoped=true&lang=css":
+/*!*********************************************************************************************************!*\
+  !*** ./resources/js/components/Header/Cart.vue?vue&type=style&index=0&id=a5f35132&scoped=true&lang=css ***!
+  \*********************************************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _node_modules_style_loader_dist_cjs_js_node_modules_css_loader_dist_cjs_js_clonedRuleSet_9_use_1_node_modules_vue_loader_dist_stylePostLoader_js_node_modules_postcss_loader_dist_cjs_js_clonedRuleSet_9_use_2_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_Cart_vue_vue_type_style_index_0_id_a5f35132_scoped_true_lang_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../../node_modules/style-loader/dist/cjs.js!../../../../node_modules/css-loader/dist/cjs.js??clonedRuleSet-9.use[1]!../../../../node_modules/vue-loader/dist/stylePostLoader.js!../../../../node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-9.use[2]!../../../../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./Cart.vue?vue&type=style&index=0&id=a5f35132&scoped=true&lang=css */ "./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-9.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-9.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/Header/Cart.vue?vue&type=style&index=0&id=a5f35132&scoped=true&lang=css");
+
+
 /***/ }),
 
 /***/ "./resources/js/components/Header/Navbar.vue?vue&type=style&index=0&id=41f95097&scoped=true&lang=css":
diff --git a/resources/js/app.js b/resources/js/app.js
index d2eaad94..66503dc6 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -6,6 +6,7 @@ import { createRouter, createWebHashHistory } from "vue-router";
 import store from "./store/index";
 
 import Layout from "./components/Layouts/Layout.vue";
+import Cart from "./components/Header/Cart.vue";
 import Index from "./components/Index.vue";
 import Products from "./components/Products/Products.vue";
 import Categories from "./components/Categories/Categories.vue";
@@ -22,7 +23,7 @@ const router = createRouter({
 });
 
 createApp({
-    components: { Layout, Index, Products, Categories },
+    components: { Cart, Layout, Index, Products, Categories },
 })
     .use(store)
     .use(router)
diff --git a/resources/js/components/Header/Cart.vue b/resources/js/components/Header/Cart.vue
index e69de29b..4b2df44a 100644
--- a/resources/js/components/Header/Cart.vue
+++ b/resources/js/components/Header/Cart.vue
@@ -0,0 +1,53 @@
+<template>
+    <div>
+        <transition name="cart">
+            <span
+                v-if="cartLength"
+                class="text-xl text-white no-underline lg:text-black is-active"
+            >
+                <img
+                    alt="Cart icon"
+                    class="h-12 ml-4 lg:ml-2"
+                    aria-label="Cart"
+                    src="../../../img/svg/Cart.svg"
+            /></span>
+        </transition>
+        <transition name="cart">
+            <div>
+                <span
+                    class="absolute w-6 h-6 pb-2 ml-16 -mt-12 text-center text-white bg-black rounded-full lg:ml-14"
+                >
+                    {{ cartLength }}
+                </span>
+                <span>Total: 0 </span>
+            </div>
+        </transition>
+    </div>
+</template>
+
+<script>
+import { computed } from "vue";
+import { useStore } from "vuex";
+
+export default {
+    setup() {
+        const store = useStore();
+        const cartLength = computed(() => store.state.cart.length);
+
+        return { cartLength };
+    },
+};
+</script>
+
+<style scoped>
+.cart-enter-active,
+.cart-leave-active {
+    transition: all 0.5s;
+}
+.cart-enter,
+.cart-leave-active {
+    opacity: 0;
+    transform: translateX(-50px);
+    transform: translateY(-50px);
+}
+</style>
diff --git a/resources/js/components/Header/Navbar.vue b/resources/js/components/Header/Navbar.vue
index c736cd12..7e3fe1f9 100644
--- a/resources/js/components/Header/Navbar.vue
+++ b/resources/js/components/Header/Navbar.vue
@@ -70,7 +70,7 @@
                                 <li
                                     class="inline-block py-2 text-xl font-semibold no-underline lg:text-base lg:px-4"
                                 >
-                                    Shopping cart
+                                    <cart />
                                 </li>
                             </ul>
                         </nav>
@@ -82,10 +82,11 @@
 </template>
 
 <script>
+import Cart from "./Cart";
 import MobileMenu from "./MobileMenu";
 export default {
     name: "Navbar",
-    components: { MobileMenu },
+    components: { MobileMenu, Cart },
 };
 </script>
 

From b2acad939f671e71919d9a645c90b110bded31fe Mon Sep 17 00:00:00 2001
From: w3bdesign <45217974+w3bdesign@users.noreply.github.com>
Date: Thu, 28 Jan 2021 05:06:12 +0100
Subject: [PATCH 5/5] Only show cart total if cart is not empty

---
 public/js/app.js                        | 9 ++++++---
 resources/js/components/Header/Cart.vue | 3 +--
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/public/js/app.js b/public/js/app.js
index adeeb584..335bcb2e 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -16494,10 +16494,13 @@ var _hoisted_2 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("
 );
 
 var _hoisted_3 = {
+  key: 0
+};
+var _hoisted_4 = {
   "class": "absolute w-6 h-6 pb-2 ml-16 -mt-12 text-center text-white bg-black rounded-full lg:ml-14"
 };
 
-var _hoisted_4 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("span", null, "Total: 0 ", -1
+var _hoisted_5 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("span", null, "Total: 0 ", -1
 /* HOISTED */
 );
 
@@ -16517,9 +16520,9 @@ var render = /*#__PURE__*/_withId(function (_ctx, _cache, $props, $setup, $data,
     name: "cart"
   }, {
     "default": _withId(function () {
-      return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", null, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("span", _hoisted_3, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($setup.cartLength), 1
+      return [$setup.cartLength ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)("div", _hoisted_3, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("span", _hoisted_4, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($setup.cartLength), 1
       /* TEXT */
-      ), _hoisted_4])];
+      ), _hoisted_5])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true)];
     }),
     _: 1
     /* STABLE */
diff --git a/resources/js/components/Header/Cart.vue b/resources/js/components/Header/Cart.vue
index 4b2df44a..fc1bf014 100644
--- a/resources/js/components/Header/Cart.vue
+++ b/resources/js/components/Header/Cart.vue
@@ -13,7 +13,7 @@
             /></span>
         </transition>
         <transition name="cart">
-            <div>
+            <div v-if="cartLength">
                 <span
                     class="absolute w-6 h-6 pb-2 ml-16 -mt-12 text-center text-white bg-black rounded-full lg:ml-14"
                 >
@@ -33,7 +33,6 @@ export default {
     setup() {
         const store = useStore();
         const cartLength = computed(() => store.state.cart.length);
-
         return { cartLength };
     },
 };