From 8dda2ecd52ad849307e6f182ff59a7a02d68a5f4 Mon Sep 17 00:00:00 2001
From: Artur Borecki <me@pufereq.pl>
Date: Wed, 11 Mar 2026 12:58:05 +0100
Subject: [PATCH] feat(templates/header.html): make search bar responsive

---
 kursy/templates/header.html | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/kursy/templates/header.html b/kursy/templates/header.html
index 700164d..db24958 100644
--- a/kursy/templates/header.html
+++ b/kursy/templates/header.html
@@ -1,7 +1,14 @@
 {% load i18n %}
 <header class="bg-blue-900 text-white shadow-md">
-  <div class="container mx-auto flex items-center justify-between py-4 px-6">
+<div class="container mx-auto flex items-center justify-between py-4 px-6">
     <a class="text-xl font-bold" href="/">Kursy</a>
+
+    <!-- search bar for large screens -->
+    <form action="{% url 'search' %}" method="get" class="hidden md:flex items-center bg-blue-950 rounded-md absolute left-1/2 transform -translate-x-1/2">
+      <input type="text" name="query" placeholder="{% trans 'Search courses...' %}" class="rounded-md px-3 py-2 focus:outline-none">
+      <button type="submit" class="bg-white text-blue-900 rounded-md px-3 py-2 hover:bg-gray-200 transition"><i class="fi fi-br-search"></i></button>
+    </form>
+
     <nav class="flex items-center gap-4">
       {% if user.is_authenticated %}
         <a href="{% url 'account_logout' %}" class="hover:underline">{% trans "Logout" %}</a>
@@ -23,4 +30,12 @@
       </div>
     </nav>
   </div>
+
+  <!-- search bar for small screens -->
+  <div class="container mx-auto px-6 pb-4 md:hidden">
+    <form action="{% url 'search' %}" method="get" class="flex items-center bg-blue-950 rounded-md w-full">
+      <input type="text" name="query" placeholder="{% trans 'Search courses...' %}" class="rounded-md px-3 py-2 w-full focus:outline-none">
+      <button type="submit" class="bg-white text-blue-900 rounded-md px-3 py-2 hover:bg-gray-200 transition"><i class="fi fi-br-search"></i></button>
+    </form>
+  </div>
 </header>