Expose Exhibition under /exhibition + mobile navigation

package.json

@@ -17,7 +17,7 @@
     "dev": "next dev --turbopack",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint",
+    "lint": "eslint src",
     "lint:fix": "eslint src --fix && pnpm format",
     "lint:strict": "eslint --max-warnings=0 src",
     "typecheck": "tsc --noEmit",

src/__tests__/components/layout/Header.test.tsx

@@ -59,11 +59,18 @@ describe('Header Component', () => {
       expect(articlesLink).toHaveAttribute('href', '/articles');
     });
 
+    it('should render Exhibition link', () => {
+      render(<Header />);
+      const exhibitionLink = screen.getByRole('link', { name: /exhibition/i });
+      expect(exhibitionLink).toBeInTheDocument();
+      expect(exhibitionLink).toHaveAttribute('href', '/exhibition');
+    });
+
     it('should have all navigation links', () => {
       render(<Header />);
       const navLinks = screen.getAllByRole('link');
-      // Should have at least 4 links (logo + 3 nav items)
-      expect(navLinks.length).toBeGreaterThanOrEqual(4);
+      // Should have at least 5 links (logo + 4 nav items)
+      expect(navLinks.length).toBeGreaterThanOrEqual(5);
     });
   });
 
@@ -111,9 +118,11 @@ describe('Header Component', () => {
       const aboutLink = screen.getByRole('link', { name: /about/i });
       const teamLink = screen.getByRole('link', { name: /team/i });
       const articlesLink = screen.getByRole('link', { name: /articles/i });
+      const exhibitionLink = screen.getByRole('link', { name: /exhibition/i });
       expect(aboutLink).toBeInTheDocument();
       expect(teamLink).toBeInTheDocument();
       expect(articlesLink).toBeInTheDocument();
+      expect(exhibitionLink).toBeInTheDocument();
     });
   });
 
