58 lines
2.6 KiB
TypeScript
58 lines
2.6 KiB
TypeScript
import { useState, useEffect } from "react";
|
|
import { Link } from "react-router-dom";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
|
|
import { Menu, Ticket } from "lucide-react";
|
|
import { ThemeToggle } from "@/components/ThemeToggle";
|
|
|
|
export default function Header() {
|
|
const [open, setOpen] = useState(false);
|
|
const [scrolled, setScrolled] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const fn = () => setScrolled(window.scrollY > 20);
|
|
window.addEventListener("scroll", fn);
|
|
return () => window.removeEventListener("scroll", fn);
|
|
}, []);
|
|
|
|
const links = [
|
|
{ label: "Schedule", to: "/schedule" },
|
|
{ label: "Speakers", to: "/speakers" },
|
|
{ label: "Venue", to: "/venue" },
|
|
];
|
|
|
|
return (
|
|
<header className={`fixed top-0 inset-x-0 z-50 transition-all duration-300 \${scrolled ? "bg-slate-950/90 backdrop-blur-lg border-b border-slate-800 shadow-sm" : "bg-transparent"}`}>
|
|
<div className="mx-auto max-w-7xl flex items-center justify-between px-6 py-4">
|
|
<Link to="/" className="text-lg font-bold tracking-tight text-white">DevForge 2026</Link>
|
|
<nav className="hidden md:flex items-center gap-8">
|
|
{links.map((l) => (
|
|
<Link key={l.to} to={l.to} className="text-sm text-slate-300 hover:text-indigo-400 transition-colors">{l.label}</Link>
|
|
))}
|
|
</nav>
|
|
<div className="hidden md:flex items-center gap-3">
|
|
<ThemeToggle />
|
|
<Button asChild size="sm" className="bg-indigo-600 hover:bg-indigo-500 active:scale-[0.98] text-white">
|
|
<Link to="/#tickets"><Ticket className="h-4 w-4 mr-2" />Get Tickets</Link>
|
|
</Button>
|
|
</div>
|
|
<Sheet open={open} onOpenChange={setOpen}>
|
|
<SheetTrigger asChild className="md:hidden">
|
|
<Button variant="ghost" size="icon" className="text-white"><Menu className="h-5 w-5" /></Button>
|
|
</SheetTrigger>
|
|
<SheetContent side="right" className="w-72 bg-slate-950 border-slate-800">
|
|
<nav className="mt-8 flex flex-col gap-4">
|
|
{links.map((l) => (
|
|
<Link key={l.to} to={l.to} className="text-lg font-medium text-slate-200" onClick={() => setOpen(false)}>{l.label}</Link>
|
|
))}
|
|
<Button asChild className="mt-4 w-full bg-indigo-600 hover:bg-indigo-500 active:scale-[0.98] text-white">
|
|
<Link to="/#tickets" onClick={() => setOpen(false)}><Ticket className="h-4 w-4 mr-2" />Get Tickets</Link>
|
|
</Button>
|
|
<ThemeToggle />
|
|
</nav>
|
|
</SheetContent>
|
|
</Sheet>
|
|
</div>
|
|
</header>
|
|
);
|
|
} |