355f494d38
Replit-Commit-Author: Deployment Replit-Commit-Session-Id: 413891e8-d784-4bea-b9f5-91a5a68316b4 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Event-Id: 9acaba5b-d1bd-445d-83cf-46e174f69cc1 Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/413891e8-d784-4bea-b9f5-91a5a68316b4/igVW4lQ Replit-Commit-Deployment-Build-Id: d7d10bce-067c-481a-b090-e3d2518d7a39 Replit-Helium-Checkpoint-Created: true
76 lines
2.7 KiB
TypeScript
76 lines
2.7 KiB
TypeScript
import { Link, useLocation } from "wouter";
|
|
import { Menu, X, Search } from "lucide-react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { useState } from "react";
|
|
import folxLogo from "@assets/folx_MT_poz_b_1772296729169.png";
|
|
|
|
const navItems = [
|
|
{ label: "Start", href: "/" },
|
|
{ label: "News", href: "/category/News" },
|
|
{ label: "Video", href: "/videos" },
|
|
];
|
|
|
|
export default function Header() {
|
|
const [mobileOpen, setMobileOpen] = useState(false);
|
|
const [location] = useLocation();
|
|
|
|
return (
|
|
<header className="sticky top-0 z-50 bg-background/95 backdrop-blur-md border-b border-card-border" data-testid="header">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="flex items-center justify-between gap-4 h-16">
|
|
<Link href="/">
|
|
<div className="flex items-center gap-2 cursor-pointer" data-testid="link-logo">
|
|
<img src={folxLogo} alt="Folx TV" className="h-32 w-auto object-contain py-1" />
|
|
</div>
|
|
</Link>
|
|
|
|
<nav className="hidden md:flex items-center gap-1" data-testid="nav-desktop">
|
|
{navItems.map((item) => (
|
|
<Link key={item.href} href={item.href}>
|
|
<Button
|
|
variant={location === item.href ? "default" : "ghost"}
|
|
size="sm"
|
|
data-testid={`link-nav-${item.label.toLowerCase().replace(/\s/g, "-")}`}
|
|
>
|
|
{item.label}
|
|
</Button>
|
|
</Link>
|
|
))}
|
|
</nav>
|
|
|
|
<div className="flex items-center gap-2">
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="md:hidden"
|
|
onClick={() => setMobileOpen(!mobileOpen)}
|
|
data-testid="button-mobile-menu"
|
|
>
|
|
{mobileOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{mobileOpen && (
|
|
<div className="md:hidden border-t border-card-border bg-card" data-testid="nav-mobile">
|
|
<nav className="flex flex-col p-4 gap-1">
|
|
{navItems.map((item) => (
|
|
<Link key={item.href} href={item.href}>
|
|
<Button
|
|
variant={location === item.href ? "default" : "ghost"}
|
|
className="w-full justify-start"
|
|
onClick={() => setMobileOpen(false)}
|
|
data-testid={`link-mobile-${item.label.toLowerCase().replace(/\s/g, "-")}`}
|
|
>
|
|
{item.label}
|
|
</Button>
|
|
</Link>
|
|
))}
|
|
</nav>
|
|
</div>
|
|
)}
|
|
</header>
|
|
);
|
|
}
|