Skip to content

Commit 008c46e

Browse files
w3bdesignw3bdesign
committed
Cart mobile menu
1 parent 04fc35c commit 008c46e

File tree

8 files changed

+110
-67
lines changed

8 files changed

+110
-67
lines changed

‎public/css/app.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1853,6 +1853,10 @@ video {
18531853
display: block;
18541854
}
18551855

1856+
.md\:hidden {
1857+
display: none;
1858+
}
1859+
18561860
.md\:w-full {
18571861
width: 100%;
18581862
}

‎public/images/MobileLogo.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎public/js/app.js‎

Lines changed: 77 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -20889,10 +20889,13 @@ __webpack_require__.r(__webpack_exports__);
2088920889
var expose = _ref.expose;
2089020890
expose();
2089120891
var store = (0,_store_useCart__WEBPACK_IMPORTED_MODULE_0__.useCart)();
20892-
var getOrderDetails = store.getOrderDetails;
20892+
var getOrderDetails = store.getOrderDetails,
20893+
clearOrder = store.clearOrder;
20894+
clearOrder;
2089320895
var __returned__ = {
2089420896
store: store,
2089520897
getOrderDetails: getOrderDetails,
20898+
clearOrder: clearOrder,
2089620899
useCart: _store_useCart__WEBPACK_IMPORTED_MODULE_0__.useCart
2089720900
};
2089820901
Object.defineProperty(__returned__, '__isScriptSetup', {
@@ -21472,40 +21475,34 @@ var _hoisted_5 = {
2147221475

2147321476
var _hoisted_6 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)("Products ");
2147421477

21475-
var _hoisted_7 = {
21476-
"class": "flex justify-center mt-6 text-lg w-auto p-4 m-4 font-bold text-center"
21477-
};
21478-
21479-
var _hoisted_8 = /*#__PURE__*/_withScopeId(function () {
21478+
var _hoisted_7 = /*#__PURE__*/_withScopeId(function () {
2148021479
return /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", {
2148121480
"class": "w-5/12 lg:hidden"
2148221481
}, null, -1
2148321482
/* HOISTED */
2148421483
);
2148521484
});
2148621485

21487-
var _hoisted_9 = {
21486+
var _hoisted_8 = {
2148821487
"class": "flex flex-row w-2/12 px-2 my-2 lg:hidden"
2148921488
};
21490-
var _hoisted_10 = {
21489+
var _hoisted_9 = {
2149121490
"class": "self-center block w-full mr-4"
2149221491
};
21493-
var _hoisted_11 = ["aria-expanded"];
21492+
var _hoisted_10 = ["aria-expanded"];
2149421493

21495-
var _hoisted_12 = /*#__PURE__*/_withScopeId(function () {
21494+
var _hoisted_11 = /*#__PURE__*/_withScopeId(function () {
2149621495
return /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", {
2149721496
"class": "burger-lines"
2149821497
}, null, -1
2149921498
/* HOISTED */
2150021499
);
2150121500
});
2150221501

21503-
var _hoisted_13 = [_hoisted_12];
21502+
var _hoisted_12 = [_hoisted_11];
2150421503
function render(_ctx, _cache, $props, $setup, $data, $options) {
2150521504
var _component_router_link = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("router-link");
2150621505

21507-
var _component_cart = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("cart");
21508-
2150921506
return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("div", _hoisted_1, [!_ctx.firstRender ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("div", {
2151021507
key: 0,
2151121508
"class": (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)(["fixed top-0 left-0 z-50 w-screen mt-40 bg-white h-96 animate__animated", {
@@ -21534,25 +21531,13 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
2153421531
_: 1
2153521532
/* STABLE */
2153621533

21537-
}, 8
21538-
/* PROPS */
21539-
, ["onClick"])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("li", _hoisted_7, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_router_link, {
21540-
to: "/cart",
21541-
onClick: _ctx.displayMobileMenu
21542-
}, {
21543-
"default": (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
21544-
return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_cart)];
21545-
}),
21546-
_: 1
21547-
/* STABLE */
21548-
2154921534
}, 8
2155021535
/* PROPS */
2155121536
, ["onClick"])])])], 2
2155221537
/* CLASS */
21553-
)) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true), _hoisted_8, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_9, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_10, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("button", {
21538+
)) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true), _hoisted_7, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_8, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_9, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("button", {
2155421539
id: "nav-toggle",
21555-
"class": (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)(["mt-6 burger burger-squeeze", {
21540+
"class": (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)(["burger burger-squeeze", {
2155621541
open: _ctx.expandedMenu
2155721542
}]),
2155821543
"aria-haspopup": "true",
@@ -21562,9 +21547,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
2156221547
onClick: _cache[0] || (_cache[0] = function () {
2156321548
return _ctx.displayMobileMenu && _ctx.displayMobileMenu.apply(_ctx, arguments);
2156421549
})
21565-
}, _hoisted_13, 10
21550+
}, _hoisted_12, 10
2156621551
/* CLASS, PROPS */
21567-
, _hoisted_11)])])]);
21552+
, _hoisted_10)])])]);
2156821553
}
2156921554

