Mobilna navigacija: vodoravna vrstica rubrik namesto hamburger menija (kot na ONE)

client/src/components/header.tsx

@@ -1,5 +1,5 @@
 import { Link, useLocation } from "wouter";
-import { Menu, X, Search } from "lucide-react";
+import { Search, X } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { useState, useRef, useEffect } from "react";
 import folxLogo from "@assets/folx_MT_poz_b_1772296729169.png";
@@ -17,7 +17,6 @@ const navItems = [
 ];
 
 export default function Header() {
-  const [mobileOpen, setMobileOpen] = useState(false);
   const [searchOpen, setSearchOpen] = useState(false);
   const [searchQuery, setSearchQuery] = useState("");
   const [location, navigate] = useLocation();
@@ -99,50 +98,39 @@ export default function Header() {
                 <Search className="w-4 h-4" />
               </Button>
             )}
-            <Button
-              variant="ghost"
-              size="icon"
-              className="md:hidden"
-              onClick={() => setMobileOpen(!mobileOpen)}
-              data-testid="button-mobile-menu"
-            >
-              {mobileOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
-            </Button>
           </div>
         </div>
       </div>
 
-      {mobileOpen && (
+      {/* Mobilna navigacija: vodoravna vrstica rubrik, vedno vidna (kot na ONE),
-        <div className="md:hidden border-t border-card-border bg-card" data-testid="nav-mobile">
+          namesto hamburger menija. Vodoravno drsenje brez vidnega drsnika. */}
-          <nav className="flex flex-col p-4 gap-1">
+      <nav
-            <form onSubmit={handleSearch} className="mb-2" data-testid="form-mobile-search">
+        className="md:hidden border-t border-card-border bg-card overflow-x-auto"
-              <div className="relative">
+        style={{ scrollbarWidth: "none", msOverflowStyle: "none" }}
-                <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+        data-testid="nav-mobile-bar"
-                <input
+      >
-                  type="text"
+        <div className="flex items-stretch gap-1 px-3 py-1.5 w-max">
-                  value={searchQuery}
+          {navItems.map((item) => {
-                  onChange={(e) => setSearchQuery(e.target.value)}
+            const active = location === item.href;
-                  placeholder="Artikel, Videos suchen..."
+            return (
-                  className="w-full pl-9 pr-3 py-2 bg-background border border-card-border rounded-md text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-primary"
-                  data-testid="input-mobile-search"
-                />
-              </div>
-            </form>
-            {navItems.map((item) => (
               <Link key={item.href} href={item.href}>
-                <Button
+                <span
-                  variant={location === item.href ? "default" : "ghost"}
+                  className={
-                  className="w-full justify-start"
+                    "block whitespace-nowrap px-3 py-1.5 rounded-md text-[13px] font-semibold uppercase tracking-wide transition-colors " +
-                  onClick={() => setMobileOpen(false)}
+                    (active
+                      ? "bg-primary text-primary-foreground"
+                      : "text-foreground/80 hover:text-primary")
+                  }
                   data-testid={`link-mobile-${item.label.toLowerCase().replace(/\s/g, "-")}`}
                 >
                   {item.label}
-                </Button>
+                </span>
               </Link>
-            ))}
+            );
-          </nav>
+          })}
         </div>
-      )}
+      </nav>
+
     </header>
   );
 }