Merge branch 'main' of https://huggingface.co/spaces/gaurv007/ClauseGuard

web/components/nav.tsx

@@ -5,7 +5,7 @@ import { usePathname } from "next/navigation";
 import type { LucideIcon } from "lucide-react";
 import {
   ShieldCheck, Menu, X, Crown, GitCompare, LayoutDashboard,
-  ScanText, Settings, LogIn, Zap
+  ScanText, Settings, LogIn, Zap, Sparkles, CreditCard
 } from "lucide-react";
 import { useState, useEffect } from "react";
 import { createClient } from "@/lib/supabase/client";
@@ -42,18 +42,18 @@ export function Nav() {
     });
   }, []);
 
-  const publicLinks: NavLink[] = [
-    { href: "/#features", label: "Features" },
-    { href: "/#pricing", label: "Pricing" },
-  ];
-
-  const appLinks: NavLink[] = [
-    { href: "/dashboard-pages/dashboard", label: "Dashboard", icon: LayoutDashboard },
+  // All links — always visible
+  const mainLinks: NavLink[] = [
+    { href: "/#features", label: "Features", icon: Sparkles },
+    { href: "/#pricing", label: "Pricing", icon: CreditCard },
     { href: "/dashboard-pages/analyze", label: "Scanner", icon: ScanText },
     { href: "/dashboard-pages/compare", label: "Compare", icon: GitCompare },
   ];
 
-  const links: NavLink[] = isLoggedIn ? appLinks : publicLinks;
+  // Extra links only for logged-in users
+  const authLinks: NavLink[] = [
+    { href: "/dashboard-pages/dashboard", label: "Dashboard", icon: LayoutDashboard },
+  ];
 
   return (
     <nav className="sticky top-0 z-50 bg-white/80 backdrop-blur-md border-b border-zinc-100">
@@ -66,13 +66,28 @@ export function Nav() {
         </Link>
 
         {/* Desktop Nav */}
-        <div className="hidden md:flex items-center gap-1">
-          {links.map((l) => {
+        <div className="hidden md:flex items-center gap-0.5">
+          {/* Main links — always visible */}
+          {mainLinks.map((l) => {
+            const Icon = l.icon ?? null;
+            const isActive = pathname === l.href;
+            return (
+              <Link key={l.href} href={l.href}
+                className={`flex items-center gap-1.5 px-2.5 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"
+                }`}>
+                {l.label}
+              </Link>
+            );
+          })}
+
+          {/* Dashboard — only when logged in */}
+          {isLoggedIn && authLinks.map((l) => {
             const Icon = 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 ${
+                className={`flex items-center gap-1.5 px-2.5 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" />}
@@ -81,9 +96,10 @@ export function Nav() {
             );
           })}
 
+          {/* Admin — always visible for admins */}
           {isAdmin && (
             <Link href="/admin"
-              className={`flex items-center gap-1.5 px-3 py-1.5 text-[13px] rounded-md transition-colors ${
+              className={`flex items-center gap-1.5 px-2.5 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"
@@ -92,18 +108,19 @@ export function Nav() {
             </Link>
           )}
 
-          <div className="w-px h-4 bg-zinc-200 mx-2" />
+          <div className="w-px h-4 bg-zinc-200 mx-1.5" />
 
+          {/* Right side — auth actions */}
           {isLoggedIn ? (
             <>
               <Link href="/dashboard-pages/settings"
-                className={`flex items-center gap-1.5 px-3 py-1.5 text-[13px] rounded-md transition-colors ${
+                className={`flex items-center gap-1.5 px-2.5 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">
+                className="ml-1 px-3 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>
             </>
@@ -111,12 +128,12 @@ export function Nav() {
             <>
               {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">
+                  className="flex items-center gap-1.5 px-2.5 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">
+                className="ml-1 px-3 py-1.5 text-[13px] font-medium text-white bg-zinc-900 rounded-md hover:bg-zinc-800 transition-colors">
                 Get started
               </Link>
             </>
@@ -131,31 +148,60 @@ export function Nav() {
 
       {/* Mobile Menu */}
       {open && (
-        <div className="md:hidden border-t border-zinc-100 bg-white px-5 py-3 space-y-1">
-          {links.map((l) => (
-            <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>
-          ))}
+        <div className="md:hidden border-t border-zinc-100 bg-white px-5 py-3 space-y-0.5">
+          {/* Main links */}
+          {mainLinks.map((l) => {
+            const Icon = l.icon ?? null;
+            return (
+              <Link key={l.href} href={l.href} onClick={() => setOpen(false)}
+                className="flex items-center gap-2.5 px-3 py-2.5 text-sm text-zinc-600 rounded-md hover:bg-zinc-50">
+                {Icon && <Icon className="w-4 h-4 text-zinc-400" />}
+                {l.label}
+              </Link>
+            );
+          })}
+
+          {/* Auth links */}
+          {isLoggedIn && (
+            <>
+              <div className="h-px bg-zinc-100 my-1.5" />
+              <Link href="/dashboard-pages/dashboard" onClick={() => setOpen(false)}
+                className="flex items-center gap-2.5 px-3 py-2.5 text-sm text-zinc-600 rounded-md hover:bg-zinc-50">
+                <LayoutDashboard className="w-4 h-4 text-zinc-400" /> Dashboard
+              </Link>
+              <Link href="/dashboard-pages/settings" onClick={() => setOpen(false)}
+                className="flex items-center gap-2.5 px-3 py-2.5 text-sm text-zinc-600 rounded-md hover:bg-zinc-50">
+                <Settings className="w-4 h-4 text-zinc-400" /> Settings
+              </Link>
+            </>
+          )}
+
+          {/* Admin */}
           {isAdmin && (
             <Link href="/admin" onClick={() => setOpen(false)}
-              className="px-3 py-2.5 text-sm text-amber-600 rounded-md hover:bg-amber-50 flex items-center gap-2">
+              className="flex items-center gap-2.5 px-3 py-2.5 text-sm text-amber-600 rounded-md hover:bg-amber-50">
               <Crown className="w-4 h-4" /> Admin Panel
             </Link>
           )}
-          <div className="h-px bg-zinc-100 my-2" />
+
+          <div className="h-px bg-zinc-100 my-1.5" />
+
+          {/* Auth actions */}
           {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="/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>
+                className="flex items-center gap-2.5 px-3 py-2.5 text-sm text-zinc-600 rounded-md hover:bg-zinc-50">
+                <LogIn className="w-4 h-4 text-zinc-400" /> 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>
+                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>
             </>
           )}
         </div>