diff options
Diffstat (limited to 'themes/danix-xyz-hacker/layouts')
| -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> |