diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro index 8b48452..55bad77 100644 --- a/src/layouts/BaseLayout.astro +++ b/src/layouts/BaseLayout.astro @@ -81,6 +81,7 @@ const consoleSites = [ +
{siteConfig.nav.map((item) => ( @@ -212,25 +213,43 @@ const consoleSites = [ const nav = document.querySelector('.nav'); const toggle = document.querySelector('[data-nav-toggle]'); const menu = document.querySelector('[data-nav-menu]'); + const backdrop = document.querySelector('[data-nav-backdrop]'); if (!nav || !toggle || !menu) return; function setMenu(open) { nav.classList.toggle('is-open', open); toggle.setAttribute('aria-expanded', String(open)); toggle.setAttribute('aria-label', open ? '关闭菜单' : '打开菜单'); + menu.setAttribute('aria-hidden', String(!open && window.innerWidth <= 720)); + document.body.classList.toggle('has-nav-drawer', open); } toggle.addEventListener('click', () => { setMenu(!nav.classList.contains('is-open')); }); + backdrop?.addEventListener('click', () => setMenu(false)); + menu.addEventListener('click', (event) => { if (event.target instanceof Element && event.target.closest('a')) setMenu(false); }); + document.addEventListener('click', (event) => { + if (!nav.classList.contains('is-open')) return; + if (event.target instanceof Node && nav.contains(event.target)) return; + setMenu(false); + }); + + document.addEventListener('keydown', (event) => { + if (event.key === 'Escape' && nav.classList.contains('is-open')) setMenu(false); + }); + window.addEventListener('resize', () => { if (window.innerWidth > 720) setMenu(false); + else menu.setAttribute('aria-hidden', String(!nav.classList.contains('is-open'))); }); + + menu.setAttribute('aria-hidden', String(window.innerWidth <= 720)); })(); (() => { diff --git a/src/styles/site/02-navigation.css b/src/styles/site/02-navigation.css index 9777286..ede6552 100644 --- a/src/styles/site/02-navigation.css +++ b/src/styles/site/02-navigation.css @@ -56,6 +56,10 @@ display: contents; } +.nav-drawer-backdrop { + display: none; +} + .nav-menu-toggle { position: relative; z-index: 1; diff --git a/src/styles/site/13-responsive.css b/src/styles/site/13-responsive.css index 7cf218d..b3d97da 100644 --- a/src/styles/site/13-responsive.css +++ b/src/styles/site/13-responsive.css @@ -87,11 +87,13 @@ align-items: center; gap: 0 10px; border-radius: 24px; + overflow: visible; } .nav-menu-toggle { display: grid; justify-self: end; + z-index: 3; } .nav.is-open .nav-menu-open, @@ -103,17 +105,65 @@ display: inline-block; } + .has-nav-drawer { + overflow: hidden; + } + + .nav-drawer-backdrop { + position: fixed; + inset: 0; + z-index: 1; + display: block; + opacity: 0; + pointer-events: none; + background: rgba(28, 37, 42, 0.22); + backdrop-filter: blur(5px); + -webkit-backdrop-filter: blur(5px); + transition: opacity 0.2s ease; + } + + .nav.is-open .nav-drawer-backdrop { + opacity: 1; + pointer-events: auto; + } + .nav-menu { - display: none; - grid-column: 1 / -1; - gap: 8px; - margin-top: 10px; - border-top: 1px solid rgba(255, 255, 255, 0.46); - padding-top: 10px; + position: fixed; + top: calc(env(safe-area-inset-top, 0px) + 72px); + right: max(12px, var(--page-gutter)); + z-index: 2; + display: grid; + width: min(312px, calc(100vw - 32px)); + max-height: calc(100dvh - 92px); + align-content: start; + gap: 10px; + overflow-y: auto; + overscroll-behavior: contain; + border: 1px solid rgba(255, 255, 255, 0.62); + border-radius: 22px; + padding: 14px; + background: + radial-gradient(circle at 82% 0%, rgba(255, 255, 255, 0.78), transparent 34%), + linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(226, 248, 241, 0.7)), + rgba(255, 253, 248, 0.92); + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.82), + 0 22px 64px rgba(44, 55, 63, 0.24); + backdrop-filter: blur(22px) saturate(170%); + -webkit-backdrop-filter: blur(22px) saturate(170%); + opacity: 0; + pointer-events: none; + transform: translateX(calc(100% + 24px)) scale(0.98); + transform-origin: top right; + transition: + opacity 0.18s ease, + transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1); } .nav.is-open .nav-menu { - display: grid; + opacity: 1; + pointer-events: auto; + transform: translateX(0) scale(1); } .nav-links { @@ -128,11 +178,11 @@ } .nav-center { - grid-template-columns: repeat(2, minmax(0, 1fr)); + grid-template-columns: 1fr; } .nav-actions { - grid-template-columns: repeat(4, minmax(0, 1fr)); + grid-template-columns: repeat(2, minmax(0, 1fr)); } .nav-links a, @@ -142,6 +192,33 @@ .theme-toggle { width: 100%; justify-content: center; + min-height: 42px; + border-color: rgba(15, 118, 110, 0.1); + background: rgba(255, 255, 255, 0.42); + } + + :root[data-theme='dark'] .nav-drawer-backdrop { + background: rgba(3, 10, 12, 0.36); + } + + :root[data-theme='dark'] .nav-menu { + border-color: rgba(166, 184, 194, 0.2); + background: + radial-gradient(circle at 82% 0%, rgba(125, 211, 199, 0.16), transparent 36%), + linear-gradient(145deg, rgba(25, 35, 42, 0.94), rgba(10, 15, 20, 0.82)), + rgba(10, 15, 20, 0.88); + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.1), + 0 22px 64px rgba(0, 0, 0, 0.46); + } + + :root[data-theme='dark'] .nav-links a, + :root[data-theme='dark'] .nav-random, + :root[data-theme='dark'] .nav-search, + :root[data-theme='dark'] .nav-console, + :root[data-theme='dark'] .theme-toggle { + border-color: rgba(125, 211, 199, 0.16); + background: rgba(125, 211, 199, 0.08); } .control-console { diff --git a/src/styles/site/14-animations.css b/src/styles/site/14-animations.css index 4376467..f1ef974 100644 --- a/src/styles/site/14-animations.css +++ b/src/styles/site/14-animations.css @@ -89,7 +89,9 @@ } .random-post-transition, - .random-post-transition-card { + .random-post-transition-card, + .nav-drawer-backdrop, + .nav-menu { transition: none; } }