File size: 2,831 Bytes
7f6dd09 2fd574a 7f6dd09 2fd574a 7f6dd09 2fd574a 7f6dd09 2fd574a 7f6dd09 2fd574a 7f6dd09 2fd574a 7f6dd09 2fd574a 7f6dd09 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 | import { Link, useLocation } from "react-router-dom";
import { Upload, History, LayoutDashboard, Moon, Sun } from "lucide-react";
import { useAuth } from "../context/AuthContext.jsx";
import { useTheme } from "../context/ThemeContext.jsx";
const NAV_LINKS = [
{ to: "/", label: "Dashboard", icon: LayoutDashboard },
{ to: "/onboard", label: "New Analysis", icon: Upload },
{ to: "/history", label: "History", icon: History },
];
export default function Navbar() {
const location = useLocation();
const { user, logout } = useAuth();
const { theme, toggleTheme } = useTheme();
return (
<nav className="navbar">
{/* Brand */}
<Link to="/" className="navbar-brand" style={{ textDecoration: "none" }}>
<span style={{ fontStyle: "italic", color: "var(--accent)" }}>
Blue
</span>
-Fin
</Link>
{/* Center links */}
<div className="navbar-links hide-mobile">
{NAV_LINKS.map((link) => {
const isActive = location.pathname === link.to;
return (
<Link
key={link.to}
to={link.to}
className={`navbar-link ${isActive ? "active" : ""}`}
>
{link.label}
</Link>
);
})}
</div>
{/* Right section */}
<div className="flex items-center gap-sm">
{user ? (
<>
<div
style={{
display: "flex",
alignItems: "center",
gap: "8px",
padding: "6px 14px",
background: "var(--bg-elevated)",
borderRadius: "var(--radius-full)",
border: "1px solid var(--border)",
}}
>
<span
style={{
fontSize: "13px",
fontWeight: 500,
color: "var(--text-secondary)",
}}
>
{user.email}
</span>
</div>
<button
onClick={logout}
className="btn btn-secondary btn-sm"
style={{ borderRadius: "var(--radius-full)" }}
>
Sign Out
</button>
</>
) : (
<Link
to="/auth"
className="btn btn-primary btn-sm"
style={{ borderRadius: "var(--radius-full)" }}
>
Sign In
</Link>
)}
<button
onClick={toggleTheme}
className="btn-icon btn-ghost"
style={{ borderRadius: "var(--radius-sm)" }}
title={`Switch to ${theme === "dark" ? "light" : "dark"} mode`}
>
{theme === "dark" ? <Sun size={16} /> : <Moon size={16} />}
</button>
</div>
</nav>
);
}
|