Done #2771 @1

diff --git a/resources/js/app.js b/resources/js/app.js
index 6b112e8a33a88dfd91dd714943997549aa431c82..4cbe7272988d4533a60d38da883335075021e6f5 100644 (file)
--- 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 befc8111250c29caf34282ebe871c8cc0fef3de5..383552782b33ffaf467639e2f9a9f544df028e53 100644 (file)
--- 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 26faba8b08e0c09e6e344f3dd89f2b686df4dae8..3791287462a961af05fdfd192667d7974d5da87b 100644 (file)
--- 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 fdcda6f43d0ff62959c3792ab5fd0eb40483c5fc..57de124dc54d0ee0a7126cca7a2013f31c1688f8 100644 (file)
--- 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 d45611c7551b7127efa90edc140ed22df7c99a07..393d01326398f9ebbf25d08cb864532503648585 100644 (file)
--- 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 c7c0b037e7528b17f5c669ad01a1fb1e1e4dad67..d11714161f1986a82fdac40c3c8e0cc37687d1f9 100644 (file)
--- 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 6f87e0e0c7ff3efeb2859f26edc10fbfc4fc0870..2687fb73ae97c1b9503773e8ce423b5666402aaf 100644 (file)
--- 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 92a12771369beab065a704225850da03043097c1..0cb0c0bd4f4d68fe92041d5f5c1e0d59c714aadb 100644 (file)
--- 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>