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

Improve layout and navigation for mobile devices

Browse Source 
Introduces a collapsible mobile menu with a search bar and navigation links to enhance user experience on smaller screens.

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:33:16 +00:00
parent 7182ef47e4
commit e53138f4e9
1 changed files with 52 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
client/src/pages/home.tsx
View File

@ -4,7 +4,7 @@ import { type Video } from "@shared/schema";
import VideoGrid from "@/components/video-grid";
import { Link } from "wouter";
import { Input } from "@/components/ui/input";
import { Search } from "lucide-react";
import { Search, Menu, X } from "lucide-react";
import NetflixGrid from "@/components/netflix-grid";
import go4LogoPath from "@assets/go4_1756394900352.png";
@ -20,6 +20,7 @@ export default function Home() {
const [viewMode, setViewMode] = useState<"grid" | "list">("grid");
const [offset, setOffset] = useState(0);
const [allVideos, setAllVideos] = useState<Video[]>([]);
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
@ -112,9 +113,59 @@ export default function Home() {
<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"
>
{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>
<main className="w-full pt-0 pb-8 relative">