hubl/src/scripts/index.js

document.addEventListener('DOMContentLoaded', function (event) {
  const navBar = document.querySelector('#navbar');
  const btnToggle = document.querySelector('#button-toggle');
  const menuWrappers = Array.from(document.querySelectorAll('.menu-wrapper'));
  const rightMenus = Array.from(document.querySelectorAll('nav.jsRightMenu'));
  
  if (!navBar || !btnToggle) return;

  document.querySelectorAll('img[name$="account.picture"]').forEach(function (e) {
    if (!e.src || e.src == window.location) {
      e.src = '/images/user.jpg';
    }
  });

  btnToggle.addEventListener('click', e => {
    navBar.classList.toggle('open');
    e.stopPropagation();
  });

  window.addEventListener('click', e => {
    navBar.classList.remove('open');
  });

  function resize() {
    setTimeout(() =>
      Array.from(document.querySelectorAll('.chat-view')).forEach(elm => {
        if (!elm.offsetParent) return;
        elm.style.setProperty('--pos-top', elm.offsetTop + 'px');
      }));
  }
  window.addEventListener('resize', resize);
  window.addEventListener('navigate', resize);
  window.addEventListener('popstate', resize);
  document.addEventListener('load', resize);
  document.addEventListener('WebComponentsReady', resize);
  resize();

  // Toggle sub-menus
  menuWrappers.forEach(menuWrapper => {
    const menu = menuWrapper.querySelector('.menu');
    menu.addEventListener('click', e => {
      menuWrapper.classList.toggle('is-closed');
    });
  });

  // Open/close menu on the right
  rightMenus.forEach(rightMenu => {
    const btnRightMenu = rightMenu.querySelector("li.jsOffsiteToggle");
    
    btnRightMenu.addEventListener('click', e => {
      rightMenu.classList.toggle('offsite-is-closed');
    })
  })
});