function ensureSidebarCSS() {
  if (!document.querySelector('link[href*="sidepanel.css"]')) {
    const link = document.createElement("link");
    link.rel = "stylesheet";
    link.href = "./common_files/css/sidepanel.css";
    document.head.appendChild(link);
  }
}

async function loadSidebar(targetSelector = ".dashboard") {
  ensureSidebarCSS();

  try {
    const response = await fetch("sidepanel.html");
    if (!response.ok) throw new Error("Failed to load sidebar");

    const html = await response.text();
    document
      .querySelector(targetSelector)
      .insertAdjacentHTML("afterbegin", html);

    // after injecting HTML, run sidebar logic
    initSidebar?.();
    hideNameForIndexPage();
    // 🚀 announce globally that sidebar is ready
    document.dispatchEvent(new Event("sidebarLoaded"));
  } catch (err) {
    console.error("Error loading sidebar:", err);
  }
}