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

Improve mobile menu display and functionality across pages

Browse Source 
Refactor mobile menu component to improve its display and responsiveness on different pages, including the addition of a search bar within the mobile menu.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 051a65da-1176-4478-a61c-c662f2a15536
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/051a65da-1176-4478-a61c-c662f2a15536/xbALwBu
This commit is contained in:
sebastjanartic 2025-08-30 21:38:19 +00:00
parent c358344011
commit 9c889df962
2 changed files with 89 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
client/src/pages/FolxStadlPage.tsx
View File

@ -99,38 +99,57 @@ export default function FolxStadlPage() {
</div> </div>
{/* Mobile menu button */} {/* Mobile menu button */}
<div className="md:hidden"> <button
<Button onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
variant="ghost" className="md:hidden p-2 rounded-lg bg-white/10 hover:bg-white/20 transition-colors"
size="sm" data-testid="button-mobile-menu-folx"
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)} >
className="text-white hover:bg-white/10" {isMobileMenuOpen ? (
data-testid="button-mobile-menu-folx" <X className="w-6 h-6 text-white" />
> ) : (
{isMobileMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />} <Menu className="w-6 h-6 text-white" />
</Button> )}
</div> </button>
</div> </div>
</div> </div>
</div>
{/* Mobile menu dropdown */} {/* Mobile menu dropdown - kompakten */}
{isMobileMenuOpen && ( {isMobileMenuOpen && (
<div className="md:hidden mt-4 pt-4 border-t border-white/10"> <div className="md:hidden border-t border-white/20 bg-bunny-dark/95 backdrop-blur-md">
<nav className="flex flex-col space-y-3"> <div className="px-4 py-3">
{/* Mobile navigation links - horizontal */}
<nav className="flex space-x-6 mb-3">
<Link <Link
href="/" href="/"
className="text-bunny-light hover:text-white transition-colors py-2" className="text-bunny-light hover:text-bunny-blue transition-colors text-sm font-medium"
onClick={() => setIsMobileMenuOpen(false)} onClick={() => setIsMobileMenuOpen(false)}
> >
Home Home
</Link> </Link>
<div className="text-bunny-muted py-2 border-t border-white/5"> <Link
href="/folx-stadl"
className="text-bunny-light hover:text-bunny-blue transition-colors text-sm font-medium"
onClick={() => setIsMobileMenuOpen(false)}
>
FOLX STADL FOLX STADL
</div> </Link>
</nav> </nav>
{/* Mobile search - manjši */}
<div className="relative">
<Input
type="search"
placeholder="Search..."
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className="bg-white border border-gray-300 rounded-lg px-3 py-2 pl-9 text-sm text-gray-900 placeholder-gray-500 focus:outline-none focus:border-bunny-blue transition-colors w-full"
/>
<Search className="absolute left-2.5 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
</div>
</div> </div>
)} </div>
</div> )}
</div> </div>
{/* Main Content */} {/* Main Content */}

50
client/src/pages/VideoPage.tsx
View File

@ -243,9 +243,59 @@ export default function VideoPage() {
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" /> <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
</div> </div>
</div> </div>
{/* Mobile menu button */}
<button
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
className="md:hidden p-2 rounded-lg bg-white/10 hover:bg-white/20 transition-colors"
data-testid="button-mobile-menu-video"
>
{isMobileMenuOpen ? (
<X className="w-6 h-6 text-white" />
) : (
<Menu className="w-6 h-6 text-white" />
)}
</button>
</div> </div>
</div> </div>
</div> </div>
{/* Mobile menu dropdown - kompakten */}
{isMobileMenuOpen && (
<div className="md:hidden border-t border-white/20 bg-bunny-dark/95 backdrop-blur-md">
<div className="px-4 py-3">
{/* Mobile navigation links - horizontal */}
<nav className="flex space-x-6 mb-3">
<Link
href="/"
className="text-bunny-light hover:text-bunny-blue transition-colors text-sm font-medium"
onClick={() => setIsMobileMenuOpen(false)}
>
Home
</Link>
<Link
href="/folx-stadl"
className="text-bunny-light hover:text-bunny-blue transition-colors text-sm font-medium"
onClick={() => setIsMobileMenuOpen(false)}
>
FOLX STADL
</Link>
</nav>
{/* Mobile search - manjši */}
<div className="relative">
<Input
type="search"
placeholder="Search..."
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className="bg-white border border-gray-300 rounded-lg px-3 py-2 pl-9 text-sm text-gray-900 placeholder-gray-500 focus:outline-none focus:border-bunny-blue transition-colors w-full"
/>
<Search className="absolute left-2.5 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
</div>
</div>
</div>
)}
</div> </div>
<div className="max-w-7xl mx-auto p-4 lg:p-6 relative"> <div className="max-w-7xl mx-auto p-4 lg:p-6 relative">