From e53138f4e9c73d20d632c6d41058e0fb6b897243 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Sat, 30 Aug 2025 21:33:16 +0000
Subject: [PATCH] Improve layout and navigation for mobile devices

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
---
 client/src/pages/home.tsx | 53 ++++++++++++++++++++++++++++++++++++++-
 1 file changed, 52 insertions(+), 1 deletion(-)

diff --git a/client/src/pages/home.tsx b/client/src/pages/home.tsx
index 360ef1f..9b9f27e 100644
--- a/client/src/pages/home.tsx
+++ b/client/src/pages/home.tsx
@@ -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">