From feb44060c487e54494c39e5e692092b50cfe9397 Mon Sep 17 00:00:00 2001
From: Luke Betteridge <luke.betteridge0129@gmail.com>
Date: Wed, 15 Apr 2026 14:24:12 +0100
Subject: [PATCH] Users name now shows on navbar instead of email

---
 src/components/Navbar/Navbar.jsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/components/Navbar/Navbar.jsx b/src/components/Navbar/Navbar.jsx
index a3664a4..1845033 100644
--- a/src/components/Navbar/Navbar.jsx
+++ b/src/components/Navbar/Navbar.jsx
@@ -5,6 +5,14 @@ import './Navbar.css'
 
 const MOBILE_NAV_BREAKPOINT = 760
 
+function formatUserDisplayName(user) {
+  const fullName = [user?.firstName, user?.lastName]
+    .filter(part => typeof part === 'string' && part.trim())
+    .join(' ')
+
+  return fullName || user?.email || 'Signed in'
+}
+
 function SunIcon() {
   return (
     <svg viewBox="0 0 24 24" aria-hidden="true">
@@ -27,6 +35,7 @@ function Navbar({ theme, onToggleTheme }) {
   const location = useLocation()
   const [isMenuOpen, setIsMenuOpen] = useState(false)
   const nextThemeLabel = theme === 'dark' ? 'Switch to light' : 'Switch to dark'
+  const userDisplayName = formatUserDisplayName(user)
 
   useEffect(() => {
     setIsMenuOpen(false)
@@ -99,7 +108,7 @@ function Navbar({ theme, onToggleTheme }) {
               <MoonIcon />
             </span>
           </button>
-          <span className="nav-status__text">{isAuthenticated ? user?.email ?? 'Signed in' : 'Signed out'}</span>
+          <span className="nav-status__text">{isAuthenticated ? userDisplayName : 'Signed out'}</span>
           {isAuthenticated && (
             <button type="button" className="nav-button" onClick={() => {
               closeMenu()