Redesign beta Magent UI

frontend/app/ui/HeaderActions.tsx

@@ -1,10 +1,13 @@
 'use client'
 
 import { useEffect, useState } from 'react'
+import { usePathname } from 'next/navigation'
 import { authFetch, clearToken, getApiBase, getToken } from '../lib/auth'
 
 export default function HeaderActions() {
   const [signedIn, setSignedIn] = useState(false)
+  const [role, setRole] = useState<string | null>(null)
+  const pathname = usePathname()
 
   useEffect(() => {
     const token = getToken()
@@ -19,9 +22,11 @@ export default function HeaderActions() {
         if (!response.ok) {
           clearToken()
           setSignedIn(false)
+          setRole(null)
           return
         }
-        await response.json()
+        const data = await response.json()
+        setRole(data?.role ?? null)
       } catch (err) {
         console.error(err)
       }
@@ -33,18 +38,45 @@ export default function HeaderActions() {
     return null
   }
 
+  const items = [
+    { href: '/', label: 'Health', icon: '01', match: (path: string) => path === '/' },
+    {
+      href: '/portal/requests',
+      label: 'Requests',
+      icon: '02',
+      match: (path: string) => path === '/portal/requests' || path.startsWith('/requests/'),
+    },
+    {
+      href: '/portal/issues',
+      label: 'Issues',
+      icon: '03',
+      match: (path: string) => path === '/portal/issues' || path === '/admin/issues',
+    },
+    {
+      href: role === 'admin' ? '/users' : '/profile',
+      label: role === 'admin' ? 'Users' : 'Profile',
+      icon: '04',
+      match: (path: string) => path.startsWith('/users') || path.startsWith('/profile'),
+    },
+    {
+      href: role === 'admin' ? '/admin' : '/profile/invites',
+      label: role === 'admin' ? 'Config' : 'Invites',
+      icon: '05',
+      match: (path: string) => path.startsWith('/admin') || path.startsWith('/profile/invites'),
+    },
+  ]
+
   return (
-    <div className="header-actions">
-      <a className="header-cta header-cta--left" href="/feedback">Send feedback</a>
-      <div className="header-actions-center">
-        <a href="/how-it-works">How it works</a>
-      </div>
-      <div className="header-actions-right">
-        <a href="/">Requests</a>
-        <a href="/profile/invites">Invites</a>
-        <a href="/portal/requests">Portal</a>
-        <a href="/portal/issues">Issues</a>
-      </div>
-    </div>
+    <nav className="header-actions" aria-label="Primary">
+      {items.map((item) => {
+        const active = item.match(pathname)
+        return (
+          <a key={item.href} href={item.href} className={active ? 'is-active' : undefined}>
+            <span aria-hidden="true">{item.icon}</span>
+            {item.label}
+          </a>
+        )
+      })}
+    </nav>
   )
 }