All changes

frontend/src/components/ui/Header.tsx

@@ -14,7 +14,18 @@ import { SpinnerIcon } from './icons/SpinnerIcon';
 import UserMenu from './UserMenu';
 import MobileMenu from './MobileMenu';
 
-export type Page = 'home' | 'dashboard' | 'learn' | 'pricing' | 'account' | 'invite';
+export type Page = 'home' | 'dashboard' | 'learn' | 'pricing' | 'account' | 'saved' | 'invites' | 'invite';
+
+export const PAGE_PATHS: Record<Page, string> = {
+  home: '/',
+  dashboard: '/dashboard',
+  learn: '/learn',
+  pricing: '/pricing',
+  saved: '/saved',
+  invites: '/invites',
+  account: '/account',
+  invite: '/invite',
+};
 
 export default function Header({
   activePage,
@@ -88,6 +99,12 @@ export default function Header({
     }
   }, [doCopy]);
 
+  const navLink = (page: Page, e: React.MouseEvent) => {
+    if (e.metaKey || e.ctrlKey || e.shiftKey || e.button !== 0) return;
+    e.preventDefault();
+    onPageChange(page);
+  };
+
   const tabClass = (page: Page) =>
     `px-3 py-1.5 rounded text-sm font-medium transition-colors ${
       activePage === page
@@ -99,35 +116,41 @@ export default function Header({
     <header className="h-12 bg-navy-900 text-white flex items-center px-4 shrink-0">
       {/* Left: Logo + nav */}
       <div className="flex items-center gap-4">
-        <button
+        <a
+          href="/"
           className="flex items-center gap-2 hover:opacity-80 transition-opacity"
-          onClick={() => onPageChange('home')}
+          onClick={(e) => navLink('home', e)}
         >
           <LogoIcon className="w-5 h-5 text-teal-400" />
           <span className="font-semibold text-lg">Perfect Postcode</span>
-        </button>
+        </a>
 
         {/* Desktop nav */}
         {!isMobile && (
           <nav className="flex items-center gap-2">
-            <button className={tabClass('dashboard')} onClick={() => onPageChange('dashboard')}>
+            <a href={PAGE_PATHS.dashboard} className={tabClass('dashboard')} onClick={(e) => navLink('dashboard', e)}>
               Dashboard
-            </button>
+            </a>
             {user && (
-              <button
-                className={tabClass('account')}
-                onClick={() => onPageChange('account')}
-              >
-                Account
-              </button>
+              <>
+                <a href={PAGE_PATHS.saved} className={tabClass('saved')} onClick={(e) => navLink('saved', e)}>
+                  Saved
+                </a>
+                <a href={PAGE_PATHS.invites} className={tabClass('invites')} onClick={(e) => navLink('invites', e)}>
+                  Invite
+                </a>
+                <a href={PAGE_PATHS.account} className={tabClass('account')} onClick={(e) => navLink('account', e)}>
+                  Account
+                </a>
+              </>
             )}
-            <button className={tabClass('learn')} onClick={() => onPageChange('learn')}>
+            <a href={PAGE_PATHS.learn} className={tabClass('learn')} onClick={(e) => navLink('learn', e)}>
               Learn
-            </button>
+            </a>
             {user?.subscription !== 'licensed' && !user?.isAdmin && (
-              <button className={tabClass('pricing')} onClick={() => onPageChange('pricing')}>
+              <a href={PAGE_PATHS.pricing} className={tabClass('pricing')} onClick={(e) => navLink('pricing', e)}>
                 Pricing
-              </button>
+              </a>
             )}
           </nav>
         )}