3dealer/resources/views/components/header.blade.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="{{ 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">
                    <span>{{ __('general.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="/category/{{ $category->id }}">
                            {{ $category->translateAttribute('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>{{ __('general.nav.contact') }}</span></a>

        </nav>

        {{-- Right side actions --}}
        <div class="ml-auto flex items-center gap-8">

            {{-- Language switcher --}}
            @isset($altLocale)
                <a href="{{ $altLocaleUrl }}" class="uppercase font-display font-extrabold text-sm hover:opacity-70 transition-opacity" hreflang="{{ $altLocale }}" aria-label="{{ $altLocale === 'el' ? 'Δες τη σελίδα στα Ελληνικά' : 'View this page in English' }}">
                    {{ $altLocale }}
                </a>
            @endisset

            {{-- 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" 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>