generated from boboko/starter
42 lines
1.7 KiB
PHP
42 lines
1.7 KiB
PHP
|
{{--
|
||
|
|
Full-width search bar that covers the header. A [popover] (top layer, so it
|
||
|
|
sits over the sticky header with no z-index juggling; Escape and click-away
|
||
|
|
close come for free). The header's search button opens it via popovertarget.
|
||
|
|
The `nav-search` controller measures the header on open (→ --search-overlay-h,
|
||
|
|
since the header isn't a fixed height below `lg`) and focuses the field.
|
||
|
|
Fade transition lives in app.css (#search-overlay).
|
||
|
|
--}}
|
||
|
|
<div
|
||
|
|
id="search-overlay"
|
||
|
|
popover
|
||
|
|
data-controller="nav-search"
|
||
|
|
class="fixed w-full inset-x-0 top-0 bottom-auto m-0 h-[var(--search-overlay-h)] border-0 bg-brand p-0"
|
||
|
|
>
|
||
|
|
<form
|
||
|
|
method="get"
|
||
|
|
action="{{ route('search') }}"
|
||
|
|
class="flex h-full items-center gap-6 px-10"
|
||
|
|
>
|
||
|
|
<label for="search-overlay-input" class="sr-only">{{ __('storefront.shop.search_label') }}</label>
|
||
|
|
<input
|
||
|
|
id="search-overlay-input"
|
||
|
|
type="search"
|
||
|
|
name="q"
|
||
|
|
required
|
||
|
|
autocomplete="off"
|
||
|
|
data-nav-search-target="input"
|
||
|
|
placeholder="{{ __('storefront.search.placeholder') }}"
|
||
|
|
class="min-w-0 flex-1 appearance-none border-0 border-b border-black bg-transparent pb-2 placeholder:text-black/60 focus:outline-none [&::-webkit-search-cancel-button]:appearance-none"
|
||
|
|
>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
popovertarget="search-overlay"
|
||
|
|
popovertargetaction="hide"
|
||
|
|
aria-label="{{ __('storefront.nav.close') }}"
|
||
|
|
class="shrink-0 text-black transition-opacity hover:opacity-70"
|
||
|
|
>
|
||
|
|
<x-ui.icon name="close" :size="44" />
|
||
|
|
</button>
|
||
|
|
</form>
|
||
|
|
</div>
|