From 80f3e7d48e49cbffbfd23e272658f2bc2ee66452 Mon Sep 17 00:00:00 2001
From: Priec <filippriec@gmail.com>
Date: Sat, 27 Jun 2026 22:39:16 +0200
Subject: [PATCH] proper mobil search

---
 assets/views/base.html         | 16 ++++++++++++++++
 assets/views/shop/_search.html |  2 +-
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/assets/views/base.html b/assets/views/base.html
index 6edcba3..70fb0ca 100644
--- a/assets/views/base.html
+++ b/assets/views/base.html
@@ -196,6 +196,22 @@
           {% include "partials/settings_dropdown.html" %}
         </div>
       </nav>
+      {% set mobile_search_category = selected_category | default(value="") %}
+      {% if on_home | default(value=false) or mobile_search_category %}
+      <form action="/search" method="get" role="search" class="px-4 pb-3 md:hidden">
+        {% if mobile_search_category and mobile_search_category != "all" %}
+        <input type="hidden" name="category" value="{{ mobile_search_category }}" />
+        {% endif %}
+        <div class="flex min-w-0 overflow-hidden rounded-radius border border-outline transition focus-within:border-primary dark:border-outline-dark dark:focus-within:border-primary-dark">
+          <span class="pointer-events-none flex items-center bg-surface-alt pl-3.5 text-on-surface/40 dark:bg-surface-dark-alt dark:text-on-surface-dark/40">{{ ui::icon(name="search", size="size-[18px]") }}</span>
+          <input type="search" name="q" value="{{ query | default(value='') }}" autocomplete="off"
+            placeholder="{{ t(key='search-placeholder', lang=lang | default(value='sk')) }}"
+            aria-label="{{ t(key='search-placeholder', lang=lang | default(value='sk')) }}"
+            class="min-w-0 flex-1 border-0 bg-surface-alt px-2.5 py-2.5 text-sm text-on-surface placeholder:text-on-surface/50 focus:outline-none dark:bg-surface-dark-alt dark:text-on-surface-dark dark:placeholder:text-on-surface-dark/50" />
+          <button type="submit" class="shrink-0 bg-cta px-4 text-sm font-bold text-on-cta transition hover:opacity-90 dark:bg-cta-dark dark:text-on-cta-dark">{{ t(key="search-button", lang=lang | default(value='sk')) }}</button>
+        </div>
+      </form>
+      {% endif %}
     </header>
 
     <!-- dark overlay behind the category drawer on small screens -->
diff --git a/assets/views/shop/_search.html b/assets/views/shop/_search.html
index bfe4ead..4d544d1 100644
--- a/assets/views/shop/_search.html
+++ b/assets/views/shop/_search.html
@@ -26,7 +26,7 @@
     <input type="hidden" name="category" value="{{ selected_category | default(value='all') }}" />
 
     <!-- search box -->
-    <div class="flex max-w-xl gap-2 md:hidden">
+    <div class="hidden max-w-xl gap-2">
       <div class="relative flex-1">
         <span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-on-surface/50 dark:text-on-surface-dark/50">
           {{ ui::icon(name="search", size="size-5") }}