From 5dcc1591b787131a116bac2a456ea8f37c9d918b Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Sat, 30 Aug 2025 19:49:43 +0000
Subject: [PATCH] Add a mobile menu to the website header for navigation

Update the search header component to include a mobile menu toggle button and navigation links, replacing the previous search icon functionality.

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/Sy6XHzr
---
 client/src/components/search-header.tsx | 28 +++++++++++++++++++++----
 1 file changed, 24 insertions(+), 4 deletions(-)

diff --git a/client/src/components/search-header.tsx b/client/src/components/search-header.tsx
index 5966a5e..7f6b497 100644
--- a/client/src/components/search-header.tsx
+++ b/client/src/components/search-header.tsx
@@ -90,17 +90,37 @@ export default function SearchHeader({
             variant="ghost" 
             className="md:hidden text-bunny-light" 
             onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
-            data-testid="button-mobile-search"
+            data-testid="button-mobile-menu"
           >
-            {isMobileMenuOpen ? <X className="text-xl" /> : <Search className="text-xl" />}
+            {isMobileMenuOpen ? <X className="text-xl" /> : <Menu className="text-xl" />}
           </Button>
         </div>
       </div>
 
-      {/* Mobile Search Menu */}
+      {/* Mobile Menu */}
       {isMobileMenuOpen && (
         <div className="md:hidden bunny-gray border-b border-white/20 animate-in slide-in-from-top-2 duration-200">
-          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
+          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 space-y-4">
+            {/* Mobile Navigation */}
+            <nav className="flex flex-col space-y-3">
+              <a 
+                href="/" 
+                className="text-bunny-light hover:text-bunny-blue transition-colors text-lg py-2 px-3 rounded-lg hover:bg-white/5" 
+                data-testid="link-mobile-home"
+                onClick={() => setIsMobileMenuOpen(false)}
+              >
+                Home
+              </a>
+              <a 
+                href="/folx-stadl" 
+                className="text-bunny-light hover:text-bunny-blue transition-colors text-lg py-2 px-3 rounded-lg hover:bg-white/5" 
+                data-testid="link-mobile-folx-stadl"
+                onClick={() => setIsMobileMenuOpen(false)}
+              >
+                FOLX STADL
+              </a>
+            </nav>
+            
             {/* Mobile Search */}
             <div className="relative">
               <Input