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

Add mobile navigation for easier page traversal and menu access

Browse Source 
Implement a collapsible mobile menu with a hamburger icon toggle on the Folx Stadl page, allowing users to navigate back and access menu options.

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/W2v7sFm
This commit is contained in:
sebastjanartic 2025-08-30 20:03:24 +00:00
parent 1066402619
commit ae0339fde8
2 changed files with 54 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
attached_assets/image_1756584096866.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

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

@ -1,6 +1,6 @@
import { useQuery } from '@tanstack/react-query';
import { Link } from 'wouter';
import { ArrowLeft, ChevronLeft, ChevronRight } from 'lucide-react';
import { ArrowLeft, ChevronLeft, ChevronRight, Menu, X } from 'lucide-react';
import VideoCard from '@/components/video-card';
import BunnyVideoModal from '@/components/bunny-video-modal';
import { Button } from '@/components/ui/button';
@ -11,6 +11,7 @@ export default function FolxStadlPage() {
const [selectedVideo, setSelectedVideo] = useState<Video | null>(null);
const [isModalOpen, setIsModalOpen] = useState(false);
const [currentPage, setCurrentPage] = useState(1);
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
const itemsPerPage = 10;
const { data, isLoading } = useQuery<{videos: Video[], total: number}>({
@ -52,17 +53,60 @@ export default function FolxStadlPage() {
return (
<div className="min-h-screen bg-bunny-dark text-white">
{/* Header */}
<div className="border-b border-white/10 bg-black/20 backdrop-blur-sm">
<div className="border-b border-white/10 bg-black/20 backdrop-blur-sm sticky top-0 z-40">
<div className="max-w-7xl mx-auto px-4 py-4">
<div className="flex items-center gap-4">
<Link href="/">
<button className="flex items-center gap-2 text-bunny-light hover:text-white transition-colors">
<ArrowLeft className="w-5 h-5" />
<span>Zurück</span>
</button>
</Link>
<h1 className="text-3xl font-bold text-white uppercase tracking-wide">FOLX STADL</h1>
<div className="flex items-center justify-between">
{/* Left side - Back button and title */}
<div className="flex items-center gap-4">
<Link href="/">
<button className="flex items-center gap-2 text-bunny-light hover:text-white transition-colors">
<ArrowLeft className="w-5 h-5" />
<span className="hidden sm:inline">Zurück</span>
</button>
</Link>
<h1 className="text-2xl sm:text-3xl font-bold text-white uppercase tracking-wide">FOLX STADL</h1>
</div>
{/* Right side - 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>
{/* 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-white transition-colors">
Home
</Link>
</nav>
</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 Epizode
</div>
</nav>
</div>
)}
</div>
</div>