generated from boboko/starter
96 lines
4.5 KiB
PHP
96 lines
4.5 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
|
|
|
|
{{-- Wishlist — the account page, or the cookie-based guest page --}}
|
|
<a
|
|
href="{{ auth()->check() ? route('account.wishlist') : route('wishlist') }}"
|
|
class="flex items-center justify-center w-10 h-10 hover:opacity-70 transition-opacity"
|
|
aria-label="{{ __('storefront.account.nav_wishlist') }}"
|
|
@if (request()->routeIs('account.wishlist', 'wishlist')) aria-current="page" @endif
|
|
>
|
|
<x-ui.icon name="heart" :size="40" />
|
|
</a>
|
|
|
|
{{-- Account — the account page, or login for guests --}}
|
|
<a
|
|
href="{{ auth()->check() ? route('account') : route('login') }}"
|
|
class="flex items-center justify-center w-10 h-10 hover:opacity-70 transition-opacity"
|
|
aria-label="{{ auth()->check() ? __('storefront.nav.account') : __('storefront.auth.login') }}"
|
|
>
|
|
<x-ui.icon name="user" :size="40" />
|
|
</a>
|
|
|
|
{{-- Cart — opens the checkout module's drawer, no separate cart page --}}
|
|
<button
|
|
type="button"
|
|
class="relative flex items-center justify-center w-10 h-10 hover:opacity-70 transition-opacity"
|
|
aria-label="Cart"
|
|
aria-haspopup="dialog"
|
|
data-controller="cart-count"
|
|
data-action="cart-count#open"
|
|
>
|
|
<x-ui.icon name="bag" :size="40" />
|
|
<span
|
|
data-cart-count-target="badge"
|
|
class="absolute -top-1 -right-1 min-w-5 h-5 px-1 rounded-full bg-black text-neutral-200 text-xs font-bold flex items-center justify-center"
|
|
hidden
|
|
>0</span>
|
|
</button>
|
|
|
|
{{-- 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>
|