Users name now shows on navbar instead of email

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()