src/components/Navbar.tsx


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

import { Link } from "react-router-dom";
import ThemeToggle from "./ThemeToggle";

export default function Navbar() {
  const navItems = [
    { label: 'Home', href: '/' },
    { label: 'Gear', href: '/gear' },
    { label: 'Projects', href: '/projects' },
    { label: 'Homelab', href: '/homelab' },
    { label: 'Blog', href: '/blog' }
  ];

  return (
    <nav className="sticky top-0 z-50 backdrop-blur flex items-center">
      <div className="max-w-2xl mx-auto flex px-4 py-4 text-sm">
        <div className="flex gap-6 items-center">
          {navItems.map(({ label, href }) => (
            <Link className="hover:underline" key={label} to={href}>{label}</Link>
          ))}
          <ThemeToggle />
        </div>
      </div>
    </nav>
  );
}