hubl/src/scripts/index.js

document.addEventListener('DOMContentLoaded', function (event) {
  const menuWrappers = Array.from(document.querySelectorAll('.menu-wrapper'));
  const rightMenus = Array.from(document.querySelectorAll('nav.jsRightMenu'));
  const viewsContainer = Array.from(document.querySelectorAll('.views-container'));

  //- View change event
  // window.addEventListener('navigate', (event) => {
  // });

  //- 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 => {
      rightMenus.forEach(rM => rM.classList.toggle('offsite-is-closed'));
      viewsContainer.forEach(vC => vC.classList.toggle('sidebar-is-closed'));
    })
  });

  //- Watch every sib-forms & update data-src of linked sib-display
  document.querySelectorAll('sib-form[data-src], sib-form[bind-resource]').forEach(function(el) {
    el.addEventListener("save", function() {
      let dataSrc = el.getAttribute('data-src');
      document.querySelectorAll('sib-display[data-src="'+dataSrc+'"]').forEach(function(e) {
        e.setAttribute('data-src', dataSrc);
      });
    });
  });

  //- Header login hide/show
  if(document.querySelector('sib-auth').getUser() !== null) {
    document.querySelector('button[role="log in"]').style.display = 'none';
    //- Token expired, hack for ask relogin
    if(new Date(document.querySelector('sib-auth').getUser().expires_at*1000) <= new Date()) {
      document.querySelector('button[role="log in"]').style.display = '';
      document.querySelector('button[role="log in"]').style.color = 'red';
      document.querySelector('button[role="log in"]').innerHTML = 'Re-login';
    }
  }

});