Bladeren bron

feat: show user name + Dashboard button in nav when logged in

Replace Sign In button with username + Dashboard link for authenticated users.
Uses useAuth hook to check session state client-side.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Tony T 5 dagen geleden
bovenliggende
commit
3b8165fe8c
1 gewijzigde bestanden met toevoegingen van 40 en 14 verwijderingen
  1. 40 14
      client/src/pages/Home.tsx

+ 40 - 14
client/src/pages/Home.tsx

@@ -4,6 +4,7 @@
  * Playfair Display headings, Source Sans 3 body, forest green + terracotta + cream palette
  */
 import { useRef } from "react";
+import { useAuth } from "@/_core/hooks/useAuth";
 import { motion, useInView } from "framer-motion";
 import {
   MessageCircle,
@@ -178,9 +179,10 @@ function Nav() {
     { label: "Architecture", href: "#architecture" },
     { label: "Integration", href: "#integration" },
     { label: "Benefits", href: "#benefits" },
-
   ];
 
+  const { user, isAuthenticated, loading } = useAuth();
+
   return (
     <nav
       className="fixed top-0 left-0 right-0 z-40 backdrop-blur-md border-b"
@@ -221,19 +223,43 @@ function Nav() {
             </a>
           ))}
           <div className="w-px h-5 mx-1" style={{ background: "#e7e0d5" }} />
-          <a
-            href={`${import.meta.env.BASE_URL}login`}
-            className="px-3 py-2 rounded-lg text-sm font-semibold transition-colors"
-            style={{
-              background: "#14532D",
-              color: "#fff",
-              fontFamily: "'Source Sans 3', sans-serif",
-              borderRadius: "8px",
-              padding: "6px 16px",
-            }}
-          >
-            Sign In
-          </a>
+          {!loading && isAuthenticated ? (
+            <div className="flex items-center gap-2">
+              <span
+                className="text-sm"
+                style={{ color: "#57534e", fontFamily: "'Source Sans 3', sans-serif" }}
+              >
+                {user?.name || user?.email}
+              </span>
+              <a
+                href={`${import.meta.env.BASE_URL}dashboard`}
+                className="px-3 py-2 rounded-lg text-sm font-semibold transition-colors"
+                style={{
+                  background: "#14532D",
+                  color: "#fff",
+                  fontFamily: "'Source Sans 3', sans-serif",
+                  borderRadius: "8px",
+                  padding: "6px 16px",
+                }}
+              >
+                Dashboard
+              </a>
+            </div>
+          ) : (
+            <a
+              href={`${import.meta.env.BASE_URL}login`}
+              className="px-3 py-2 rounded-lg text-sm font-semibold transition-colors"
+              style={{
+                background: "#14532D",
+                color: "#fff",
+                fontFamily: "'Source Sans 3', sans-serif",
+                borderRadius: "8px",
+                padding: "6px 16px",
+              }}
+            >
+              Sign In
+            </a>
+          )}
         </div>
       </div>
     </nav>