WIP #2922 @6

diff --git a/package.json b/package.json
index 6310d35d9a84f4737200d15a9065fd5f79e451b0..6f68ec860d83ab3c5beba4e69df31bd00702014b 100644 (file)
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
         "laravel-mix-purgecss": "^4.1.0",
         "lodash": "^4.17.5",
         "lost": "^8.3.1",
+        "mmenu-light": "^2.1.0",
         "popper.js": "^1.12",
         "portal-vue": "^2.1.5",
         "resolve-url-loader": "^2.3.1",

diff --git a/resources/js/app.js b/resources/js/app.js
index fded0ae068d91ff4b2b211fae0a4155ba7c06ce9..5b49d61daa4025bb73cb6a698c6902faacf525dc 100644 (file)
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -6,6 +6,7 @@
  */
 
 require('./bootstrap');
+require('./menu');
 
 window.Vue = require('vue');
 

diff --git a/resources/js/menu.js b/resources/js/menu.js
new file mode 100644 (file)
index 0000000..6e74df3
--- /dev/null
+++ b/resources/js/menu.js
@@ -0,0 +1,35 @@
+// Note: for now, mmenu-light doesn't support webpack properly
+// so we're taking the contents of src/mmenu-light.js and placing
+// it here in order to make the initialisation work correctly
+// Ref: https://github.com/FrDH/mmenu-light/issues/7
+
+//===============================================================
+//     Core
+import MmenuLight from 'mmenu-light/dist/js/mmlight';
+
+//     Add-ons
+import offcanvas from 'mmenu-light/dist/js/mmlight.offcanvas';
+
+MmenuLight.prototype.offcanvas = offcanvas;
+
+//     Global namespace
+window.MmenuLight = MmenuLight;
+//===============================================================
+
+//=== MMenu Setup
+document.addEventListener(
+    'DOMContentLoaded', () => {
+        const menuSelector = '#menu';
+        const menu = new MmenuLight(document.querySelector(menuSelector));
+
+        menu.enable('all'); // or: '(max-width: 1000px)'
+        menu.offcanvas();
+
+        document.querySelector(`a[href="${menuSelector}"]`)
+            .addEventListener('click', (event) => {
+                menu.open();
+                event.preventDefault();
+                event.stopPropagation();
+        });
+    }
+);

diff --git a/resources/styles/app.styl b/resources/styles/app.styl
index 0b868bd08a71034c9101348a5928f29e5ef96d56..596534a2026ac2a359432c3f06792ef8408346c4 100644 (file)
--- a/resources/styles/app.styl
+++ b/resources/styles/app.styl
@@ -6,6 +6,9 @@
 @tailwind base
 @tailwind components
 
+// MMenu base styles from NPM package
+@import '~mmenu-light/dist/mmenu-light.css'
+
 // Extracted components or custom styles that can't be done with utilities
 @import 'common/spacing'
 @import 'common/columns'

diff --git a/resources/views/partials/header.blade.php b/resources/views/partials/header.blade.php
index f8677ff301779ecc69ffac3480d669b28659c678..85b8b3145a20b7c086f3f3251946a275b43dae8a 100644 (file)
--- a/resources/views/partials/header.blade.php
+++ b/resources/views/partials/header.blade.php
@@ -2,17 +2,19 @@
     <div class="container flex items-center py-8 relative z-20">
 
         <div class="mobile-menu-icon hidden">
-            <img src="{{ asset('images/icon-burger-menu.svg') }}" alt="Menu">
+            <a href="#menu">
+                <img src="{{ asset('images/icon-burger-menu.svg') }}" alt="Menu">
+            </a>
         </div>
 
         <div class="logo">
             @include('partials.logo')
         </div>
 
-        <div class="nav mx-auto flex items-center">
+        <nav id="menu" class="nav mx-auto flex items-center">
             @include('partials.nav')
             <portal-target name="nav-search-toggle" slim></portal-target>
-        </div>
+        </nav>
 
         @if (config('features.quote'))
             <div class="cart-header text-right flex items-center cursor-pointer hover:text-blue" @click="openCart">

diff --git a/yarn.lock b/yarn.lock
index 44c1bad3b11a8215968a18c85ffb59770bc37f09..79c46d8fe845c748e59159539ada105f7ac8b4cb 100644 (file)
--- a/yarn.lock
+++ b/yarn.lock
@@ -4562,6 +4562,11 @@ mkdirp@0.5.x, mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0, mkdirp@~0.5.1, mkdirp
   dependencies:
     minimist "0.0.8"
 
+mmenu-light@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/mmenu-light/-/mmenu-light-2.1.0.tgz#9387249d56649e3e776707e59a90ed018868cc10"
+  integrity sha512-s4FMXwYILw3UL7kpcjrDSXgn0AWEA+CQXnkrJhWEjLTONbHhFFI0Ln5BCQ4/kE6B5wD1WnR20o1eT8nAR7QYpw==
+
 move-concurrently@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"
@@ -6803,12 +6808,10 @@ stylus-loader@^3.0.2:
   dependencies:
     css-parse "~2.0.0"
     debug "~3.1.0"
-    glob "^7.1.3"
+    glob "~7.1.2"
     mkdirp "~0.5.x"
-    safer-buffer "^2.1.2"
     sax "~1.2.4"
-    semver "^6.0.0"
-    source-map "^0.7.3"
+    source-map "~0.7.2"
 
 supports-color@^2.0.0:
   version "2.0.0"