Sage and mmenu

[yecats]

Hi Sagers,

I’m having some trouble locating where I’ve gone wrong setting up mmenu.js on a new Sage install. When I have the JavaScript directly in my header.blade.php, the mmenu works as it should. As soon as I move it into my common.js and rebuild, it no longer works. Any ideas what I’m doing wrong here? When I view the compiled JS, it looks like this is likely happening because the imported scripts are showing under the document.addEventListener I’ve added to the common.js init();

My steps were:

1. Installed dependencies:
   npm install mburger-css
   npm install mmenu-js
   npm install mhead-js

2. Updated common.js:

// Import Scripts
import ‘mmenu-js’;
import ‘mhead-js’;

export default {
init() {

// Fonts
window.WebFontConfig = {
  custom: {
    families: ['Nexa&display=swap'],
  },
  google: {
    families: ['PT Serif:400'],
  },
};
(function(d) {
  var wf = d.createElement('script'), s = d.scripts[0];
  wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js';
  wf.async = true;
  s.parentNode.insertBefore(wf, s);
})(document);

// Menu
document.addEventListener(
  'DOMContentLoaded', () => {
    new Mmenu( '#my-menu', {
      'slidingSubmenus': false,
      'extensions': [
        'border-full',
        //'pagedim-black',
        'pagedim-white',
        'position-bottom',
        //'theme-white',
        'theme-dark',
      ],
      'navbars': [
        {
          'position': 'top',
          'content': [
            'breadcrumbs',
            'close',
          ],
        },
        {
          'position': 'bottom',
          'content': [
            '<i class=\'fab fa-facebook-f\'></i>',
            '<i class=\'fab fa-twitter\'></i>',
            '<i class=\'fab fa-instagram\'></i>',
          ],
        },
      ],
    }, {
      offCanvas: {
        'clone': true,
      },
    });
    
    // Header
    new Mhead( '#my-header', {
      'unpin': 100,
      'pin': 100,
      'tolerance': 4,
    });
  });

},
finalize() {

},
};

[alwaysblank]

main.js is already wrapping all is scripts in a document ready check, so you may be attempting to bind your script to an event that’s already passed and hence never triggers: https://github.com/roots/sage/blob/f3e794a09374d2f110742d15b9b975490fcddbee/resources/assets/scripts/main.js#L24

[yecats]

@alwaysblank Thank you! That was it Appreciate your speedy help!