From 9c889df962339549f3fd8cacc532c6f4cb77f1c7 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Sat, 30 Aug 2025 21:38:19 +0000
Subject: [PATCH] Improve mobile menu display and functionality across pages

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
---
 client/src/pages/FolxStadlPage.tsx | 59 ++++++++++++++++++++----------
 client/src/pages/VideoPage.tsx     | 50 +++++++++++++++++++++++++
 2 files changed, 89 insertions(+), 20 deletions(-)

diff --git a/client/src/pages/FolxStadlPage.tsx b/client/src/pages/FolxStadlPage.tsx
index a21dcd8..3a8f762 100644
--- a/client/src/pages/FolxStadlPage.tsx
+++ b/client/src/pages/FolxStadlPage.tsx
@@ -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 */}
diff --git a/client/src/pages/VideoPage.tsx b/client/src/pages/VideoPage.tsx
index 71a9cfb..69faf2c 100644
--- a/client/src/pages/VideoPage.tsx
+++ b/client/src/pages/VideoPage.tsx
@@ -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">