parfum/resources/views/components/sections/ui/home/_header.blade.php

<header id="navbar"
    class="fixed top-0 left-0 w-full p-4 lg:px-10 flex justify-between items-center z-50 transition-all duration-200 bg-transparent">

    <div class="flex lg:hidden items-center z-50">
        <button id="mobile-menu-btn" aria-label="Toggle Mobile Menu" aria-expanded="false" aria-controls="mobile-menu"
            class="rounded-full w-10 h-10 flex items-center justify-center hover:bg-white/10 transition-colors relative group">

            <svg id="hamburger-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                stroke-width="1.5" stroke="currentColor"
                class="size-6 text-home-foreground transition-colors duration-300">
                <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
            </svg>

            <svg id="close-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                stroke-width="1.5" stroke="currentColor"
                class="size-6 text-white hidden transition-transform duration-300">
                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
            </svg>
        </button>
    </div>

    <a href="/" class="flex items-center ml-8 lg:ml-0 z-50">
        <img src="{{ asset('assets/images/logo.png') }}" alt="Logo"
            class="w-10 h-8 lg:w-16 lg:h-12 transition-all duration-200">
    </a>

    <nav id="nav-links"
        class="hidden lg:flex items-center gap-6 font-medium px-8 py-3 rounded-full transition-all duration-200 border text-home-foreground"
        aria-label="Main Navigation">
        @foreach ($header as $item)
            @if ($item['type'] === 'link')
                <a href="{{ route($item['route']) }}"
                    class="{{ request()->routeIs($item['route']) ? 'font-bold text-home-primary' : 'hover:opacity-80' }} transition-opacity"
                    wire:navigate>
                    {{ $item['title'] }}
                </a>
            @endif

            @if ($item['type'] === 'dropdown')
                <div class="relative group">
                    <button wire:click="{{ $item['action'] }}"
                        class="flex items-center gap-2 hover:opacity-80 transition-opacity">
                        <span>{{ $item['title'] }}</span>
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                            stroke="currentColor"
                            class="size-4 group-hover:rotate-180 transition-transform duration-300">
                            <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
                        </svg>
                    </button>

                    <div class="absolute left-0 top-full hidden group-hover:block pt-2 w-40">
                        <div class="bg-white/95 backdrop-blur-md shadow-lg rounded-lg py-2 border border-gray-200">
                            @foreach ($item['items'] as $sub)
                                <a href="{{ $sub['route'] }}"
                                    class="block px-4 py-2 hover:bg-gray-50 transition-colors">
                                    {{ $sub['title'] }}
                                </a>
                            @endforeach
                        </div>
                    </div>
                </div>
            @endif
        @endforeach
    </nav>

    <section class="flex items-center lg:gap-2 gap-1 z-50">
        <button id="cart"
            class="flex items-center rounded-full transition-all duration-200 border border-home-foreground lg:p-0 hover:scale-110">
            <div id="cart-icon"
                class="w-8 h-8 lg:w-10 lg:h-10 flex justify-center items-center rounded-full transition-all duration-200 text-white bg-home-foreground">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
                    stroke="currentColor" class="size-4 lg:size-6 transition-all duration-200" id="cart-svg">
                    <path stroke-linecap="round" stroke-linejoin="round"
                        d="M15.75 10.5V6a3.75 3.75 0 1 0-7.5 0v4.5m11.356-1.993 1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 0 1-1.12-1.243l1.264-12A1.125 1.125 0 0 1 5.513 7.5h12.974c.576 0 1.059.435 1.119 1.007ZM8.625 10.5a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm7.5 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" />
                </svg>
            </div>
            <span class="ms-2 me-3 transition-all duration-200 hidden lg:block text-home-foreground">Keranjang</span>
        </button>

        <button id="login"
            class="hidden lg:flex items-center border px-4 py-2 rounded-full transition-all duration-200 hover:scale-105 font-medium border-home-foreground text-home-foreground">
            Masuk
        </button>

        <button id="profile"
            class="flex items-center rounded-full transition-all duration-200 lg:p-0 lg:border-0 hover:scale-110">
            <div id="profile-icon"
                class="w-8 h-8 lg:w-10 lg:h-10 flex justify-center items-center rounded-full transition-all duration-200 text-white bg-home-foreground">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
                    stroke="currentColor" class="size-4 lg:size-6 transition-all duration-200" id="profile-svg">
                    <path stroke-linecap="round" stroke-linejoin="round"
                        d="M17.982 18.725A7.488 7.488 0 0 0 12 15.75a7.488 7.488 0 0 0-5.982 2.975m11.963 0a9 9 0 1 0-11.963 0m11.963 0A8.966 8.966 0 0 1 12 21a8.966 8.966 0 0 1-5.982-2.275M15 9.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
                </svg>
            </div>
        </button>
    </section>

    <nav id="mobile-menu"
        class="fixed inset-0 h-screen w-screen bg-home-foreground/80 backdrop-blur-md z-40 flex flex-col items-center justify-center gap-8 hidden transition-all duration-200 opacity-0"
        aria-label="Mobile Navigation">

        <a href="#" class="text-3xl font-bold text-white hover:text-gray-300 transition-colors">Beranda</a>
        <a href="#" class="text-3xl font-bold text-white hover:text-gray-300 transition-colors">Outlet</a>

        <div class="flex flex-col items-center gap-4">
            <span class="text-3xl font-bold text-white">Produk</span>
            <div class="flex gap-4 text-gray-400">
                <a href="#" class="hover:text-white">Parfum</a>
                <span class="text-gray-600">•</span>
                <a href="#" class="hover:text-white">Botol</a>
                <span class="text-gray-600">•</span>
                <a href="#" class="hover:text-white">Arabian</a>
            </div>
        </div>

        <a wire:click="goToVoucher"
            class="text-3xl font-bold text-white hover:text-gray-300 transition-colors cursor-pointer">Voucher</a>
        <a href="#" class="text-3xl font-bold text-white hover:text-gray-300 transition-colors">Artikel</a>
        <a href="#" class="text-3xl font-bold text-white hover:text-gray-300 transition-colors">FAQ</a>

        <button
            class="mt-8 px-8 py-3 bg-white text-home-foreground font-bold rounded-full hover:bg-gray-100 transition-all shadow-lg hover:shadow-white/20">
            Get CV
        </button>
    </nav>
</header>