fix: simplify navigation and mobile menu

This commit is contained in:
Codex User
2026-09-09 11:55:16 +08:00
parent 2ed5d1d301
commit 16313c5add
2 changed files with 44 additions and 22 deletions
+30 -9
View File
@@ -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>
)
}
+14 -13
View File
@@ -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; }
}