v4.1: Nav — add Dashboard link, admin always visible, improved mobile menu

web/components/nav.tsx

@@ -2,23 +2,20 @@
 
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { ShieldCheck, Menu, X, Crown, GitCompare, MessageSquare } from "lucide-react";
+import {
+  ShieldCheck, Menu, X, Crown, GitCompare, LayoutDashboard,
+  ScanText, Settings, LogIn, Zap
+} from "lucide-react";
 import { useState, useEffect } from "react";
 import { createClient } from "@/lib/supabase/client";
 
-const links = [
-  { href: "/#features", label: "Features" },
-  { href: "/#pricing", label: "Pricing" },
-  { href: "/dashboard-pages/analyze", label: "Scanner" },
-  { href: "/dashboard-pages/compare", label: "Compare", icon: GitCompare },
-];
-
 export function Nav() {
   const [open, setOpen] = useState(false);
   const [userEmail, setUserEmail] = useState<string | null>(null);
   const [userRole, setUserRole] = useState<string | null>(null);
+  const [loaded, setLoaded] = useState(false);
   const pathname = usePathname();
-  const isDashboard = pathname?.startsWith("/dashboard");
+  const isLoggedIn = !!userEmail;
   const isAdmin = userRole === "admin";
 
   useEffect(() => {
@@ -34,69 +31,128 @@ export function Nav() {
           .single();
         setUserRole(profile?.role || "user");
       }
+      setLoaded(true);
     });
   }, []);
 
