general products page and small rewrite of search and category controllers etc

resources/views/components/header.blade.php

@@ -11,7 +11,7 @@
 
             {{-- Products (CSS-only hover dropdown) --}}
             <div class="group relative h-full flex items-center">
-                <a href="{{ url('/'.app()->getLocale().'/products') }}" class="nav-link uppercase inline-flex items-center gap-1 relative font-display  font-extrabold italic text-black no-underline py-8">
+                <a href="{{ route('products') }}" class="nav-link uppercase inline-flex items-center gap-1 relative font-display  font-extrabold italic text-black no-underline py-8">
                     <span>{{ __('storefront.nav.products') }}</span>
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-4 not-italic transition-transform group-hover:rotate-180">
                         <path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />
@@ -47,10 +47,18 @@
             </a>
 
             {{-- Search --}}
-            <button type="button" class="flex items-center justify-center w-10 h-10 hover:opacity-70 transition-opacity" aria-label="Search">
+            <button
+                type="button"
+                popovertarget="search-overlay"
+                popovertargetaction="toggle"
+                class="flex items-center justify-center w-10 h-10 hover:opacity-70 transition-opacity"
+                aria-label="{{ __('storefront.shop.search_label') }}"
+            >
                 <x-ui.icon name="search" :size="40" />
             </button>
 
         </div>
     </div>
+
+    <x-search-overlay />
 </header>