From c71460adb3557be6e794da4e0d20cdf8fc28b04a Mon Sep 17 00:00:00 2001
From: Stephen Cameron <stephen@cubedesigners.com>
Date: Wed, 4 Sep 2019 14:46:09 +0200
Subject: [PATCH] Done #2771 @1

---
 resources/js/app.js                           | 9 +++++++--
 resources/js/menu.js                          | 5 +++--
 resources/styles/common/setup.styl            | 1 +
 resources/styles/components/cart.styl         | 5 +++++
 resources/styles/components/header.styl       | 2 +-
 resources/styles/components/navigation.styl   | 7 ++-----
 resources/views/partials/header.blade.php     | 6 ++++--
 resources/views/partials/nav-mobile.blade.php | 8 +++++---
 8 files changed, 28 insertions(+), 15 deletions(-)

diff --git a/resources/js/app.js b/resources/js/app.js
index 6b112e8..4cbe727 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -106,8 +106,13 @@ const app = new Vue({
                 });
         },
 
-        openCart() {
-            document.body.classList.add('cart-open');
+        openCart(event) {
+            // Only trigger cart popup on larger screens
+            // On smaller screens, the link will behave as normal.
+            if (event && window.innerWidth > menu_breakpoint) {
+                event.preventDefault();
+                document.body.classList.add('cart-open');
+            }
         },
         closeCart() {
             document.body.classList.remove('cart-open');
diff --git a/resources/js/menu.js b/resources/js/menu.js
index befc811..3835527 100644
--- a/resources/js/menu.js
+++ b/resources/js/menu.js
@@ -8,10 +8,11 @@ document.addEventListener(
     'DOMContentLoaded', () => {
         let nav=document.getElementById("mobile-nav");
         window.mmenu = new MmenuLight(nav, {title: "Menu", theme: 'dark'});
+        window.menu_breakpoint = 1023; // Note: this should match the menu CSS breakpoint in setup.styl!
 
-        mmenu.enable('(max-width: 1000px)'); // Note: this should match the menu CSS breakpoint!
+        mmenu.enable(`(max-width: ${menu_breakpoint}px)`);
         mmenu.offcanvas();
-        nav.classList.remove('hidden')
+        nav.classList.remove('hidden');
 
         document.querySelector(`a[href="#menu"]`)
             .addEventListener('click', (event) => {
diff --git a/resources/styles/common/setup.styl b/resources/styles/common/setup.styl
index 26faba8..3791287 100644
--- a/resources/styles/common/setup.styl
+++ b/resources/styles/common/setup.styl
@@ -13,6 +13,7 @@ $vertical-gutter   = 5vw
 
 // Breakpoints in Rupture (https://github.com/jescalan/rupture)
 $breakpoint-columns  = 768px // NOTE: this should align with the 'sm' screen value in tailwind.config.js
+$breakpoint-menu     = 1024px // This needs to match the MMenu activation setting in menu.js
 rupture.scale        = 0 400px   768px   1024px
 rupture.scale-names  = 'small' 'medium' 'large'
 rupture.anti-overlap = -1px // Results in +below(1000px) being max-width: 999px and +above(1000px) being min-width: 1000px
diff --git a/resources/styles/components/cart.styl b/resources/styles/components/cart.styl
index fdcda6f..57de124 100644
--- a/resources/styles/components/cart.styl
+++ b/resources/styles/components/cart.styl
@@ -49,6 +49,11 @@
   .cart-header-popout
     display: block
 
+  // Hide main menu to avoid awkward overlaps with the menu popout
+  #menu
+    visibility: hidden
+    pointer-events: none
+
   // Also show overlay under cart popout
   .body-overlay
     position: fixed
diff --git a/resources/styles/components/header.styl b/resources/styles/components/header.styl
index d45611c..393d013 100644
--- a/resources/styles/components/header.styl
+++ b/resources/styles/components/header.styl
@@ -1,7 +1,7 @@
 .site-header
   @apply bg-navy text-white text-lg font-display font-medium antialiased
 
-  +below(1000px)
+  +below($breakpoint-menu)
     .mobile-menu-icon
       display: block
       cursor: pointer
diff --git a/resources/styles/components/navigation.styl b/resources/styles/components/navigation.styl
index c7c0b03..d117141 100644
--- a/resources/styles/components/navigation.styl
+++ b/resources/styles/components/navigation.styl
@@ -79,8 +79,5 @@
 
 
 #mobile-nav
-  display: none;
-  +below(1000px)
-    &.hidden
-      display none
-    display block
+  +below($breakpoint-menu)
+    display: block
diff --git a/resources/views/partials/header.blade.php b/resources/views/partials/header.blade.php
index 6f87e0e..2687fb7 100644
--- a/resources/views/partials/header.blade.php
+++ b/resources/views/partials/header.blade.php
@@ -18,9 +18,11 @@
         </nav>
 
         @if (config('features.quote'))
-            <div class="cart-header text-right flex items-center cursor-pointer hover:text-blue" @click="openCart">
+            <a href="{{ $nav->getHrefByName('cart') }}"
+               @click="openCart"
+               class="cart-header text-right flex items-center cursor-pointer text-white hover:text-blue">
                 @include('partials.cart')
-            </div>
+            </a>
 
             <div class="cart-header-popout">
                 <div class="cart-header-popout-title flex justify-between items-center px-1v py-1v">
diff --git a/resources/views/partials/nav-mobile.blade.php b/resources/views/partials/nav-mobile.blade.php
index 92a1277..0cb0c0b 100644
--- a/resources/views/partials/nav-mobile.blade.php
+++ b/resources/views/partials/nav-mobile.blade.php
@@ -1,3 +1,5 @@
-<nav id="mobile-nav" class="hidden">
-    {!! CubistMenu::get('#main','mobile')->asUl() !!}
-</nav>
+<div class="hidden">
+    <nav id="mobile-nav">
+        {!! CubistMenu::get('#main','mobile')->asUl() !!}
+    </nav>
+</div>
-- 
2.39.5