sebastjan/videofolxtv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add a mobile menu to the website header for navigation

Browse Source 
Update the search header component to include a mobile menu toggle button and navigation links, replacing the previous search icon functionality.

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/Sy6XHzr
This commit is contained in:
sebastjanartic 2025-08-30 19:49:43 +00:00
parent ae72ca8609
commit 5dcc1591b7
1 changed files with 24 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
client/src/components/search-header.tsx
View File

@ -90,17 +90,37 @@ export default function SearchHeader({
variant="ghost"
className="md:hidden text-bunny-light"
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
data-testid="button-mobile-search"
data-testid="button-mobile-menu"
>
{isMobileMenuOpen ? <X className="text-xl" /> : <Search className="text-xl" />}
{isMobileMenuOpen ? <X className="text-xl" /> : <Menu className="text-xl" />}
</Button>
</div>
</div>
{/* Mobile Search Menu */}
{/* Mobile Menu */}
{isMobileMenuOpen && (
<div className="md:hidden bunny-gray border-b border-white/20 animate-in slide-in-from-top-2 duration-200">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
<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
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
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>
</nav>
{/* Mobile Search */}
<div className="relative">
<Input