generated from boboko/starter
65 lines
3.0 KiB
PHP
65 lines
3.0 KiB
PHP
<header class="sticky top-0 z-50 bg-neutral-200 border-b border-black lg:h-26">
|
|
<div class="flex items-center gap-14 px-10">
|
|
|
|
{{-- Logo --}}
|
|
<a href="{{ url('/'.app()->getLocale()) }}" class="shrink-0 lg:py-4">
|
|
<img src="/images/logo.png" alt="{{ config('app.name') }}" class="h-18 w-auto">
|
|
</a>
|
|
|
|
{{-- Primary nav --}}
|
|
<nav class="flex items-center gap-6 h-full">
|
|
|
|
{{-- Products (CSS-only hover dropdown) --}}
|
|
<div class="group relative h-full flex items-center">
|
|
<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" />
|
|
</svg>
|
|
</a>
|
|
<div class="nav-dropdown">
|
|
@foreach($categories ?? [] as $category)
|
|
<a href="{{ route('category.show', ['id' => $category['id']]) }}">
|
|
{{ $category['name'] }}
|
|
</a>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Contact --}}
|
|
<a href="{{ route('contact') }}" class="nav-link uppercase inline-flex items-center gap-1 relative font-display font-extrabold italic text-black no-underline"><span>{{ __('storefront.nav.contact') }}</span></a>
|
|
|
|
</nav>
|
|
|
|
{{-- Right side actions --}}
|
|
<div class="ml-auto flex items-center gap-8">
|
|
|
|
{{-- Language switcher --}}
|
|
@foreach ($altLocales ?? [] as $altLocale)
|
|
<a href="{{ $altLocale['url'] }}" class="uppercase font-display font-extrabold text-sm hover:opacity-70 transition-opacity" hreflang="{{ $altLocale['code'] }}" aria-label="{{ $altLocale['name'] }}">
|
|
{{ $altLocale['code'] }}
|
|
</a>
|
|
@endforeach
|
|
|
|
{{-- Cart --}}
|
|
<a href="{{ url('/'.app()->getLocale().'/cart') }}" class="flex items-center justify-center w-10 h-10 hover:opacity-70 transition-opacity" aria-label="Cart">
|
|
<x-ui.icon name="bag" :size="40" />
|
|
</a>
|
|
|
|
{{-- 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>
|