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>
{/* 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>
<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-folx"
>
{isMobileMenuOpen ? (
<X className="w-6 h-6 text-white" />
) : (
<Menu className="w-6 h-6 text-white" />
)}
</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">
{/* 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-white transition-colors py-2"
className="text-bunny-light hover:text-bunny-blue transition-colors text-sm font-medium"
onClick={() => setIsMobileMenuOpen(false)}
>
Home
</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
</div>
</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>
{/* 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" />
</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>
{/* 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 className="max-w-7xl mx-auto p-4 lg:p-6 relative">