From 16313c5add746b0a78cbf5a625d4905f51bc916b Mon Sep 17 00:00:00 2001
From: Codex User <codex@local.invalid>
Date: Wed, 9 Sep 2026 11:55:16 +0800
Subject: [PATCH] fix: simplify navigation and mobile menu

---
 src/components/Layout/Navbar.tsx | 39 ++++++++++++++++++++++++--------
 src/components/Layout/layout.css | 27 +++++++++++-----------
 2 files changed, 44 insertions(+), 22 deletions(-)

diff --git a/src/components/Layout/Navbar.tsx b/src/components/Layout/Navbar.tsx
index ebf8c2f..a30e2e4 100644
--- a/src/components/Layout/Navbar.tsx
+++ b/src/components/Layout/Navbar.tsx
@@ -1,11 +1,10 @@
 import { useState } from 'react'
-import { Link, NavLink, useLocation } from 'react-router-dom'
+import { Link, NavLink } from 'react-router-dom'
 import { PRIMARY_NAV, GLOBAL_RESIDENT } from '@/data/nav'
 import './layout.css'
 
 export default function Navbar() {
   const [open, setOpen] = useState(false)
-  const location = useLocation()
 
   return (
     <header className="site-header">
@@ -18,7 +17,7 @@ export default function Navbar() {
           </span>
         </Link>
 
-        <nav className={`nav-menu ${open ? 'open' : ''}`} aria-label="主导航（冻结6项）">
+        <nav className="nav-menu" aria-label="主导航">
           {PRIMARY_NAV.map(item => (
             <NavLink
               key={item.key}
@@ -31,7 +30,7 @@ export default function Navbar() {
           ))}
         </nav>
 
-        <div className={`nav-resident ${open ? 'open' : ''}`}>
+        <div className="nav-resident">
           {GLOBAL_RESIDENT.map(item => (
             <Link
               key={item.key}
@@ -55,12 +54,34 @@ export default function Navbar() {
           <span />
         </button>
       </div>
-      {/* 当前路径提示，便于验收无死链 */}
-      <div className="nav-current-path" aria-hidden>
-        <div className="container">
-          <span>当前：{location.pathname}</span>
+      {open && (
+        <div className="mobile-nav-panel" id="mobile-navigation">
+          <nav className="mobile-nav-links" aria-label="移动端主导航">
+            {PRIMARY_NAV.map(item => (
+              <NavLink
+                key={item.key}
+                to={item.path}
+                className={({ isActive }) => (isActive ? 'nav-link active' : 'nav-link')}
+                onClick={() => setOpen(false)}
+              >
+                {item.label}
+              </NavLink>
+            ))}
+          </nav>
+          <div className="mobile-nav-actions">
+            {GLOBAL_RESIDENT.map(item => (
+              <Link
+                key={item.key}
+                to={item.path}
+                className={item.key === 'contact-cta' ? 'btn btn-primary' : 'btn btn-ghost'}
+                onClick={() => setOpen(false)}
+              >
+                {item.label}
+              </Link>
+            ))}
+          </div>
         </div>
-      </div>
+      )}
     </header>
   )
 }
diff --git a/src/components/Layout/layout.css b/src/components/Layout/layout.css
index 569f866..4df1c0a 100644
--- a/src/components/Layout/layout.css
+++ b/src/components/Layout/layout.css
@@ -48,13 +48,7 @@
 }
 .hamburger span { width: 22px; height: 2px; background: var(--primary); border-radius: 2px; display: block; }
 
-.nav-current-path {
-  background: #f8fafc;
-  border-top: 1px solid #f1f5f9;
-  font-size: 11px;
-  color: #94a3b8;
-  padding: 4px 0;
-}
+.mobile-nav-panel { display: none; }
 
 .site-footer {
   background: #0f172a;
@@ -88,19 +82,26 @@
   .nav-menu, .nav-resident {
     display: none;
   }
-  .nav-menu.open, .nav-resident.open {
+  .mobile-nav-panel {
     display: flex;
     position: absolute;
-    left: 0; right: 0;
+    top: 64px;
+    left: 0;
+    right: 0;
+    max-height: calc(100vh - 64px);
+    overflow-y: auto;
     background: #fff;
     border-bottom: 1px solid #e2e8f0;
-    padding: 12px 16px;
+    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.14);
+    padding: 12px 16px calc(20px + env(safe-area-inset-bottom));
     flex-direction: column;
     align-items: stretch;
+    gap: 12px;
   }
-  .nav-menu.open { top: 64px; }
-  .nav-resident.open { top: 260px; }
-  .nav-link { padding: 12px; }
+  .mobile-nav-links { display: grid; gap: 4px; }
+  .mobile-nav-links .nav-link { padding: 12px; }
+  .mobile-nav-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 8px; border-top: 1px solid #e2e8f0; }
+  .mobile-nav-actions .btn { width: 100%; min-height: 44px; }
   .hamburger { display: flex; }
   .footer-grid { grid-template-columns: 1fr; }
 }