diff options
| author | Danilo M. <danix@danix.xyz> | 2026-04-20 13:57:10 +0200 |
|---|---|---|
| committer | Danilo M. <danix@danix.xyz> | 2026-04-20 13:57:10 +0200 |
| commit | e251d37a17ff00079d14fd30f7f4cd313fba4214 (patch) | |
| tree | 7a9f9c75079aa09585bf72c1b92112b2122616df | |
| parent | 37a05e2630d48eb644460ab5b33b5bce189cb836 (diff) | |
| download | danixxyz-e251d37a17ff00079d14fd30f7f4cd313fba4214.tar.gz danixxyz-e251d37a17ff00079d14fd30f7f4cd313fba4214.zip | |
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>
| -rw-r--r-- | themes/danix-xyz-hacker/layouts/partials/hamburger-menu.html | 37 |
1 files changed, 37 insertions, 0 deletions
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> |