+  // Build links dynamically based on auth state
+  const publicLinks = [
+    { href: "/#features", label: "Features" },
+    { href: "/#pricing", label: "Pricing" },
+  ];
+
+  const appLinks = [
+    { href: "/dashboard-pages/dashboard", label: "Dashboard", icon: LayoutDashboard },
+    { href: "/dashboard-pages/analyze", label: "Scanner", icon: ScanText },
+    { href: "/dashboard-pages/compare", label: "Compare", icon: GitCompare },
+  ];
+
+  const links = isLoggedIn ? appLinks : publicLinks;
+
   return (
     <nav className="sticky top-0 z-50 bg-white/80 backdrop-blur-md border-b border-zinc-100">
       <div className="max-w-6xl mx-auto px-4 sm:px-5 h-14 flex items-center justify-between">
+        {/* Logo */}
         <Link href="/" className="flex items-center gap-2">
           <ShieldCheck className="w-5 h-5 text-zinc-900" strokeWidth={2.2} />
           <span className="font-semibold text-[15px] tracking-tight text-zinc-900">ClauseGuard</span>
           <span className="hidden sm:inline text-[10px] font-medium text-zinc-400 ml-1 border border-zinc-200 px-1.5 py-0.5 rounded">v4.0</span>
         </Link>
 
+        {/* Desktop Nav */}
         <div className="hidden md:flex items-center gap-1">
-          {links.map((l) => (
-            <a key={l.href} href={l.href}
-              className="px-3 py-1.5 text-[13px] text-zinc-500 hover:text-zinc-900 rounded-md hover:bg-zinc-50 transition-colors">
-              {l.label}
-            </a>
-          ))}
+          {links.map((l) => {
+            const Icon = "icon" in l ? l.icon : null;
+            const isActive = pathname === l.href;
+            return (
+              <Link key={l.href} href={l.href}
+                className={`flex items-center gap-1.5 px-3 py-1.5 text-[13px] rounded-md transition-colors ${
+                  isActive ? "text-zinc-900 bg-zinc-100 font-medium" : "text-zinc-500 hover:text-zinc-900 hover:bg-zinc-50"
+                }`}>
+                {Icon && <Icon className="w-3.5 h-3.5" />}
+                {l.label}
+              </Link>
+            );
+          })}
 
+          {/* Admin link — always visible for admins */}
           {isAdmin && (
             <Link href="/admin"
-              className="px-3 py-1.5 text-[13px] text-amber-600 hover:text-amber-700 rounded-md hover:bg-amber-50 transition-colors flex items-center gap-1">
+              className={`flex items-center gap-1.5 px-3 py-1.5 text-[13px] rounded-md transition-colors ${
+                pathname === "/admin"
+                  ? "text-amber-700 bg-amber-50 font-medium"
+                  : "text-amber-600 hover:text-amber-700 hover:bg-amber-50"
+              }`}>
               <Crown className="w-3.5 h-3.5" /> Admin
             </Link>
           )}
 
           <div className="w-px h-4 bg-zinc-200 mx-2" />
 
-          {isDashboard || userEmail ? (
-            <Link href="/dashboard-pages/settings"
-              className="px-3 py-1.5 text-[13px] text-zinc-500 hover:text-zinc-900 rounded-md hover:bg-zinc-50">
-              Settings
-            </Link>
+          {isLoggedIn ? (
+            <>
+              <Link href="/dashboard-pages/settings"
+                className={`flex items-center gap-1.5 px-3 py-1.5 text-[13px] rounded-md transition-colors ${
+                  pathname?.includes("settings") ? "text-zinc-900 bg-zinc-100" : "text-zinc-500 hover:text-zinc-900 hover:bg-zinc-50"
+                }`}>
+                <Settings className="w-3.5 h-3.5" /> Settings
+              </Link>
+              <Link href="/dashboard-pages/analyze"
+                className="ml-1 px-3.5 py-1.5 text-[13px] font-medium text-white bg-zinc-900 rounded-md hover:bg-zinc-800 transition-colors flex items-center gap-1.5">
+                <Zap className="w-3.5 h-3.5" /> New scan
+              </Link>
+            </>
           ) : (
-            <Link href="/auth/login"
-              className="px-3 py-1.5 text-[13px] text-zinc-500 hover:text-zinc-900 rounded-md hover:bg-zinc-50">
-              Log in
-            </Link>
+            <>
+              {!isLoggedIn && loaded && (
+                <Link href="/auth/login"
+                  className="flex items-center gap-1.5 px-3 py-1.5 text-[13px] text-zinc-500 hover:text-zinc-900 rounded-md hover:bg-zinc-50 transition-colors">
+                  <LogIn className="w-3.5 h-3.5" /> Log in
+                </Link>
+              )}
+              <Link href="/auth/signup"
+                className="ml-1 px-3.5 py-1.5 text-[13px] font-medium text-white bg-zinc-900 rounded-md hover:bg-zinc-800 transition-colors">
+                Get started
+              </Link>
+            </>
           )}
-          <Link href={isDashboard || userEmail ? "/dashboard-pages/analyze" : "/auth/signup"}
-            className="ml-1 px-3.5 py-1.5 text-[13px] font-medium text-white bg-zinc-900 rounded-md hover:bg-zinc-800 transition-colors">
-            {isDashboard || userEmail ? "New scan" : "Get started"}
-          </Link>
         </div>
 
+        {/* Mobile hamburger */}
         <button className="md:hidden p-1.5 rounded-md hover:bg-zinc-100" onClick={() => setOpen(!open)}>
           {open ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
         </button>
       </div>
 
+      {/* Mobile Menu */}
       {open && (
         <div className="md:hidden border-t border-zinc-100 bg-white px-5 py-3 space-y-1">
           {links.map((l) => (
-            <a key={l.href} href={l.href} onClick={() => setOpen(false)}
-              className="block px-3 py-2 text-sm text-zinc-600 rounded-md hover:bg-zinc-50">{l.label}</a>
+            <Link key={l.href} href={l.href} onClick={() => setOpen(false)}
+              className="block px-3 py-2.5 text-sm text-zinc-600 rounded-md hover:bg-zinc-50">{l.label}</Link>
           ))}
           {isAdmin && (
             <Link href="/admin" onClick={() => setOpen(false)}
-              className="block px-3 py-2 text-sm text-amber-600 rounded-md hover:bg-amber-50">Admin</Link>
+              className="block px-3 py-2.5 text-sm text-amber-600 rounded-md hover:bg-amber-50 flex items-center gap-2">
+              <Crown className="w-4 h-4" /> Admin Panel
+            </Link>
+          )}
+          <div className="h-px bg-zinc-100 my-2" />
+          {isLoggedIn ? (
+            <>
+              <Link href="/dashboard-pages/settings" onClick={() => setOpen(false)}
+                className="block px-3 py-2.5 text-sm text-zinc-600 rounded-md hover:bg-zinc-50">Settings</Link>
+              <Link href="/dashboard-pages/analyze" onClick={() => setOpen(false)}
+                className="block px-3 py-2.5 text-sm font-medium text-white bg-zinc-900 rounded-lg text-center hover:bg-zinc-800">New Scan</Link>
+            </>
+          ) : (
+            <>
+              <Link href="/auth/login" onClick={() => setOpen(false)}
+                className="block px-3 py-2.5 text-sm text-zinc-600 rounded-md hover:bg-zinc-50">Log in</Link>
+              <Link href="/auth/signup" onClick={() => setOpen(false)}
+                className="block px-3 py-2.5 text-sm font-medium text-white bg-zinc-900 rounded-lg text-center hover:bg-zinc-800">Get started</Link>
+            </>
           )}
-          <Link href="/auth/login" onClick={() => setOpen(false)}
-            className="block px-3 py-2 text-sm text-zinc-600 rounded-md hover:bg-zinc-50">Log in</Link>
         </div>
       )}
     </nav>