From fc2759a5956b63d48a82fe24ac412bf246aeda61 Mon Sep 17 00:00:00 2001
From: JekkiNoopy <jekkinoopy@gmail.com>
Date: Sat, 16 May 2026 19:21:54 +0800
Subject: [PATCH] =?UTF-8?q?feat=20=E6=BC=A2=E5=A0=A1=E9=81=B8=E5=96=AE?=
 =?UTF-8?q?=E5=85=A8=E8=9E=A2=E5=B9=95=E8=A6=86=E8=93=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/css/style.css    | 31 ++++++++++++++++++++++++++++++-
 assets/js/portal-nav.js |  5 +++++
 2 files changed, 35 insertions(+), 1 deletion(-)

diff --git a/assets/css/style.css b/assets/css/style.css
index 12eeca1..6819c25 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -450,6 +450,10 @@ nav a {
 @media (max-width: 991px) {
 
     /* 漢堡展開：頂欄主標／子選單皆短字層 → 置中（內文 body 才置左，見 ai-change-boundaries） */
+    body.portal-nav-menu-open {
+        overflow: hidden;
+    }
+
     .portal-nav {
         display: grid;
         grid-template-columns: 1fr auto;
@@ -462,9 +466,28 @@ nav a {
     }
 
     .portal-nav.portal-nav--open {
+        position: fixed;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        height: 100dvh;
+        margin: 0;
+        padding:
+            max(0.85rem, env(safe-area-inset-top, 0px))
+            clamp(14px, 2vw + 10px, 32px)
+            max(1rem, env(safe-area-inset-bottom, 0px));
+        z-index: 10000;
+        overflow-x: hidden;
+        overflow-y: auto;
+        -webkit-overflow-scrolling: touch;
+        background-color: var(--black);
+        grid-template-columns: 1fr auto;
+        grid-template-rows: auto minmax(0, 1fr);
         grid-template-areas:
             "head head"
             "menu menu";
+        align-content: start;
+        box-sizing: border-box;
     }
 
     .portal-nav .logo {
@@ -509,7 +532,13 @@ nav a {
 
     .portal-nav.portal-nav--open>ul {
         display: flex;
-        margin-top: 10px;
+        flex: 1 1 auto;
+        min-height: 0;
+        margin-top: 12px;
+        padding-bottom: 1.5rem;
+        overflow-y: auto;
+        -webkit-overflow-scrolling: touch;
+        justify-content: flex-start;
     }
 
     .portal-nav>ul>li {
diff --git a/assets/js/portal-nav.js b/assets/js/portal-nav.js
index 09821ae..1e76e6b 100644
--- a/assets/js/portal-nav.js
+++ b/assets/js/portal-nav.js
@@ -36,6 +36,11 @@
             toggle.setAttribute("aria-expanded", open ? "true" : "false");
             toggle.setAttribute("aria-label", open ? "關閉選單" : "開啟選單");
         }
+        if (!isPortalNavDesktop()) {
+            document.body.classList.toggle("portal-nav-menu-open", open);
+        } else {
+            document.body.classList.remove("portal-nav-menu-open");
+        }
         if (!open) {
             nav.querySelectorAll(":scope > ul > li.open, .portal-nav__subgroup.open").forEach((el) => {
                 el.classList.remove("open");