((Drupal, $, once) => {
    Drupal.behaviors.mobileMenu = {
      attach(context) {
        $(
          once('mobileMenu', 'html', context).forEach(() => {
            new Mmenu( '#mobile-menu', {
                'theme': 'white',
                'dragOpen': false,
                'slidingSubmenus': true,
                'extensions': [
                    'pagedim-black',
                    'fx-menu-slide',
                    'pageshadow', 
                    'effect-zoom-menu',
                    'effect-zoom-panels'
                ],
      
                'pageScroll': {
                    'scroll': true,
                    'update': true
                },
      
                'offCanvas': {
                    'position': 'right-front',
                    'clone': true,
                    'screenReader': {
                      'closeMenu': 'Close menu',
                      'openMenu': 'Open menu',
                      'toggleSubmenu': 'Toggle submenu',
                      'aria': true ,
                      'text': true
                    },
                },
      
                'classNames': {
                    'selected': 'is-active'
                },
      
                'setSelected': {
                    'current': 'detect',
                    'hover': true,
                    'parent': false
                },
      
                'navbars': [
                  {
                    'position': 'top',
                    'use': true,
                    'content': [
                        'prev',
                        'title',
                        'close'
                    ]
                  }
                ],
                'navbar': {
                    'add': true,
                    'title': 'Home',
                    'titleLink': 'parent'
                  },
                
                'keyboardNavigation' : {
                    'enable'	: true,
                    'enhance'	: true
                },
                
                'onClick': {
                    'close': false,
                    'preventDefault': true,
                    'setSelected'   : true
                  }
            });

            $('#mobile-menu-btn').click(() => { 
              const activeTrailListItem = $('li.mm-listitem.menu-item--active-trail .is-active.mm-listitem__text:last');
              const activeTrailPanel = activeTrailListItem.parents('div.mm-panel');
              const panelsWrapper = activeTrailPanel.parents('div.mm-panels');
              const backArrow = panelsWrapper.siblings('.mm-navbars.mm-navbars--top').find('.mm-btn.mm-hidden');
              const parentTitle = activeTrailPanel.find('.mm-navbar__title span');
              const titleText = parentTitle.text();
              const backId = activeTrailPanel.find('a.mm-btn.mm-btn--prev.mm-navbar__btn').attr('href');
              const titleSpan = $('<span>').text(titleText);
                
              if (activeTrailListItem.length > 0) {
                  
                // Update title
                $('.mm-navbars--top .mm-navbar__title').empty().append(titleSpan).addClass('title');

                activeTrailPanel.addClass('mm-panel--opened').removeAttr('inert');
                const activePanel = activeTrailPanel.addClass('mm-panel--opened').removeAttr('inert');
                
                // Handle backArrow
                backArrow.addClass('mm-btn--prev mm-navbar__btn')
                  .removeClass('mm-hidden')
                  .attr('href', `${backId}`)
                  .attr('aria-label', 'Close submenu');

                // Handle panels
                activePanel.siblings(`div.mm-panel.mm-panel--opened[id='${backId}']`)
                    .addClass('mm-panel--parent')
                    .removeClass('mm-panel--opened')
                    .attr('inert', 'true');

                const firstPanel = $('.mm-panels .mm-panel:first');
                if (firstPanel.is(activePanel)) {
                  firstPanel.addClass('mm-panel--opened');
                  firstPanel.parents('.mm-panels')
                    .siblings('.mm-navbars.mm-navbars--top')
                    .find('.mm-btn--prev.mm-navbar__btn')
                    .addClass('mm-hidden'); 
                } else {
                  firstPanel.removeClass('mm-panel--opened');
                }

                backArrow.click(() => { 
                  activeTrailPanel.addClass('mm-panel--highest').removeClass('mm-panel--opened').attr('inert', 'true');
                });
              
              } 
            });

            // END SINGLE RUN CODE
          })
      );
    },
  };
})(Drupal, jQuery, once);