|
| 1 | +"use client" |
| 2 | + |
| 3 | +import Link from "next/link" |
| 4 | +import { usePathname } from "next/navigation" |
| 5 | +import { motion } from "framer-motion" |
| 6 | +import { Shield, Menu, X } from "lucide-react" |
| 7 | +import { useState } from "react" |
| 8 | +import { Button } from "@/components/ui/button" |
| 9 | + |
| 10 | +const navLinks = [ |
| 11 | + { href: "/", label: "Home" }, |
| 12 | + { href: "/features", label: "Features" }, |
| 13 | + { href: "/github-scanner", label: "GitHub Scanner" }, |
| 14 | + { href: "/security-dashboard", label: "Dashboard" }, |
| 15 | + { href: "/ai-assistant", label: "AI Assistant" }, |
| 16 | +] |
| 17 | + |
| 18 | +export function Navbar() { |
| 19 | + const pathname = usePathname() |
| 20 | + const [mobileMenuOpen, setMobileMenuOpen] = useState(false) |
| 21 | + |
| 22 | + return ( |
| 23 | + <motion.header |
| 24 | + initial={{ y: -100, opacity: 0 }} |
| 25 | + animate={{ y: 0, opacity: 1 }} |
| 26 | + transition={{ duration: 0.5 }} |
| 27 | + className="fixed top-0 left-0 right-0 z-50 glass" |
| 28 | + > |
| 29 | + <nav className="container mx-auto px-4 py-4"> |
| 30 | + <div className="flex items-center justify-between"> |
| 31 | + {/* Logo */} |
| 32 | + <Link href="/" className="flex items-center gap-2 group"> |
| 33 | + <div className="relative"> |
| 34 | + <Shield className="h-8 w-8 text-primary glow-text-blue" /> |
| 35 | + <div className="absolute inset-0 bg-primary/20 blur-xl rounded-full" /> |
| 36 | + </div> |
| 37 | + <span className="text-xl font-bold text-foreground"> |
| 38 | + Secure<span className="text-primary">Bob</span> AI |
| 39 | + </span> |
| 40 | + </Link> |
| 41 | + |
| 42 | + {/* Desktop Navigation */} |
| 43 | + <div className="hidden md:flex items-center gap-6"> |
| 44 | + {navLinks.map((link) => ( |
| 45 | + <Link |
| 46 | + key={link.href} |
| 47 | + href={link.href} |
| 48 | + className={`relative text-sm font-medium transition-colors hover:text-primary ${ |
| 49 | + pathname === link.href ? "text-primary" : "text-muted-foreground" |
| 50 | + }`} |
| 51 | + > |
| 52 | + {link.label} |
| 53 | + {pathname === link.href && ( |
| 54 | + <motion.div |
| 55 | + layoutId="navbar-indicator" |
| 56 | + className="absolute -bottom-1 left-0 right-0 h-0.5 bg-primary rounded-full" |
| 57 | + /> |
| 58 | + )} |
| 59 | + </Link> |
| 60 | + ))} |
| 61 | + </div> |
| 62 | + |
| 63 | + {/* CTA Button */} |
| 64 | + <div className="hidden md:flex items-center gap-4"> |
| 65 | + <Link href="/features"> |
| 66 | + <Button className="bg-primary hover:bg-primary/90 text-primary-foreground glow-blue"> |
| 67 | + Start Scanning |
| 68 | + </Button> |
| 69 | + </Link> |
| 70 | + </div> |
| 71 | + |
| 72 | + {/* Mobile Menu Button */} |
| 73 | + <button |
| 74 | + className="md:hidden text-foreground" |
| 75 | + onClick={() => setMobileMenuOpen(!mobileMenuOpen)} |
| 76 | + > |
| 77 | + {mobileMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />} |
| 78 | + </button> |
| 79 | + </div> |
| 80 | + |
| 81 | + {/* Mobile Menu */} |
| 82 | + {mobileMenuOpen && ( |
| 83 | + <motion.div |
| 84 | + initial={{ opacity: 0, height: 0 }} |
| 85 | + animate={{ opacity: 1, height: "auto" }} |
| 86 | + exit={{ opacity: 0, height: 0 }} |
| 87 | + className="md:hidden mt-4 pb-4 border-t border-border" |
| 88 | + > |
| 89 | + <div className="flex flex-col gap-4 pt-4"> |
| 90 | + {navLinks.map((link) => ( |
| 91 | + <Link |
| 92 | + key={link.href} |
| 93 | + href={link.href} |
| 94 | + onClick={() => setMobileMenuOpen(false)} |
| 95 | + className={`text-sm font-medium transition-colors hover:text-primary ${ |
| 96 | + pathname === link.href ? "text-primary" : "text-muted-foreground" |
| 97 | + }`} |
| 98 | + > |
| 99 | + {link.label} |
| 100 | + </Link> |
| 101 | + ))} |
| 102 | + <Link href="/features" onClick={() => setMobileMenuOpen(false)}> |
| 103 | + <Button className="w-full bg-primary hover:bg-primary/90 text-primary-foreground"> |
| 104 | + Start Scanning |
| 105 | + </Button> |
| 106 | + </Link> |
| 107 | + </div> |
| 108 | + </motion.div> |
| 109 | + )} |
| 110 | + </nav> |
| 111 | + </motion.header> |
| 112 | + ) |
| 113 | +} |
0 commit comments