diff --git a/.changeset/docs-mobile-nav-scrim.md b/.changeset/docs-mobile-nav-scrim.md
new file mode 100644
index 00000000..5a503c2e
--- /dev/null
+++ b/.changeset/docs-mobile-nav-scrim.md
@@ -0,0 +1,5 @@
+---
+'@getmunin/docs-pages': patch
+---
+
+Dim the page behind the open mobile section-nav dropdown in the developer portal, and close it on a tap outside — the panel previously floated over undimmed content, unlike every dialog in the product.
diff --git a/packages/docs-pages/src/_components/docs-side.tsx b/packages/docs-pages/src/_components/docs-side.tsx
index 5d34ee2f..a461e63a 100644
--- a/packages/docs-pages/src/_components/docs-side.tsx
+++ b/packages/docs-pages/src/_components/docs-side.tsx
@@ -25,6 +25,7 @@ export function DocsSide({ label, children }: { label: string; children: ReactNo
{children}
+ setOpen(false)} />
);
}
diff --git a/packages/docs-pages/src/docs.css b/packages/docs-pages/src/docs.css
index 05dbca56..2a221c69 100644
--- a/packages/docs-pages/src/docs.css
+++ b/packages/docs-pages/src/docs.css
@@ -318,7 +318,8 @@
}
/* Mobile section-nav toggle — hidden on desktop, the list shows inline. */
-.docs-side-toggle {
+.docs-side-toggle,
+.docs-side-scrim {
display: none;
}
@@ -1269,6 +1270,8 @@
}
.docs-side-toggle {
display: flex;
+ position: relative;
+ z-index: 5;
width: 100%;
align-items: center;
justify-content: space-between;
@@ -1307,6 +1310,25 @@
.docs-side[data-open='true'] .docs-side-list {
display: block;
}
+ .docs-side-scrim {
+ display: block;
+ position: fixed;
+ inset: 0;
+ z-index: 4;
+ background: rgb(0 0 0 / 0.4);
+ opacity: 0;
+ pointer-events: none;
+ transition: opacity 200ms ease;
+ }
+ @media (prefers-color-scheme: dark) {
+ .docs-side-scrim {
+ background: rgb(0 0 0 / 0.7);
+ }
+ }
+ .docs-side[data-open='true'] .docs-side-scrim {
+ opacity: 1;
+ pointer-events: auto;
+ }
.docs-main {
padding: 24px 20px 80px;
}