]> danix's work - danix.xyz-2.git/commitdiff
feat: add search icon button to desktop header
authorDanilo M. <redacted>
Mon, 20 Apr 2026 11:56:23 +0000 (13:56 +0200)
committerDanilo M. <redacted>
Mon, 20 Apr 2026 11:56:23 +0000 (13:56 +0200)
Adds magnifying glass icon in header right controls area (desktop only, hidden md:flex). Dispatches 'open-search' event to trigger search modal. Includes proper focus ring styling and accessibility labels.

Co-Authored-By: Claude Haiku 4.5 <redacted>
themes/danix-xyz-hacker/layouts/partials/header.html

index e3657778d6d6f52721d78653f96ecd063b644bac..63151ba5e09442b1dae00b85b46b9b4390a5abdb 100644 (file)
       {{ end }}
     </div>
 
-    <!-- Right side controls: Language, Theme, Menu -->
+    <!-- Right side controls: Search, Language, Theme, Menu -->
     <div class="flex items-center gap-4 md:gap-6">
+      <!-- Search button (desktop only) -->
+      <button
+        @click="$dispatch('open-search')"
+        aria-label="{{ i18n "searchArticles" }}"
+        class="hidden md:flex p-2 rounded hover:bg-surface transition-colors focus:outline-none focus:ring-2 focus:ring-accent"
+      >
+        <i data-feather="search" class="w-5 h-5" aria-hidden="true"></i>
+      </button>
+
       <!-- Language switcher (desktop) -->
       <div class="hidden md:flex gap-2">
         {{ $currentLang := .Page.Language }}