Remove transparent header and fix page scrolling issues
Replaces the transparent, scroll-attached header component with a fixed header with a background, improving UI consistency and addressing user-reported scrolling behavior. 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/lK7HRF1
This commit is contained in:
parent
a953ab5f2f
commit
c43c443559
@ -55,14 +55,68 @@ export default function FolxStadlPage() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-bunny-dark text-white">
|
<div className="min-h-screen bg-bunny-dark text-white">
|
||||||
<SearchHeader
|
{/* Header */}
|
||||||
onSearch={(query) => {
|
<div className="border-b border-white/10 bg-black/20 backdrop-blur-sm relative overflow-hidden">
|
||||||
setSearchQuery(query);
|
<div className="max-w-7xl mx-auto px-4 py-4">
|
||||||
if (query) window.location.href = `/?search=${encodeURIComponent(query)}`;
|
<div className="flex items-center justify-between">
|
||||||
}}
|
{/* Left side - Logo */}
|
||||||
onViewChange={setViewMode}
|
<div className="flex items-center space-x-4">
|
||||||
currentView={viewMode}
|
<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>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Right side - Navigation */}
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
{/* Desktop navigation */}
|
||||||
|
<div className="hidden md:flex items-center space-x-6">
|
||||||
|
<nav className="flex space-x-6">
|
||||||
|
<Link href="/" className="text-bunny-light hover:text-bunny-blue transition-colors">
|
||||||
|
Home
|
||||||
|
</Link>
|
||||||
|
<Link href="/folx-stadl" className="text-bunny-light hover:text-bunny-blue transition-colors">
|
||||||
|
FOLX STADL
|
||||||
|
</Link>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Mobile menu button */}
|
||||||
|
<div className="md:hidden">
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
|
||||||
|
className="text-white hover:bg-white/10"
|
||||||
|
data-testid="button-mobile-menu-folx"
|
||||||
|
>
|
||||||
|
{isMobileMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Mobile menu dropdown */}
|
||||||
|
{isMobileMenuOpen && (
|
||||||
|
<div className="md:hidden mt-4 pt-4 border-t border-white/10">
|
||||||
|
<nav className="flex flex-col space-y-3">
|
||||||
|
<Link
|
||||||
|
href="/"
|
||||||
|
className="text-bunny-light hover:text-white transition-colors py-2"
|
||||||
|
onClick={() => setIsMobileMenuOpen(false)}
|
||||||
|
>
|
||||||
|
Home
|
||||||
|
</Link>
|
||||||
|
<div className="text-bunny-muted py-2 border-t border-white/5">
|
||||||
|
FOLX STADL
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* Main Content */}
|
{/* Main Content */}
|
||||||
<div className="max-w-7xl mx-auto px-4 py-8">
|
<div className="max-w-7xl mx-auto px-4 py-8">
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user