Keep menu visible

General
1

I have some users that just want the menu to stay visible and not disappear - Is there a way to make it visitible at all times

2

Hi @user40 ,
Thank you for reaching out!

This can be done with custom code.

Please add the script below to the Body custom code section of your workspace or portal. This should keep the left sidebar menu open after users select an Agent, select a content page, or click elsewhere on the page.

<script>
(() => {
  if (window.__pickaxePinnedSidebar) return;
  window.__pickaxePinnedSidebar = true;

  const DESKTOP_QUERY = "(min-width: 860px)";
  const SIDEBAR_SELECTOR = "div.glass-dynamic.group.fixed.left-0.top-0";
  const IGNORE_SELECTOR = [
    "[data-radix-popper-content-wrapper]",
    "[data-slot='popover-content']",
    "[data-slot='dropdown-menu-content']",
    "[data-slot='tooltip-content']",
  ].join(",");

  const isDesktop = () => window.matchMedia(DESKTOP_QUERY).matches;
  const getSidebar = () => document.querySelector(SIDEBAR_SELECTOR);
  const getHeader = (sidebar) => sidebar?.firstElementChild || null;
  const getToggleButton = (sidebar) =>
    getHeader(sidebar)?.querySelector("button:last-of-type") || null;
  const getContent = (sidebar) => sidebar?.children?.[1] || null;

  const persistOpen = () => {
    try {
      localStorage.setItem("studio-sidebar-open-desktop", "true");
    } catch {}
  };

  const isOpen = (sidebar = getSidebar()) => {
    const content = getContent(sidebar);
    if (!sidebar || !content) return false;
    const contentStyle = getComputedStyle(content);
    return (
      contentStyle.pointerEvents !== "none" &&
      sidebar.getBoundingClientRect().width > 250
    );
  };

  const reopenIfClosed = () => {
    if (!isDesktop()) return;
    persistOpen();

    const sidebar = getSidebar();
    const toggle = getToggleButton(sidebar);
    if (!sidebar || !toggle) return;
    if (isOpen(sidebar)) return;

    toggle.click();
  };

  document.addEventListener(
    "mousedown",
    (event) => {
      if (!isDesktop()) return;

      const sidebar = getSidebar();
      const target = event.target;

      if (!sidebar || !isOpen(sidebar) || !(target instanceof Element)) return;
      if (sidebar.contains(target)) return;
      if (target.closest(IGNORE_SELECTOR)) return;

      const originalContains = sidebar.contains.bind(sidebar);
      sidebar.contains = (node) => node === target || originalContains(node);

      queueMicrotask(() => {
        sidebar.contains = originalContains;
      });
    },
    true,
  );

  document.addEventListener(
    "click",
    (event) => {
      if (!isDesktop()) return;

      const sidebar = getSidebar();
      const target = event.target;

      if (!sidebar || !(target instanceof Element)) return;

      const toggle = getToggleButton(sidebar);
      if (toggle && isOpen(sidebar) && toggle.contains(target)) {
        event.preventDefault();
        event.stopPropagation();
        if (typeof event.stopImmediatePropagation === "function") {
          event.stopImmediatePropagation();
        }
        persistOpen();
        return;
      }

      requestAnimationFrame(() => {
        requestAnimationFrame(reopenIfClosed);
      });
    },
    true,
  );

  const observer = new MutationObserver(() => {
    if (!isDesktop()) return;
    persistOpen();
    reopenIfClosed();
  });

  observer.observe(document.body, {
    subtree: true,
    childList: true,
    attributes: true,
    attributeFilter: ["style", "class"],
  });

  persistOpen();
  requestAnimationFrame(() => {
    requestAnimationFrame(reopenIfClosed);
  });
})();
</script>

Please note that this is a custom-code workaround, so if the portal layout changes in the future, the script may need to be adjusted.

Hyperlink on menu item
3

dude, you are amazing!