From e251d37a17ff00079d14fd30f7f4cd313fba4214 Mon Sep 17 00:00:00 2001
From: "Danilo M." <danix@danix.xyz>
Date: Mon, 20 Apr 2026 13:57:10 +0200
Subject: feat: integrate search bar into mobile hamburger menu

Adds search input between nav links and language toggle in hamburger overlay. Uses mobileSearch Alpine component with lazy-loaded index. Clicking a result closes the menu. Styled consistently with desktop modal (text-sm, compact spacing). Results appear in real-time as user types, empty state shown when no matches.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
---
 .../layouts/partials/hamburger-menu.html           | 37 ++++++++++++++++++++++
 1 file changed, 37 insertions(+)

diff --git a/themes/danix-xyz-hacker/layouts/partials/hamburger-menu.html b/themes/danix-xyz-hacker/layouts/partials/hamburger-menu.html
index 41f4e0b..9bd57a2 100644
--- a/themes/danix-xyz-hacker/layouts/partials/hamburger-menu.html
+++ b/themes/danix-xyz-hacker/layouts/partials/hamburger-menu.html
@@ -38,6 +38,43 @@
       {{ end }}
     </nav>
 
+    <!-- Mobile search bar -->
+    <div class="p-6 border-b border-border" x-data="mobileSearch()">
+      <label for="search-input-mobile" class="sr-only">
+        {{ i18n "searchPlaceholder" }}
+      </label>
+      <input
+        id="search-input-mobile"
+        type="text"
+        :value="searchQuery"
+        @input="filterArticles($el.value); ensureIndexLoaded()"
+        placeholder="{{ i18n "searchPlaceholder" }}"
+        class="w-full px-4 py-2 border-2 border-border rounded focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent bg-bg text-text text-sm"
+        aria-describedby="mobile-search-results"
+      />
+
+      <!-- Mobile search results -->
+      <div id="mobile-search-results" class="mt-3 space-y-2" x-show="filteredArticles.length > 0" role="region" aria-live="polite">
+        <template x-for="article in filteredArticles" :key="article.url">
+          <div class="p-3 border-l-4 border-accent bg-bg/50 hover:bg-bg/70 transition-colors rounded text-sm">
+            <a :href="article.url" @click="menuOpen = false" class="block focus:outline-none focus:ring-2 focus:ring-accent rounded px-1 py-1">
+              <h4 class="font-bold text-accent" x-text="article.title"></h4>
+              <p class="text-xs text-text-dim mt-0.5" x-text="article.date"></p>
+            </a>
+          </div>
+        </template>
+      </div>
+
+      <!-- Empty state -->
+      <div
+        x-show="searchQuery && filteredArticles.length === 0"
+        class="mt-3 text-sm text-text-dim"
+        role="status"
+      >
+        {{ i18n "noSearchResults" }}
+      </div>
+    </div>
+
     <!-- Language switcher -->
     <div class="p-6">
       <div class="text-sm text-text-dim mb-3">{{ i18n "language" }}</div>
-- 
cgit v1.2.3