2157021555
/***/ }),
@@ -21582,6 +21567,8 @@ __webpack_require__.r(__webpack_exports__);
2158221567
/* harmony export */ });
2158321568
/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue */ "./node_modules/vue/dist/vue.esm-bundler.js");
2158421569
/* harmony import */ var _img_svg_Logo_svg__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../img/svg/Logo.svg */ "./resources/img/svg/Logo.svg");
21570+
/* harmony import */ var _img_svg_MobileLogo_svg__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../img/svg/MobileLogo.svg */ "./resources/img/svg/MobileLogo.svg");
21571+
2158521572

2158621573

2158721574

@@ -21596,101 +21583,122 @@ var _hoisted_1 = {
2159621583
var _hoisted_2 = {
2159721584
"class": "flex flex-wrap"
2159821585
};
21586+
var _hoisted_3 = {
21587+
"class": "w-9/12 pr-2 my-2 overflow-hidden lg:w-3/12 md:w-10/12 flex flex-wrap"
21588+
};
2159921589

21600-
var _hoisted_3 = /*#__PURE__*/_withScopeId(function () {
21590+
var _hoisted_4 = /*#__PURE__*/_withScopeId(function () {
2160121591
return /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", {
21602-
"class": "w-9/12 pr-2 my-2 overflow-hidden lg:w-3/12 md:w-10/12"
21603-
}, [/*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", {
21604-
"class": "ml-4 lg:ml-0"
21592+
"class": "ml-4 lg:ml-0 hidden md:block"
2160521593
}, [/*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("img", {
2160621594
alt: "Logo",
2160721595
"class": "h-20 lg:h-24",
2160821596
"aria-label": "Nettbutikk logo",
2160921597
src: _img_svg_Logo_svg__WEBPACK_IMPORTED_MODULE_1__["default"]
21610-
})])], -1
21598+
})], -1
2161121599
/* HOISTED */
2161221600
);
2161321601
});
2161421602

21615-
var _hoisted_4 = /*#__PURE__*/_withScopeId(function () {
21603+
var _hoisted_5 = /*#__PURE__*/_withScopeId(function () {
21604+
return /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("img", {
21605+
alt: "Mobile logo",
21606+
"class": "h-16 md:hidden block w-32",
21607+
"aria-label": "Nettbutikk logo",
21608+
src: _img_svg_MobileLogo_svg__WEBPACK_IMPORTED_MODULE_2__["default"]
21609+
}, null, -1
21610+
/* HOISTED */
21611+
);
21612+
});
21613+
21614+
var _hoisted_6 = /*#__PURE__*/_withScopeId(function () {
2161621615
return /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", {
2161721616
"class": "hidden lg:w-1/12 lg:block"
2161821617
}, null, -1
2161921618
/* HOISTED */
2162021619
);
2162121620
});
2162221621

21623-
var _hoisted_5 = {
21622+
var _hoisted_7 = {
2162421623
id: "nav-content",
2162521624
"class": "hidden w-full mt-4 bg-black lg:w-8/12 lg:block lg:bg-white lg:mt-0 lg:text-right",
2162621625
"aria-expanded": "false"
2162721626
};
21628-
var _hoisted_6 = {
21627+
var _hoisted_8 = {
2162921628
"class": "px-6 lg:px-0 lg:pt-5 xl:pt-7"
2163021629
};
21631-
var _hoisted_7 = {
21630+
var _hoisted_9 = {
2163221631
id: "block-main",
2163321632
role: "navigation",
2163421633
"aria-labelledby": "block-main-menu"
2163521634
};
21636-
var _hoisted_8 = {
21635+
var _hoisted_10 = {
2163721636
"class": "items-center justify-end flex-1 pr-4 -mr-4 list-reset lg:flex"
2163821637
};
21639-
var _hoisted_9 = {
21638+
var _hoisted_11 = {
2164021639
"class": "inline-block py-2 text-xl font-semibold no-underline lg:text-base pl-6"
2164121640
};
2164221641

21643-
var _hoisted_10 = /*#__PURE__*/_withScopeId(function () {
21642+
var _hoisted_12 = /*#__PURE__*/_withScopeId(function () {
2164421643
return /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("span", {
2164521644
"class": "text-2xl text-white no-underline lg:text-black link-underline link-underline-blue"
2164621645
}, " Home ", -1
2164721646
/* HOISTED */
2164821647
);
2164921648
});
2165021649

21651-
var _hoisted_11 = {
21650+
var _hoisted_13 = {
2165221651
"class": "inline-block py-2 text-xl font-semibold no-underline lg:text-base pl-6"
2165321652
};
2165421653

21655-
var _hoisted_12 = /*#__PURE__*/_withScopeId(function () {
21654+
var _hoisted_14 = /*#__PURE__*/_withScopeId(function () {
2165621655
return /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("span", {
2165721656
"class": "text-2xl text-white no-underline lg:text-black link-underline link-underline-blue"
2165821657
}, " Products ", -1
2165921658
/* HOISTED */
2166021659
);
2166121660
});
2166221661

21663-
var _hoisted_13 = {
21662+
var _hoisted_15 = {
2166421663
"class": "inline-block py-2 text-xl font-semibold no-underline lg:text-base pl-6"
2166521664
};
2166621665
function render(_ctx, _cache) {
21667-
var _component_mobile_menu = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("mobile-menu");
21666+
var _component_cart_component = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("cart-component");
2166821667

2166921668
var _component_router_link = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("router-link");
2167021669

21671-
var _component_cart_component = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("cart-component");
21670+
var _component_mobile_menu = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("mobile-menu");
2167221671

21673-
return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("header", _hoisted_1, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_2, [_hoisted_3, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)(" mobile-menu kommer her "), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_mobile_menu), _hoisted_4, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_5, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_6, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("nav", _hoisted_7, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("ul", _hoisted_8, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("li", _hoisted_9, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_router_link, {
21672+
return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("header", _hoisted_1, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_2, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_3, [_hoisted_4, _hoisted_5, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_router_link, {
21673+
to: "/cart"
21674+
}, {
21675+
"default": (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
21676+
return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_cart_component)];
21677+
}),
21678+
_: 1
21679+
/* STABLE */
21680+
21681+
})]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_mobile_menu), _hoisted_6, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_7, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_8, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("nav", _hoisted_9, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("ul", _hoisted_10, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("li", _hoisted_11, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_router_link, {
2167421682
tabindex: "0",
2167521683
to: "/"
2167621684
}, {
2167721685
"default": (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
21678-
return [_hoisted_10];
21686+
return [_hoisted_12];
2167921687
}),
2168021688
_: 1
2168121689
/* STABLE */
2168221690

21683-
})]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("li", _hoisted_11, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_router_link, {
21691+
})]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("li", _hoisted_13, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_router_link, {
2168421692
tabindex: "0",
2168521693
to: "/products"
2168621694
}, {
2168721695
"default": (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
21688-
return [_hoisted_12];
21696+
return [_hoisted_14];
2168921697
}),
2169021698
_: 1
2169121699
/* STABLE */
2169221700

21693-
})]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("li", _hoisted_13, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_cart_component)])])])])])])]);
21701+
})]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("li", _hoisted_15, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_cart_component)])])])])])])]);
2169421702
}
2169521703

