Unify mobile detail navigation

public/assets/styles.portal.css

@@ -52,6 +52,19 @@ body.sg-card-list-page-drawer-open {
   background: var(--color-background-purple);
 }
 
+.sg-market-definition-mobile-detail-host {
+  position: fixed;
+  inset: 0;
+  z-index: 1500;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-large);
+  padding: var(--spacing-small);
+  box-sizing: border-box;
+  overflow: auto;
+  background: var(--color-background-purple);
+}
+
 .sg-market-mobile-detail-host .sg-card-list-page-drawer {
   position: static;
   display: flex;
@@ -62,10 +75,24 @@ body.sg-card-list-page-drawer-open {
   overflow: visible;
 }
 
+.sg-market-definition-mobile-detail-host .sg-card-list-page-drawer {
+  position: static;
+  display: flex;
+  width: 100%;
+  max-width: none;
+  transform: none;
+  box-shadow: none;
+  overflow: visible;
+}
+
 body.sg-market-mobile-detail-open > :not([data-market-mobile-detail-host]) {
   display: none !important;
 }
 
+body.sg-market-definition-mobile-detail-open > :not([data-market-definition-mobile-detail-host]) {
+  display: none !important;
+}
+
 .market-detail-grid {
   display: grid;
   grid-template-columns: minmax(10rem, 0.8fr) minmax(0, 1.2fr);

public/scripts/shared-mobile-detail.js

@@ -0,0 +1,85 @@
+(function () {
+  'use strict';
+
+  const create = ({ contentRoot, bodyClass, hostClass, hostDataAttribute, drawerDataAttribute, backdropSelector, backMarkup, historyKey }) => {
+    let host = null;
+    let drawer = null;
+    let trigger = null;
+    let open = false;
+
+    const restore = () => {
+      if (host && host.parentNode) {
+        const mobileDrawer = host.querySelector('[' + drawerDataAttribute + ']');
+        if (mobileDrawer) {
+          contentRoot.appendChild(mobileDrawer);
+          mobileDrawer.removeAttribute(drawerDataAttribute);
+          mobileDrawer.dataset.open = 'false';
+          mobileDrawer.setAttribute('aria-hidden', 'true');
+        }
+        host.parentNode.removeChild(host);
+      }
+
+      if (trigger) {
+        trigger.setAttribute('aria-expanded', 'false');
+      }
+      const backdrops = backdropSelector
+        ? [contentRoot.querySelector(backdropSelector)].filter(Boolean)
+        : Array.from(contentRoot.querySelectorAll('.sg-card-list-page-drawer-backdrop'));
+      backdrops.forEach((backdrop) => {
+        backdrop.dataset.open = 'false';
+        backdrop.setAttribute('aria-hidden', 'true');
+      });
+
+      host = null;
+      drawer = null;
+      trigger = null;
+      open = false;
+      document.body.classList.remove(bodyClass);
+      document.body.classList.remove('sg-card-list-page-drawer-open');
+    };
+
+    const mount = (sourceDrawer, detailTrigger, existingHost = null) => {
+      restore();
+      if (!sourceDrawer) {
+        return null;
+      }
+
+      host = existingHost || document.createElement('div');
+      host.className = hostClass;
+      host.setAttribute(hostDataAttribute, 'true');
+      if (!existingHost) {
+        host.innerHTML = backMarkup;
+      }
+      drawer = sourceDrawer;
+      trigger = detailTrigger;
+      drawer.setAttribute(drawerDataAttribute, 'true');
+      drawer.dataset.open = 'true';
+      drawer.setAttribute('aria-hidden', 'false');
+      host.appendChild(drawer);
+      document.body.appendChild(host);
+      document.body.classList.add(bodyClass);
+      open = true;
+
+      if (historyKey) {
+        window.history.pushState({ ...(window.history.state || {}), [historyKey]: 'detail' }, '', window.location.href);
+      }
+
+      return { host, drawer, trigger: detailTrigger };
+    };
+
+    const close = () => {
+      if (!open) {
+        return;
+      }
+      if (window.history.state && window.history.state[historyKey] === 'detail') {
+        window.history.back();
+        return;
+      }
+      restore();
+    };
+
+    return { mount, restore, close, isOpen: () => open, getHost: () => host, getDrawer: () => drawer };
+  };
+
+  window.SharedMobileDetail = { create };
+}());