I mentioned this in another thread back in March but it is still unresolved. On a deployed studio (i.e. website), the hamburger menu stays open even when the user clicks away from it, forcing them to have to click the minus (-) symbol ib the menu. This is really quite annoying. I’m sure this isn’t a complex fix and would really help the UX for navigation. Please please resolve this as it has been raised by various users as an issue. Thanks.
The menu interaction that you are describing is intended behavior. If you want to remove this feature from your portal, you can try using custom code! Attached is some custom code that we generated for exactly what you’re asking for!
<script>
(() => {
if (window.__pickaxeOutsideSidebarCloseInstalled) return;
window.__pickaxeOutsideSidebarCloseInstalled = true;
const SIDEBAR_SELECTOR =
".glass-dynamic.group.fixed.left-0.top-0";
const listenedDocuments = new WeakSet();
const watchedFrames = new WeakSet();
function getPortalWindow() {
try {
if (window.parent !== window && window.parent.document) {
return window.parent;
}
} catch (error) {
// Cross-origin parents cannot be controlled by injected page code.
}
return window;
}
const portalWindow = getPortalWindow();
const portalDocument = portalWindow.document;
function getSidebar() {
return portalDocument.querySelector(SIDEBAR_SELECTOR);
}
function getSidebarContent(sidebar) {
return Array.from(sidebar.children).find((element) =>
element.classList.contains("min-h-0") &&
element.classList.contains("flex-1") &&
element.classList.contains("flex-col")
);
}
function isSidebarOpen(sidebar) {
const content = getSidebarContent(sidebar);
return Boolean(
content &&
portalWindow.getComputedStyle(content).pointerEvents !== "none"
);
}
function getToggleButton(sidebar) {
const header = sidebar.firstElementChild;
if (!header) return null;
return Array.from(header.children).find(
(element) => element.tagName === "BUTTON"
) || null;
}
function isInsidePortalSelectorMenu(target, sidebar) {
const trigger = sidebar.querySelector(
'[aria-haspopup="menu"][aria-controls]'
);
const menuId = trigger?.getAttribute("aria-controls");
const menu = menuId ? portalDocument.getElementById(menuId) : null;
return Boolean(menu && menu.contains(target));
}
function handleOutsideClick(event) {
const target = event.target;
if (!target || target.nodeType !== 1) return;
const sidebar = getSidebar();
if (!sidebar || !isSidebarOpen(sidebar)) return;
if (sidebar.contains(target)) return;
if (isInsidePortalSelectorMenu(target, sidebar)) return;
const toggleButton = getToggleButton(sidebar);
if (toggleButton) toggleButton.click();
}
function listenToDocument(targetDocument) {
if (!targetDocument || listenedDocuments.has(targetDocument)) return;
listenedDocuments.add(targetDocument);
targetDocument.addEventListener("click", handleOutsideClick);
targetDocument.querySelectorAll("iframe").forEach(watchFrame);
}
function watchFrame(frame) {
if (watchedFrames.has(frame)) return;
watchedFrames.add(frame);
const connectFrame = () => {
try {
listenToDocument(frame.contentDocument);
} catch (error) {
// Cross-origin iframe clicks cannot be observed from portal custom code.
}
};
frame.addEventListener("load", connectFrame);
connectFrame();
}
listenToDocument(portalDocument);
const observer = new portalWindow.MutationObserver((records) => {
records.forEach((record) => {
record.addedNodes.forEach((node) => {
if (node.nodeType !== 1) return;
if (node.tagName === "IFRAME") watchFrame(node);
node.querySelectorAll?.("iframe").forEach(watchFrame);
});
});
});
observer.observe(portalDocument.documentElement, {
childList: true,
subtree: true
});
})();
</script>
To implement this code, go to your deployments and click on the portal deployment you want this to work for. Go to the Design section and scroll down to the “Custom code” section and paste the code into the Body area. Make sure to hit save!
Let us know if the custom code works or if you had something different in mind!