From ff4618e379634b6657c1eb7298cc068b5301550b Mon Sep 17 00:00:00 2001
From: Friday <friday@openclaw.local>
Date: Sun, 26 Jul 2026 20:13:08 +0000
Subject: [PATCH] fix: add compact mobile menu presentation

---
 assets/css/compiled/main.css                  | 24 +++++++++++++++++++
 exampleSite/config/_default/params.toml       |  1 +
 .../content/docs/configuration/index.md       |  1 +
 .../header/components/mobile-menu.html        | 14 +++++++----
 4 files changed, 36 insertions(+), 4 deletions(-)

diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css
index 817486d2..a654ecc5 100644
--- a/assets/css/compiled/main.css
+++ b/assets/css/compiled/main.css
@@ -282,6 +282,12 @@
   .start-\[calc\(max\(-50vw\,-800px\)\+50\%\)\] {
     inset-inline-start: calc(max(-50vw, -800px) + 50%);
   }
+  .end-0 {
+    inset-inline-end: calc(var(--spacing) * 0);
+  }
+  .end-3 {
+    inset-inline-end: calc(var(--spacing) * 3);
+  }
   .end-6 {
     inset-inline-end: calc(var(--spacing) * 6);
   }
@@ -306,6 +312,9 @@
   .top-20 {
     top: calc(var(--spacing) * 20);
   }
+  .top-\[calc\(100\%\+0\.75rem\)\] {
+    top: calc(100% + 0.75rem);
+  }
   .top-full {
     top: 100%;
   }
@@ -1459,6 +1468,9 @@
   .w-\[36rem\] {
     width: 36rem;
   }
+  .w-\[min\(22rem\,calc\(100vw-1\.5rem\)\)\] {
+    width: min(22rem, calc(100vw - 1.5rem));
+  }
   .w-auto {
     width: auto;
   }
@@ -2026,6 +2038,12 @@
       background-color: color-mix(in oklab, rgba(var(--color-neutral), 1) 85%, transparent);
     }
   }
+  .bg-neutral\/95 {
+    background-color: color-mix(in srgb, rgba(rgba(var(--color-neutral), 1), 1) 95%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, rgba(var(--color-neutral), 1) 95%, transparent);
+    }
+  }
   .bg-primary-50\/70 {
     background-color: color-mix(in srgb, rgba(rgba(var(--color-primary-50), 1), 1) 70%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -3482,6 +3500,12 @@
       background-color: color-mix(in oklab, rgba(var(--color-neutral-800), 1) 85%, transparent);
     }
   }
+  .dark\:bg-neutral-800\/95:is(.dark *) {
+    background-color: color-mix(in srgb, rgba(rgba(var(--color-neutral-800), 1), 1) 95%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, rgba(var(--color-neutral-800), 1) 95%, transparent);
+    }
+  }
   .dark\:bg-neutral-900:is(.dark *) {
     background-color: rgba(var(--color-neutral-900), 1);
   }
diff --git a/exampleSite/config/_default/params.toml b/exampleSite/config/_default/params.toml
index 5a6ab279..80eb2154 100644
--- a/exampleSite/config/_default/params.toml
+++ b/exampleSite/config/_default/params.toml
@@ -41,6 +41,7 @@ fingerprintAlgorithm = "sha512" # Valid values are "sha512" (default), "sha384",
 
 [header]
   layout = "floating" # valid options: basic, fixed, fixed-fill, fixed-gradient, fixed-fill-blur, floating
+  mobileMenuStyle = "dropdown" # valid options: fullscreen, dropdown
 
 [footer]
   showMenu = true
diff --git a/exampleSite/content/docs/configuration/index.md b/exampleSite/content/docs/configuration/index.md
index 48eefc4b..bb79a5a5 100644
--- a/exampleSite/content/docs/configuration/index.md
+++ b/exampleSite/content/docs/configuration/index.md
@@ -228,6 +228,7 @@ Many of the article defaults here can be overridden on a per article basis by sp
 | Name | Default | Description |
 | --- | --- | --- |
 | `header.layout` | `"basic"` | Defines the header for the entire site, supported values are `basic`, `fixed`, `fixed-fill`, `fixed-fill-blur`, `fixed-gradient`, and `floating`. |
+| `header.mobileMenuStyle` | `"fullscreen"` | Defines the mobile menu presentation. Set to `"dropdown"` for a compact menu anchored below the header. |
 | `list.featureImageHover` | `false` | Adds a subtle zoom transition when a visitor hovers a post or related-content card. Individual pages can override this with `featureImageHover` in front matter. |
 
 ### Footer
diff --git a/layouts/partials/header/components/mobile-menu.html b/layouts/partials/header/components/mobile-menu.html
index c48abfb2..940410ca 100644
--- a/layouts/partials/header/components/mobile-menu.html
+++ b/layouts/partials/header/components/mobile-menu.html
@@ -1,4 +1,5 @@
-<div class="flex items-center h-14 gap-4">
+{{ $mobileMenuStyle := .Site.Params.header.mobileMenuStyle | default "fullscreen" }}
+<div class="relative flex items-center h-14 gap-4">
   {{ if .Site.Params.enableSearch | default false }}
     <button
       id="search-button-mobile"
@@ -39,14 +40,19 @@
       role="dialog"
       aria-modal="true"
       style="scrollbar-gutter: stable;"
-      class="fixed inset-0 z-50 invisible overflow-y-auto px-6 py-20 opacity-0 transition-[opacity,visibility] duration-300 peer-checked:visible peer-checked:opacity-100 bg-neutral-50/97 dark:bg-neutral-900/99
+      class="z-50 invisible overflow-y-auto opacity-0 transition-[opacity,visibility] duration-300 peer-checked:visible peer-checked:opacity-100
+      {{ if eq $mobileMenuStyle "dropdown" }}
+        absolute end-0 top-[calc(100%+0.75rem)] w-[min(22rem,calc(100vw-1.5rem))] rounded-2xl border border-neutral-200/80 bg-neutral/95 p-5 shadow-2xl shadow-neutral-950/20 backdrop-blur-xl dark:border-neutral-700/80 dark:bg-neutral-800/95
+      {{ else }}
+        fixed inset-0 px-6 py-20 bg-neutral-50/97 dark:bg-neutral-900/99
+      {{ end }}
       {{ if site.Params.enableStyledScrollbar | default true }}bf-scrollbar{{ end }}">
       <label
         for="mobile-menu-toggle"
-        class="fixed end-8 top-5 flex items-center justify-center z-50 h-12 w-12 cursor-pointer select-none rounded-full bf-icon-color-hover border bf-border-color bf-border-color-hover bg-neutral-50 dark:bg-neutral-900">
+        class="{{ if eq $mobileMenuStyle "dropdown" }}absolute end-3 top-3 h-10 w-10 rounded-xl{{ else }}fixed end-8 top-5 z-50 h-12 w-12 rounded-full{{ end }} flex items-center justify-center cursor-pointer select-none bf-icon-color-hover border bf-border-color bf-border-color-hover bg-neutral-50 dark:bg-neutral-900">
         {{ partial "icon.html" "xmark" }}
       </label>
-      <nav class="mx-auto max-w-md space-y-6">
+      <nav class="{{ if eq $mobileMenuStyle "dropdown" }}mt-10 space-y-3{{ else }}mx-auto max-w-md space-y-6{{ end }}">
         {{ template "mobile-main-menu" . }}
         {{ template "mobile-subnavigation" . }}
         {{ template "mobile-footer-components" . }}