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

<header id="navbar" x-data="{
    isOpen: false,
    scrolled: false,
    init() {
        this.scrolled = window.scrollY > 10;
        window.addEventListener('scroll', () => {
            this.scrolled = window.scrollY > 10;
        });
    }
}"
    :class="{
        'bg-white/40 backdrop-blur-md shadow-sm border-gray-200': scrolled && !isOpen,
        'bg-transparent': !scrolled || isOpen
    }"
    class="fixed top-0 left-0 w-full p-4 lg:px-10 flex justify-between items-center z-50 transition-all duration-200">

    <div class="flex lg:hidden items-center z-50">
        <button id="mobile-menu-btn" aria-label="Toggle Mobile Menu" :aria-expanded="isOpen" aria-controls="mobile-menu"
            @click="isOpen = !isOpen"
            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" x-show="!isOpen"
                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" x-show="isOpen" x-cloak
                class="size-6 text-white transition-transform duration-300">
                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
            </svg>
        </button>
    </div>

    <a href="{{ route('homepage') }}" wire:navigate 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="{
            'bg-white border-home-accent': scrolled && !isOpen,
            'bg-transparent border-home-foreground': !scrolled || isOpen
        }"
        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)
            <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>
        @endforeach
    </nav>

    <section class="flex items-center lg:gap-2 gap-1 z-50">
        @guest
            <a href="{{ route('login') }}" id="login" wire:navigate
                :class="{
                    'border-home-accent text-home-foreground bg-white': scrolled && !isOpen,
                    'border-home-foreground text-home-foreground': !scrolled || isOpen
                }"
                class="hidden lg:flex items-center border px-4 py-2 rounded-full transition-all duration-200 hover:scale-105 font-medium">
                Masuk
            </a>

            <a href="{{ route('profile.redirect') }}" id="profile-mobile" wire:navigate
                class="flex lg:hidden items-center rounded-full transition-all duration-200 lg:p-0 lg:border-0 hover:scale-110">
                <div id="profile-icon-mobile"
                    :class="{
                        'bg-white text-home-foreground': isOpen,
                        'bg-gray-100 text-home-foreground': scrolled && !isOpen,
                        'bg-home-foreground text-white': !scrolled && !isOpen
                    }"
                    class="w-8 h-8 lg:w-10 lg:h-10 flex justify-center items-center rounded-full transition-all duration-200">
                    <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">
                        <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>
            </a>
        @endguest

        @auth
            <a href="{{ route('profile.redirect') }}" 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="{
                        'bg-white text-home-foreground': isOpen,
                        'bg-gray-100 text-home-foreground': scrolled && !isOpen,
                        'bg-home-foreground text-white': !scrolled && !isOpen
                    }"
                    class="w-8 h-8 lg:w-10 lg:h-10 flex justify-center items-center rounded-full transition-all duration-200">
                    <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">
                        <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>
            </a>
        @endauth
    </section>

    <nav id="mobile-menu" x-show="isOpen" x-transition:enter="transition ease-out duration-300"
        x-transition:enter-start="opacity-0 transform -translate-y-4"
        x-transition:enter-end="opacity-100 transform translate-y-0"
        x-transition:leave="transition ease-in duration-200"
        x-transition:leave-start="opacity-100 transform translate-y-0"
        x-transition:leave-end="opacity-0 transform -translate-y-4" x-cloak
        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 shadow-2xl"
        aria-label="Mobile Navigation">

        @php
            $baseClass = 'text-3xl transition-colors';
            $activeClass = 'font-bold text-home-primary';
            $inactiveClass = 'text-white hover:text-gray-300 hover:opacity-80';
        @endphp

        <a href="{{ route('homepage') }}" wire:navigate @click="isOpen = false"
            class="{{ $baseClass }} {{ request()->routeIs('homepage') ? $activeClass : $inactiveClass }}">
            Beranda
        </a>

        <a href="{{ route('outlet') }}" wire:navigate @click="isOpen = false"
            class="{{ $baseClass }} {{ request()->routeIs('outlet') ? $activeClass : $inactiveClass }}">
            Outlet
        </a>

        <a href="{{ route('product.index') }}" wire:navigate @click="isOpen = false"
            class="{{ $baseClass }} {{ request()->routeIs('product.*') ? $activeClass : $inactiveClass }}">
            Produk
        </a>

        <a href="{{ route('voucher') }}" wire:navigate @click="isOpen = false"
            class="{{ $baseClass }} {{ request()->routeIs('voucher') ? $activeClass : $inactiveClass }}">
            Voucher
        </a>

        <a href="{{ route('article.index') }}" wire:navigate @click="isOpen = false"
            class="{{ $baseClass }} {{ request()->routeIs('article.*') ? $activeClass : $inactiveClass }}">
            Artikel
        </a>

        <a href="{{ route('faq') }}" wire:navigate @click="isOpen = false"
            class="{{ $baseClass }} {{ request()->routeIs('faq') ? $activeClass : $inactiveClass }}">
            FAQ
        </a>
    </nav>
</header>