Shift content for pinned navigation

Author: tandede

app/globals.css

@@ -32,6 +32,8 @@ img { display: block; max-width: 100%; }
 button, a, summary { -webkit-tap-highlight-color: transparent; }
 ::selection { color: var(--white); background: var(--blue); }
 
+main > section { transition: margin-left 360ms cubic-bezier(0.22, 1, 0.36, 1); }
+
 .section-shell { width: min(var(--shell), calc(100% - 56px)); margin-inline: auto; }
 #focus, #research, #experience, #projects, #opensource, #contact { scroll-margin-top: 84px; }
 
@@ -319,6 +321,10 @@ button, a, summary { -webkit-tap-highlight-color: transparent; }
   .opensource-row > p:first-of-type { display: none; }
 }
 
+@media (min-width: 1161px) {
+  html.nav-layout-pinned main > section { margin-left: 300px; }
+}
+
 @media (max-width: 820px) {
   .section-shell { width: min(100% - 32px, var(--shell)); }
   .site-nav { min-height: 68px; padding-inline: 16px; }

app/navigation-shell.tsx

@@ -49,6 +49,11 @@ export default function NavigationShell() {
     }
   }, [pinned]);
 
+  useEffect(() => {
+    document.documentElement.classList.toggle('nav-layout-pinned', pinned);
+    return () => document.documentElement.classList.remove('nav-layout-pinned');
+  }, [pinned]);
+
   useEffect(() => {
     const handleEscape = (event: KeyboardEvent) => {
       if (event.key === 'Escape') {
@@ -83,7 +88,7 @@ export default function NavigationShell() {
         <aside id="side-navigation" className="side-nav-panel" aria-label="页面导航" aria-hidden={!visible} onMouseEnter={() => setHovering(true)} onMouseLeave={closeIfFloating}>
           <div className="side-nav-head"><div><span>NAVIGATION</span><strong>页面导航</strong></div><div><button type="button" aria-label={pinned ? '取消固定导航' : '固定导航'} aria-pressed={pinned} onClick={() => { setPinned((value) => !value); setOpen(true); }}>{pinned ? <PiPushPinSlashBold aria-hidden="true" /> : <PiPushPinBold aria-hidden="true" />}</button><button type="button" aria-label="收起导航" onClick={() => { setPinned(false); setOpen(false); setHovering(false); }}><PiXBold aria-hidden="true" /></button></div></div>
           <nav>{navigationItems.map((item, index) => { const Icon = item.icon; return <a href={item.href} key={item.href} tabIndex={visible ? 0 : -1} onClick={closeIfFloating}><span>{String(index + 1).padStart(2, '0')}</span><Icon aria-hidden="true" /><span><strong>{item.label}</strong><small>{item.english}</small></span></a>; })}</nav>
-          <p><span />移到左侧边缘可临时展开；固定后导航会保持打开。</p>
+          <p><span />移到左侧边缘可临时展开；固定后页面会自动为导航让位。</p>
         </aside>
       </div>
       <button className={`side-nav-backdrop${visible ? ' is-visible' : ''}`} type="button" aria-label="关闭导航" tabIndex={visible ? 0 : -1} onClick={() => { setPinned(false); setOpen(false); setHovering(false); }} />