delegateConnect-menu-fix.user.js

// ==UserScript==
// @name     CHI21 DelegateConnect menu fix
// @description This is how the Delegate Connect menu should behave
// @version  1
// @grant    none
// @match https://acmchi.delegateconnect.co/*
// @author Frederik Brudy (fbrudy.net)
// ==/UserScript==


//sibling code from https://gomakethings.com/finding-the-next-and-previous-sibling-elements-that-match-a-selector-with-vanilla-js/
const getNextSibling = (elem, selector) => {

	// Get the next sibling element
	let sibling = elem.nextElementSibling;

	// If there's no selector, return the first sibling
	if (!selector) 
    return sibling;

	// If the sibling matches our selector, use it
	// If not, jump to the next sibling and continue the loop
	while (sibling) {
		if (sibling.matches(selector)) 
      return sibling;
		sibling = sibling.nextElementSibling
	}

};

const getPreviousSibling = (elem, selector) => {

	// Get the next sibling element
	let sibling = elem.previousElementSibling;

	// If there's no selector, return the first sibling
	if (!selector) 
    return sibling;

	// If the sibling matches our selector, use it
	// If not, jump to the next sibling and continue the loop
	while (sibling) {
		if (sibling.matches(selector)) 
      return sibling;
		sibling = sibling.previousElementSibling;
	}

};


const addClickListener = (currentEl, childToToggleSelector = ".subnav") => {
  currentEl.addEventListener("click", (e) => {
    e.preventDefault();
    e.stopPropagation();
    const submenu = getNextSibling(currentEl, childToToggleSelector);
    submenu.classList.toggle("hidden-item");
  });
};


// add needed CSS
const addGlobalStyle = (css) => {
  let head = document.getElementsByTagName('head')[0];
  if (!head) 
    return;
  let style = document.createElement('style');
  style.type = 'text/css';
  style.innerHTML = css;
  head.appendChild(style);
}


const applyFixes = () => {
  addGlobalStyle('.hidden-item{visibility: hidden !important;}');


  //hide the left menu and the user account menu on the right
  const list = document.querySelectorAll(".items.top.feature_background_side_menu_colour_bg .subnav, .top-submenu-panel.user, .top-submenu-panel.search");
  for (let i = 0; i < list.length; ++i) {
    const currentEl = list[i];
    currentEl.classList.add('hidden-item');
  }

  //remove the background dimming overlay
  const elem = document.querySelectorAll(".nav-overlay");
  elem[0].remove();

  //add the click listener to the left menu items
  const menuButtons = document.querySelectorAll(".nav-link-desktop");
  for (let i = 0; i < menuButtons.length; ++i) {
    addClickListener(menuButtons[i]);
  }

  //add the click listener to the user account menu
  const userMenu = document.querySelectorAll(".top-user-menu, .icon-search.top-subnav");
  for (let i = 0; i < userMenu.length; ++i) {
    addClickListener(userMenu[i], ".top-submenu-panel");
  }
  const body = document.getElementsByTagName('body')[0];

  body.classList.add("chi-21-fix");
}

applyFixes();


//ugly workaround for the js page load
setInterval(() => { 
  const body = document.getElementsByTagName('body')[0];

  if(!body.classList.contains("chi-21-fix")){
    applyFixes();
  }
}, 2500);