2169621704
/***/ }),
@@ -22512,6 +22520,9 @@ var useCart = (0,pinia__WEBPACK_IMPORTED_MODULE_0__.defineStore)("shopState", {
2251222520
clearCustomer: function clearCustomer() {
2251322521
this.customer = {};
2251422522
},
22523+
clearOrder: function clearOrder() {
22524+
this.order = {};
22525+
},
2251522526
saveCustomerDetails: function saveCustomerDetails(customer) {
2251622527
this.customer = customer;
2251722528
},
@@ -24811,6 +24822,21 @@ __webpack_require__.r(__webpack_exports__);
2481124822

2481224823
/***/ }),
2481324824

24825+
/***/ "./resources/img/svg/MobileLogo.svg":
24826+
/*!******************************************!*\
24827+
!*** ./resources/img/svg/MobileLogo.svg ***!
24828+
\******************************************/
24829+
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
24830+
24831+
"use strict";
24832+
__webpack_require__.r(__webpack_exports__);
24833+
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
24834+
/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)
24835+
/* harmony export */ });
24836+
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ("/images/MobileLogo.svg?d0cb2f2a087d322fda99dbfed23efe11");
24837+
24838+
/***/ }),
24839+
2481424840
/***/ "./resources/img/svg/Remove.svg":
2481524841
/*!**************************************!*\
2481624842
!*** ./resources/img/svg/Remove.svg ***!

‎resources/img/svg/MobileLogo.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎resources/js/components/Header/MobileMenu.vue‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -19,19 +19,14 @@
1919
>
2020
<router-link to="/products" @click="displayMobileMenu">Products </router-link>
2121
</li>
22-
<li class="flex justify-center mt-6 text-lg w-auto p-4 m-4 font-bold text-center">
23-
<router-link to="/cart" @click="displayMobileMenu">
24-
<cart />
25-
</router-link>
26-
</li>
2722
</ul>
2823
</div>
2924
<div class="w-5/12 lg:hidden" />
3025
<div class="flex flex-row w-2/12 px-2 my-2 lg:hidden">
3126
<div class="self-center block w-full mr-4">
3227
<button
3328
id="nav-toggle"
34-
class="mt-6 burger burger-squeeze"
29+
class="burger burger-squeeze"
3530
aria-haspopup="true"
3631
:aria-expanded="expandedMenu"
3732
aria-controls="menu"

‎resources/js/components/Header/Navbar.vue‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,30 @@
44
class="container flex flex-col justify-center px-0 pt-6 mx-auto mb-6"
55
>
66
<div class="flex flex-wrap">
7-
<div class="w-9/12 pr-2 my-2 overflow-hidden lg:w-3/12 md:w-10/12">
8-
<div class="ml-4 lg:ml-0">
7+
<div class="w-9/12 pr-2 my-2 overflow-hidden lg:w-3/12 md:w-10/12 flex flex-wrap">
8+
<div class="ml-4 lg:ml-0 hidden md:block">
99
<img
1010
alt="Logo"
1111
class="h-20 lg:h-24"
1212
aria-label="Nettbutikk logo"
1313
src="../../../img/svg/Logo.svg"
1414
/>
1515
</div>
16+
17+
<img
18+
alt="Mobile logo"
19+
class="h-16 md:hidden block w-32"
20+
aria-label="Nettbutikk logo"
21+
src="../../../img/svg/MobileLogo.svg"
22+
/>
23+
24+
<router-link to="/cart">
25+
<cart-component />
26+
</router-link>
1627
</div>
17-
<!-- mobile-menu kommer her -->
28+
1829
<mobile-menu />
30+
1931
<div class="hidden lg:w-1/12 lg:block" />
2032
<div
2133
id="nav-content"

‎resources/js/pages/Success.vue‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
11
<template>
2-
<div v-if="getOrderDetails">
3-
<h1 class="h-64 mt-24 p-6 text-3xl font-bold text-center">
4-
Order completed with order ID #{{ getOrderDetails }}
5-
</h1>
6-
</div>
2+
<div v-if="getOrderDetails">
3+
<h1 class="h-64 mt-24 p-6 text-3xl font-bold text-center">
4+
Order completed with order ID #{{ getOrderDetails }}
5+
</h1>
6+
</div>
77
</template>
88

99
<script setup>
1010
import { useCart } from "../store/useCart";
1111
1212
const store = useCart();
1313
14-
const { getOrderDetails } = store;
14+
const { getOrderDetails, clearOrder } = store;
15+
16+
clearOrder;
1517
</script>

‎resources/js/store/useCart.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,10 +40,12 @@ export const useCart = defineStore("shopState", {
4040
clearCart() {
4141
this.cart.length = 0;
4242
},
43-
4443
clearCustomer() {
4544
this.customer = {};
4645
},
46+
clearOrder() {
47+
this.order = {};
48+
},
4749
saveCustomerDetails(customer) {
4850
this.customer = customer;
4951
},

0 commit comments

Comments
 (0)