fix: nav.tsx TypeScript error — type Icon as LucideIcon | null

web/components/nav.tsx

@@ -2,6 +2,7 @@
 
 import Link from "next/link";
 import { usePathname } from "next/navigation";
+import type { LucideIcon } from "lucide-react";
 import {
   ShieldCheck, Menu, X, Crown, GitCompare, LayoutDashboard,
   ScanText, Settings, LogIn, Zap
@@ -9,6 +10,12 @@ import {
 import { useState, useEffect } from "react";
 import { createClient } from "@/lib/supabase/client";
 
+interface NavLink {
+  href: string;
+  label: string;
+  icon?: LucideIcon;
+}
+
 export function Nav() {
   const [open, setOpen] = useState(false);
   const [userEmail, setUserEmail] = useState<string | null>(null);
@@ -35,19 +42,18 @@ export function Nav() {
     });
   }, []);
 
-  // Build links dynamically based on auth state
-  const publicLinks = [
+  const publicLinks: NavLink[] = [
     { href: "/#features", label: "Features" },
     { href: "/#pricing", label: "Pricing" },
   ];
 
-  const appLinks = [
+  const appLinks: NavLink[] = [
     { 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;
+  const links: NavLink[] = isLoggedIn ? appLinks : publicLinks;
 
   return (
     <nav className="sticky top-0 z-50 bg-white/80 backdrop-blur-md border-b border-zinc-100">
@@ -62,7 +68,7 @@ export function Nav() {
         {/* Desktop Nav */}
         <div className="hidden md:flex items-center gap-1">
           {links.map((l) => {
-            const Icon = "icon" in l ? l.icon : null;
+            const Icon = l.icon ?? null;
             const isActive = pathname === l.href;
             return (
               <Link key={l.href} href={l.href}
@@ -75,7 +81,6 @@ export function Nav() {
             );
           })}
 
-          {/* Admin link — 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 ${
@@ -104,7 +109,7 @@ export function Nav() {
             </>
           ) : (
             <>
-              {!isLoggedIn && loaded && (
+              {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
@@ -133,7 +138,7 @@ export function Nav() {
           ))}
           {isAdmin && (
             <Link href="/admin" onClick={() => setOpen(false)}
-              className="block px-3 py-2.5 text-sm text-amber-600 rounded-md hover:bg-amber-50 flex items-center gap-2">
+              className="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>
           )}