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!

4

Danny - just letting you know that the code is intermittently locking up the portal. not sure why but not only will it not load once I save and then try to view the portal, it also will lock up the edit Screen - I have to relaunch the tab and get back in to the dashboard

5

Danny, I did a little AI hacking and this seems to work a little better - the lockups stopped happening. I am not sure what changed but just wanted to put it in here

1 Like
6

Hi @user40,

Iā€™m glad you were able to get it working, and thank you for sharing the update.

I was not able to reproduce the lockups during my testing, so any additional context on what was happening would be helpful. If you are comfortable sharing the updated code you used, that would also be appreciated.

Thank you again. This may be helpful for other users running into the same issue.