client/src/components/SiteHeader.jsx

@@ -1,27 +1,37 @@
-import { Link } from 'react-router-dom'
+import { Link, NavLink } from 'react-router-dom'
 import MoonDot from './MoonDot.jsx'
+import { useAuth } from '../contexts/AuthContext.jsx'
 
-const NAV = {
-  website: [
-    { label: 'Shard', to: '/site/shard' },
-    { label: 'News', to: '/site/news' },
-    { label: 'Screenshots', to: '/site/screenshots' },
-    { label: 'Five on Friday', to: '/site/five-on-friday' },
-    { label: 'Newsletter', to: '/site/newsletter' },
-    { label: 'About', to: '/site/about' },
-    { label: 'Wiki', to: '/wiki' },
-  ],
-  wiki: [
-    { label: 'Website', to: '/site' },
-    { label: 'New Player Guide', to: '/wiki/new-player-guide' },
-    { label: 'Maps & Atlas', to: '/wiki/maps-atlas' },
-    { label: 'Systems', to: '/wiki/systems' },
-    { label: 'Rules', to: '/wiki/rules' },
-  ],
-}
+// One consistent top nav for the whole public site. Every page gets the same
+// main links plus an auth-aware entry on the right (Sign in / My Account / Admin).
+const NAV = [
+  { label: 'Home', to: '/', end: true },
+  { label: 'News', to: '/site/news' },
+  { label: 'Screenshots', to: '/site/screenshots' },
+  { label: 'Five on Friday', to: '/site/five-on-friday' },
+  { label: 'Newsletter', to: '/site/newsletter' },
+  { label: 'Wiki', to: '/wiki' },
+  { label: 'Shard', to: '/site/shard' },
+  { label: 'About', to: '/site/about' },
+]
+
+const linkStyle = ({ isActive }) => ({
+  background: isActive ? 'var(--accent)' : undefined,
+  color: isActive ? 'var(--bg-deep)' : undefined,
+  borderColor: isActive ? 'var(--accent)' : undefined,
+})
+
+export default function SiteHeader() {
+  const { user, loading } = useAuth()
+
+  // Where the auth entry points: staff → admin, player → portal, else sign in.
+  const account =
+    user && user.role && user.role !== 'player'
+      ? { label: 'Admin', to: '/admin' }
+      : user
+        ? { label: 'My Account', to: '/player' }
+        : { label: 'Sign in', to: '/account/login' }
 
-export default function SiteHeader({ section = 'website' }) {
-  const links = NAV[section] || NAV.website
   return (
     <header
       style={{
@@ -35,38 +45,31 @@ export default function SiteHeader({ section = 'website' }) {
     >
       <div
         className="shell"
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-          gap: 20,
-          padding: '14px 0',
-          flexWrap: 'wrap',
-        }}
+        style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 20, padding: '14px 0', flexWrap: 'wrap' }}
       >
         <Link
           to="/"
           className="display"
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            gap: 10,
-            fontSize: '1.2rem',
-            letterSpacing: '0.05em',
-            color: 'var(--accent-bright)',
-            textDecoration: 'none',
-            fontWeight: 600,
-          }}
+          style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: '1.2rem', letterSpacing: '0.05em', color: 'var(--accent-bright)', textDecoration: 'none', fontWeight: 600 }}
         >
           <MoonDot />
           UOMysticmoon
         </Link>
         <nav style={{ display: 'flex', flexWrap: 'wrap', gap: 8, alignItems: 'center' }}>
-          {links.map((l) => (
-            <Link key={l.to + l.label} to={l.to} className="pill">
+          {NAV.map((l) => (
+            <NavLink key={l.to} to={l.to} end={l.end} className="pill" style={linkStyle}>
               {l.label}
-            </Link>
+            </NavLink>
           ))}
+          {!loading && (
+            <NavLink
+              to={account.to}
+              className="pill"
+              style={{ marginLeft: 6, borderColor: 'var(--accent)', color: 'var(--accent-bright)' }}
+            >
+              {account.label}
+            </NavLink>
+          )}
         </nav>
       </div>
     </header>

client/src/routes/public/Portal.jsx

@@ -40,7 +40,7 @@ export default function Portal() {
   const elements = [...layout.elements].sort((a, b) => (a.z || 0) - (b.z || 0))
 
   return (
-    <PublicLayout header={false}>
+    <PublicLayout>
       <main style={{ minHeight: '100vh', display: 'flex', flexDirection: 'column' }}>
         {PREVIEW && draft && (
           <div