Update package-lock.json after npm install

app/components/Sidebar.module.css

@@ -0,0 +1,142 @@
+/* Hamburger button */
+.hamburger {
+  position: fixed;
+  top: 24px;
+  right: 24px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 5px;
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  background: rgba(0, 0, 0, 0.9);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 50%;
+  cursor: pointer;
+  z-index: 1100;
+  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+}
+
+.hamburger:hover {
+  background: rgba(0, 0, 0, 1);
+  border-color: rgba(255, 255, 255, 0.4);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+}
+
+.hamburgerLine {
+  width: 16px;
+  height: 1.5px;
+  background: #ffffff;
+  border-radius: 1px;
+  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+  transform-origin: center;
+}
+
+.hamburgerLineTop {
+  transform: translateY(6.5px) rotate(45deg);
+}
+
+.hamburgerLineMid {
+  opacity: 0;
+}
+
+.hamburgerLineBot {
+  transform: translateY(-6.5px) rotate(-45deg);
+}
+
+/* Overlay backdrop */
+.overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(4px);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+  z-index: 1050;
+}
+
+.overlayVisible {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+/* Sidebar panel */
+.sidebar {
+  position: fixed;
+  top: 0;
+  right: 0;
+  width: 320px;
+  max-width: 85vw;
+  height: 100dvh;
+  background: rgba(10, 10, 10, 0.95);
+  backdrop-filter: blur(20px);
+  border-left: 1px solid rgba(255, 255, 255, 0.1);
+  transform: translateX(100%);
+  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
+  z-index: 1075;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 80px 40px;
+}
+
+.sidebarOpen {
+  transform: translateX(0);
+}
+
+/* Nav list */
+.navList {
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.navLink {
+  display: block;
+  padding: 14px 20px;
+  color: rgba(255, 255, 255, 0.6);
+  text-decoration: none;
+  font-size: 18px;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  border-radius: 12px;
+  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.navLink:hover {
+  color: #ffffff;
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.navLinkActive {
+  color: #ffffff;
+  background: rgba(255, 255, 255, 0.1);
+}
+
+@media (max-width: 768px) {
+  .hamburger {
+    top: 16px;
+    right: 16px;
+    width: 36px;
+    height: 36px;
+  }
+
+  .hamburgerLine {
+    width: 14px;
+  }
+
+  .sidebar {
+    padding: 60px 24px;
+  }
+
+  .navLink {
+    font-size: 16px;
+    padding: 12px 16px;
+  }
+}

app/components/Sidebar.tsx

@@ -0,0 +1,68 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import { usePathname } from 'next/navigation'
+import Link from 'next/link'
+import styles from './Sidebar.module.css'
+
+const navLinks = [
+  { href: '/', label: 'Home' },
+  { href: '/design-experiments', label: 'Design Experiments' },
+  { href: '/docs', label: 'Docs' },
+  { href: '/blog', label: 'Blog' },
+]
+
+export default function Sidebar() {
+  const [open, setOpen] = useState(false)
+  const pathname = usePathname()
+
+  useEffect(() => {
+    setOpen(false)
+  }, [pathname])
+
+  useEffect(() => {
+    if (open) {
+      document.body.style.overflow = 'hidden'
+    } else {
+      document.body.style.overflow = ''
+    }
+    return () => {
+      document.body.style.overflow = ''
+    }
+  }, [open])
+
+  return (
+    <>
+      <button
+        className={styles.hamburger}
+        onClick={() => setOpen(!open)}
+        aria-label={open ? 'Close menu' : 'Open menu'}
+        aria-expanded={open}
+      >
+        <div className={`${styles.hamburgerLine} ${open ? styles.hamburgerLineTop : ''}`} />
+        <div className={`${styles.hamburgerLine} ${open ? styles.hamburgerLineMid : ''}`} />
+        <div className={`${styles.hamburgerLine} ${open ? styles.hamburgerLineBot : ''}`} />
+      </button>
+
+      <div
+        className={`${styles.overlay} ${open ? styles.overlayVisible : ''}`}
+        onClick={() => setOpen(false)}
+      />
+
+      <nav className={`${styles.sidebar} ${open ? styles.sidebarOpen : ''}`}>
+        <ul className={styles.navList}>
+          {navLinks.map(({ href, label }) => (
+            <li key={href}>
+              <Link
+                href={href}
+                className={`${styles.navLink} ${pathname === href ? styles.navLinkActive : ''}`}
+              >
+                {label}
+              </Link>
+            </li>
+          ))}
+        </ul>
+      </nav>
+    </>
+  )
+}

app/layout.tsx

@@ -1,6 +1,7 @@
 import { Inter } from 'next/font/google'
 import './globals.css'
 import BackButton from './components/BackButton'
+import Sidebar from './components/Sidebar'
 
 const inter = Inter({
   subsets: ['latin'],
@@ -22,6 +23,7 @@ export default function RootLayout({
     <html lang="en">
       <body className={inter.className}>
         <BackButton />
+        <Sidebar />
         {children}
       </body>
     </html>