Improve navigation by using a dedicated routing library

Replace all anchor tags with Link components from the 'wouter' library to enable client-side routing and prevent page reloads between sections.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 074b0e4c-6171-43bd-aa98-f9e04623ca14
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/074b0e4c-6171-43bd-aa98-f9e04623ca14/W2v7sFm
This commit is contained in:
sebastjanartic 2025-08-30 20:06:33 +00:00
parent 824eb7a6f7
commit d1b2c3ee90

View File

@ -2,6 +2,7 @@ import { useState, useCallback } from "react";
import { Search, Play, Menu, Grid3X3, List, X } from "lucide-react";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Link } from "wouter";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import go4LogoPath from "@assets/go4_1756394900352.png";
@ -55,22 +56,22 @@ export default function SearchHeader({
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<div className="flex items-center justify-between h-20">
<div className="flex items-center space-x-4">
<a href="/" className="flex items-center space-x-2 hover:opacity-80 transition-opacity">
<Link href="/" className="flex items-center space-x-2 hover:opacity-80 transition-opacity">
<div className="w-9 h-9 gradient-primary rounded-lg flex items-center justify-center shadow-lg">
<div className="w-0 h-0 border-l-[10px] border-l-white border-y-[7px] border-y-transparent ml-1"></div>
</div>
<h1 className="text-2xl font-bold text-white tracking-wide">go4.video</h1>
</a>
</Link>
</div>
<div className="hidden md:flex items-center space-x-6">
<nav className="flex space-x-6">
<a href="/" className="text-bunny-light hover:text-bunny-blue transition-colors" data-testid="link-home">
<Link href="/" className="text-bunny-light hover:text-bunny-blue transition-colors" data-testid="link-home">
Home
</a>
<a href="/folx-stadl" className="text-bunny-light hover:text-bunny-blue transition-colors" data-testid="link-folx-stadl">
</Link>
<Link href="/folx-stadl" className="text-bunny-light hover:text-bunny-blue transition-colors" data-testid="link-folx-stadl">
FOLX STADL
</a>
</Link>
</nav>
<div className="relative">
@ -103,22 +104,22 @@ export default function SearchHeader({
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 space-y-4">
{/* Mobile Navigation */}
<nav className="flex flex-col space-y-3">
<a
<Link
href="/"
className="text-bunny-light hover:text-bunny-blue transition-colors text-lg py-2 px-3 rounded-lg hover:bg-white/5"
data-testid="link-mobile-home"
onClick={() => setIsMobileMenuOpen(false)}
>
Home
</a>
<a
</Link>
<Link
href="/folx-stadl"
className="text-bunny-light hover:text-bunny-blue transition-colors text-lg py-2 px-3 rounded-lg hover:bg-white/5"
data-testid="link-mobile-folx-stadl"
onClick={() => setIsMobileMenuOpen(false)}
>
FOLX STADL
</a>
</Link>
</nav>
{/* Mobile Search */}