@@ -127,7 +136,7 @@ describe('Header Component', () => {
     it('should render list items for each nav link', () => {
       render(<Header />);
       const listItems = screen.getAllByRole('listitem');
-      expect(listItems.length).toBe(3); // About, Team, Articles
+      expect(listItems.length).toBe(4); // About, Team, Articles, Exhibition
     });
 
     it('should use NavLink components', () => {

src/components/layout/Header.tsx

@@ -1,4 +1,8 @@
+'use client';
+
+import { Menu, X } from 'lucide-react';
 import Link from 'next/link';
+import * as React from 'react';
 
 import { Logo } from '@/components/ui/icons/Logo';
 import NavLink from '@/components/ui/NavLink';
@@ -8,6 +12,7 @@ const navLinks = [
   { href: '/about', text: 'About' },
   { href: '/team', text: 'Team' },
   { href: '/articles', text: 'Articles' },
+  { href: '/exhibition', text: 'Exhibition' },
 ];
 
 function Navigation() {
@@ -25,20 +30,93 @@ function Navigation() {
 }
 
 export default function Header() {
+  const [mobileNavOpen, setMobileNavOpen] = React.useState(false);
+  const mobileNavId = React.useId();
+  const mobileNavRef = React.useRef<HTMLDivElement | null>(null);
+
+  React.useEffect(() => {
+    if (!mobileNavOpen) return;
+
+    function onKeyDown(e: KeyboardEvent) {
+      if (e.key === 'Escape') setMobileNavOpen(false);
+    }
+
+    function onPointerDown(e: MouseEvent | TouchEvent) {
+      const target = e.target;
+      if (!(target instanceof Node)) return;
+      if (mobileNavRef.current?.contains(target)) return;
+      setMobileNavOpen(false);
+    }
+
+    document.addEventListener('keydown', onKeyDown);
+    document.addEventListener('mousedown', onPointerDown);
+    document.addEventListener('touchstart', onPointerDown, { passive: true });
+
+    return () => {
+      document.removeEventListener('keydown', onKeyDown);
+      document.removeEventListener('mousedown', onPointerDown);
+      document.removeEventListener('touchstart', onPointerDown);
+    };
+  }, [mobileNavOpen]);
+
   return (
     <header className='pointer-events-none fixed z-30 flex w-full justify-center'>
-      <div className='pointer-events-auto relative mt-8 flex items-center justify-between gap-3 overflow-hidden rounded-full border-[1px] border-solid border-black bg-white/85 px-2 py-2 pl-4 shadow-sm backdrop-blur-md dark:border-white/20 dark:bg-neutral-950/85 sm:gap-32'>
+      <div className='pointer-events-auto relative mt-8 flex items-center justify-between gap-3 rounded-full border-[1px] border-solid border-black bg-white/85 px-2 py-2 pl-4 shadow-sm backdrop-blur-md dark:border-white/20 dark:bg-neutral-950/85 sm:gap-32'>
         <Link
           href='/'
           aria-label='Go to homepage'
           className='text-black ease-in-out hover:text-primary dark:text-white dark:hover:text-primary'
         >
           <Logo className='w-24 sm:w-48' variant='textOnly' />
         </Link>
+
         <div className='flex items-center gap-1'>
-          <Navigation />
+          <div className='hidden sm:block'>
+            <Navigation />
+          </div>
+
+          <button
+            type='button'
+            className='inline-flex h-8 w-8 items-center justify-center rounded-2xl px-2 py-1 text-sm transition-colors hover:bg-neutral-200/75 hover:text-black focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-bg dark:hover:bg-neutral-700/75 dark:hover:text-white sm:hidden'
+            aria-label={mobileNavOpen ? 'Close menu' : 'Open menu'}
+            aria-expanded={mobileNavOpen}
+            aria-controls={mobileNavId}
+            onClick={() => setMobileNavOpen((v) => !v)}
+          >
+            {mobileNavOpen ? (
+              <X className='h-4 w-4' aria-hidden='true' />
+            ) : (
+              <Menu className='h-4 w-4' aria-hidden='true' />
+            )}
+          </button>
+
           <ThemeToggle />
         </div>
+
+        <div
+          id={mobileNavId}
+          ref={mobileNavRef}
+          className='absolute left-0 top-full mt-2 w-full px-2 sm:hidden'
+          hidden={!mobileNavOpen}
+        >
+          <nav
+            aria-label='Mobile navigation'
+            className='rounded-3xl border border-black bg-white/95 p-2 shadow-sm backdrop-blur-md dark:border-white/20 dark:bg-neutral-950/95'
+          >
+            <ul className='flex flex-col gap-1'>
+              {navLinks.map((link) => (
+                <li key={link.href}>
+                  <NavLink
+                    href={link.href}
+                    onClick={() => setMobileNavOpen(false)}
+                  >
+                    {link.text}
+                  </NavLink>
+                </li>
+              ))}
+            </ul>
+          </nav>
+        </div>
       </div>
     </header>
   );

src/components/ui/NavLink.tsx

@@ -9,16 +9,19 @@ import clsxm from '@/lib/clsxm';
 const NavLink = ({
   href,
   children,
+  onClick,
 }: {
   href: string;
   children: React.ReactNode;
+  onClick?: React.MouseEventHandler<HTMLAnchorElement>;
 }) => {
   const pathname = usePathname();
   const isActive = href === '/' ? pathname === '/' : pathname.startsWith(href);
 
   return (
     <Link
       href={href}
+      onClick={onClick}
       className={clsxm(
         'rounded-2xl px-2 py-1 text-sm hover:bg-neutral-200/75 hover:text-black focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-bg dark:hover:bg-neutral-700/75 dark:hover:text-white sm:text-lg',
         isActive && 'bg-black text-white dark:bg-white dark:text-black',

vercel.json

@@ -0,0 +1,32 @@
+{
+  "rewrites": [
+    {
+      "source": "/api/events",
+      "destination": "https://sentiment-exhibition.vercel.app/api/events/"
+    },
+    {
+      "source": "/api/events/",
+      "destination": "https://sentiment-exhibition.vercel.app/api/events/"
+    },
+    {
+      "source": "/api/events/:path*",
+      "destination": "https://sentiment-exhibition.vercel.app/api/events/:path*"
+    },
+    {
+      "source": "/public/:path*",
+      "destination": "https://sentiment-exhibition.vercel.app/public/:path*"
+    },
+    {
+      "source": "/exhibition",
+      "destination": "https://sentiment-exhibition.vercel.app/"
+    },
+    {
+      "source": "/exhibition/",
+      "destination": "https://sentiment-exhibition.vercel.app/"
+    },
+    {
+      "source": "/exhibition/:path*",
+      "destination": "https://sentiment-exhibition.vercel.app/:path*"
+    }
+  ]
+}