generated from boboko/starter
50 lines
2.3 KiB
PHP
50 lines
2.3 KiB
PHP
<header class="sticky top-0 z-50 bg-neutral-200 border-b border-black">
|
|
<div class="flex items-center gap-14 px-10">
|
|
|
|
{{-- Logo --}}
|
|
<a href="/" class="shrink-0">
|
|
<img src="/images/logo.png" alt="{{ config('app.name') }}" class="h-16 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="/products" class="nav-link uppercase inline-flex items-center gap-1 relative font-display font-extrabold italic text-black no-underline py-8">
|
|
<span>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="/category/{{ $category->id }}">
|
|
{{ $category->translateAttribute('name') }}
|
|
</a>
|
|
@endforeach --}}
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Contact --}}
|
|
<a href="/contact" class="nav-link uppercase inline-flex items-center gap-1 relative font-display font-extrabold italic text-black no-underline"><span>Contact</span></a>
|
|
|
|
</nav>
|
|
|
|
{{-- Right side actions --}}
|
|
<div class="ml-auto flex items-center gap-8">
|
|
|
|
{{-- Cart --}}
|
|
<a href="/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" class="flex items-center justify-center w-10 h-10 hover:opacity-70 transition-opacity" aria-label="Search">
|
|
<x-ui.icon name="search" :size="40" />
|
|
</button>
|
|
|
|
</div>
|
|
</div>
|
|
</header>
|