web/_javascript/modules/components/sidebar.js

/**
 * Expand or close the sidebar in mobile screens.
 */

const $sidebar = document.getElementById('sidebar');
const $trigger = document.getElementById('sidebar-trigger');
const $mask = document.getElementById('mask');

class SidebarUtil {
  static #isExpanded = false;

  static toggle() {
    this.#isExpanded = !this.#isExpanded;
    document.body.toggleAttribute('sidebar-display', this.#isExpanded);
    $sidebar.classList.toggle('z-2', this.#isExpanded);
    $mask.classList.toggle('d-none', !this.#isExpanded);
  }
}

export function sidebarExpand() {
  $trigger.onclick = $mask.onclick = () => SidebarUtil.toggle();
}