portal_publico/static/js/sidebar.js

// Item "Calendário De Paula" abriu como link externo (nova aba) até essa
// rodada; virou um modal com <iframe> embutindo a mesma URL, já que a
// ferramenta (mesmo host do "Novo Chamado" de Ramais) não bloqueia embed via
// X-Frame-Options/CSP — ao contrário do padrão dos outros links externos do
// portal (Solicitações, cartões de Links & Ferramentas), que continuam
// abrindo em nova aba de propósito.
const PID_CALENDARIO_DEPAULA_URL = "https://depaula-tvcorporativa.lovable.app/calendario";

document.addEventListener("DOMContentLoaded", () => {
  const shell = document.getElementById("app-shell");
  const toggleBtn = document.getElementById("sidebar-toggle");
  const sidebarEl = document.querySelector(".sidebar");

  // Fica true quando a sidebar está expandida por ter sido ativada pelo
  // ícone (ou por ser portal.html, sempre expandida por padrão) — só nesse
  // caso um clique fora da sidebar não deve recolhê-la de novo.
  let sidebarPinnedByToggle = true;

  if (shell) {
    const isMobile = window.matchMedia("(max-width: 1024px)").matches;
    const isPortalHome = window.location.pathname.endsWith("/portal.html");
    if (!isMobile && !isPortalHome) {
      shell.classList.add("is-collapsed");
      sidebarPinnedByToggle = false;
    }
  }

  if (toggleBtn && shell) {
    toggleBtn.addEventListener("click", () => {
      const isMobile = window.matchMedia("(max-width: 1024px)").matches;
      if (isMobile) {
        shell.classList.toggle("is-expanded-mobile");
      } else {
        shell.classList.toggle("is-collapsed");
        sidebarPinnedByToggle = !shell.classList.contains("is-collapsed");
      }
    });
  }

  document.addEventListener("click", (event) => {
    const isMobile = window.matchMedia("(max-width: 1024px)").matches;
    if (
      isMobile ||
      !shell ||
      sidebarPinnedByToggle ||
      shell.classList.contains("is-collapsed") ||
      (sidebarEl && sidebarEl.contains(event.target)) ||
      (toggleBtn && toggleBtn.contains(event.target))
    ) {
      return;
    }
    shell.classList.add("is-collapsed");
  });

  let tooltip = null;

  if (sidebarEl && shell) {
    tooltip = document.createElement("div");
    tooltip.className = "sidebar-tooltip";
    tooltip.hidden = true;
    document.body.appendChild(tooltip);

    sidebarEl.querySelectorAll(".nav-item").forEach((item) => {
      const label = item.querySelector(".nav-item__label");
      if (!label) {
        return;
      }

      item.addEventListener("mouseenter", () => {
        if (!shell.classList.contains("is-collapsed")) {
          return;
        }
        const rect = item.getBoundingClientRect();
        tooltip.textContent = label.textContent.trim();
        tooltip.style.top = `${rect.top + rect.height / 2}px`;
        tooltip.style.left = `${rect.right + 8}px`;
        tooltip.hidden = false;
      });

      item.addEventListener("mouseleave", () => {
        tooltip.hidden = true;
      });
    });
  }

  document.querySelectorAll("[data-group-toggle]").forEach((btn) => {
    btn.addEventListener("click", () => {
      const group = btn.closest(".nav-group");
      group.classList.toggle("is-open");
      const isMobile = window.matchMedia("(max-width: 1024px)").matches;
      if (!isMobile && shell) {
        shell.classList.remove("is-collapsed");
        if (tooltip) {
          tooltip.hidden = true;
        }
      }
    });
  });

  if (sidebarEl && shell) {
    sidebarEl.addEventListener("click", (event) => {
      const isMobile = window.matchMedia("(max-width: 1024px)").matches;
      if (isMobile || event.target.closest("a, button")) {
        return;
      }
      shell.classList.remove("is-collapsed");
    });
  }

  document.querySelectorAll("[data-subgroup-toggle]").forEach((btn) => {
    btn.addEventListener("click", () => {
      const subgroup = btn.closest(".nav-subgroup");
      subgroup.classList.toggle("is-open");
    });
  });

  document.querySelectorAll("[data-logout]").forEach((btn) => {
    btn.addEventListener("click", pidLogout);
  });

  const calendarioDepaulaBtn = document.getElementById("calendario-depaula-btn");
  const calendarioDepaulaModal = document.getElementById("calendario-depaula-modal");
  const calendarioDepaulaIframe = document.getElementById("calendario-depaula-iframe");
  const calendarioDepaulaCloseBtn = document.getElementById("calendario-depaula-close-btn");

  function openCalendarioDepaulaModal() {
    calendarioDepaulaIframe.src = PID_CALENDARIO_DEPAULA_URL;
    calendarioDepaulaModal.hidden = false;
  }

  function closeCalendarioDepaulaModal() {
    calendarioDepaulaModal.hidden = true;
    calendarioDepaulaIframe.src = "about:blank";
  }

  if (calendarioDepaulaBtn) {
    calendarioDepaulaBtn.addEventListener("click", (event) => {
      event.preventDefault();
      openCalendarioDepaulaModal();
    });
  }
  if (calendarioDepaulaCloseBtn) calendarioDepaulaCloseBtn.addEventListener("click", closeCalendarioDepaulaModal);
  if (calendarioDepaulaModal) {
    calendarioDepaulaModal.addEventListener("click", (event) => {
      if (event.target === calendarioDepaulaModal) closeCalendarioDepaulaModal();
    });
  }
});