261 lines
13 KiB
PHP
261 lines
13 KiB
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">
|
|
|
|
<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-black 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-500">
|
|
</a>
|
|
|
|
<nav id="nav-links"
|
|
class="hidden lg:flex items-center gap-6 font-medium px-8 py-3 rounded-full transition-all duration-500 border"
|
|
aria-label="Main Navigation">
|
|
<a href="#" class="hover:opacity-80 transition-opacity">Beranda</a>
|
|
<a href="#" class="hover:opacity-80 transition-opacity">Outlet</a>
|
|
<div class="relative group">
|
|
<button wire:click="goToProduct" class="flex items-center gap-2 hover:opacity-80 transition-opacity">
|
|
<span>Produk</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">
|
|
<a href="#" class="block px-4 py-2 hover:bg-gray-50 transition-colors">Parfum</a>
|
|
<a href="#" class="block px-4 py-2 hover:bg-gray-50 transition-colors">Botol</a>
|
|
<a href="#" class="block px-4 py-2 hover:bg-gray-50 transition-colors">Arabian</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<a wire:click="goToVoucher" class="hover:opacity-80 transition-opacity cursor-pointer">Voucher</a>
|
|
<a href="#" class="hover:opacity-80 transition-opacity">Artikel</a>
|
|
<a href="#" class="hover:opacity-80 transition-opacity">FAQ</a>
|
|
</nav>
|
|
|
|
<section class="flex items-center lg:gap-3 z-50">
|
|
<button id="cart"
|
|
class="flex items-center rounded-full transition-all duration-500 border lg:p-0 lg:border-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-500">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
|
stroke="currentColor" class="size-4 lg:size-6 transition-all duration-500" 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-500 hidden lg:block">Keranjang</span>
|
|
</button>
|
|
|
|
<button id="login"
|
|
class="hidden lg:flex items-center border px-4 py-2 rounded-full ms-2 transition-all duration-500 hover:scale-105 font-medium">
|
|
Masuk
|
|
</button>
|
|
|
|
<button id="profile"
|
|
class="flex items-center rounded-full transition-all duration-500 p-2 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-500">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
|
stroke="currentColor" class="size-4 lg:size-6 transition-all duration-500" 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-black/80 backdrop-blur-md z-40 flex flex-col items-center justify-center gap-8 hidden transition-all duration-500 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-black font-bold rounded-full hover:bg-gray-100 transition-all shadow-lg hover:shadow-white/20">
|
|
Get CV
|
|
</button>
|
|
</nav>
|
|
</header>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const navbar = document.getElementById('navbar');
|
|
const navLinks = document.getElementById('nav-links');
|
|
const cart = document.getElementById('cart');
|
|
const login = document.getElementById('login');
|
|
const profile = document.getElementById('profile');
|
|
const cartIcon = document.getElementById('cart-icon');
|
|
const cartSvg = document.getElementById('cart-svg');
|
|
const profileIcon = document.getElementById('profile-icon');
|
|
const profileSvg = document.getElementById('profile-svg');
|
|
|
|
const mobileBtn = document.getElementById('mobile-menu-btn');
|
|
const mobileMenu = document.getElementById('mobile-menu');
|
|
const hamburgerIcon = document.getElementById('hamburger-icon');
|
|
const closeIcon = document.getElementById('close-icon');
|
|
|
|
function setIconsLight() {
|
|
cartIcon.classList.remove('bg-black', 'bg-gray-100');
|
|
cartIcon.classList.add('bg-white');
|
|
cartSvg.classList.remove('text-white', 'text-gray-800');
|
|
cartSvg.classList.add('text-black');
|
|
|
|
profileIcon.classList.remove('bg-black', 'bg-gray-100');
|
|
profileIcon.classList.add('bg-white');
|
|
profileSvg.classList.remove('text-white', 'text-gray-800');
|
|
profileSvg.classList.add('text-black');
|
|
}
|
|
|
|
function setIconsDark() {
|
|
cartIcon.classList.add('bg-black');
|
|
cartIcon.classList.remove('bg-white', 'bg-gray-100');
|
|
cartSvg.classList.add('text-white');
|
|
cartSvg.classList.remove('text-black', 'text-gray-800');
|
|
|
|
profileIcon.classList.add('bg-black');
|
|
profileIcon.classList.remove('bg-white', 'bg-gray-100');
|
|
profileSvg.classList.add('text-white');
|
|
profileSvg.classList.remove('text-black', 'text-gray-800');
|
|
}
|
|
|
|
function setIconsScrolled() {
|
|
cartIcon.classList.add('bg-gray-100');
|
|
cartIcon.classList.remove('bg-black', 'bg-white');
|
|
cartSvg.classList.add('text-gray-800');
|
|
cartSvg.classList.remove('text-white', 'text-black');
|
|
|
|
profileIcon.classList.add('bg-gray-100');
|
|
profileIcon.classList.remove('bg-black', 'bg-white');
|
|
profileSvg.classList.add('text-gray-800');
|
|
profileSvg.classList.remove('text-white', 'text-black');
|
|
}
|
|
|
|
mobileBtn.addEventListener('click', () => {
|
|
const isClosed = mobileMenu.classList.contains('hidden');
|
|
|
|
if (isClosed) {
|
|
mobileMenu.classList.remove('hidden');
|
|
void mobileMenu.offsetWidth;
|
|
mobileMenu.classList.remove('opacity-0');
|
|
mobileMenu.classList.add('opacity-100');
|
|
|
|
hamburgerIcon.classList.add('hidden');
|
|
closeIcon.classList.remove('hidden');
|
|
mobileBtn.setAttribute('aria-expanded', 'true');
|
|
|
|
navbar.classList.remove('bg-white/40', 'backdrop-blur-md', 'shadow-sm',
|
|
'border-gray-200');
|
|
navbar.classList.add('bg-transparent');
|
|
|
|
setIconsLight();
|
|
|
|
} else {
|
|
mobileMenu.classList.remove('opacity-100');
|
|
mobileMenu.classList.add('opacity-0');
|
|
|
|
setTimeout(() => {
|
|
mobileMenu.classList.add('hidden');
|
|
}, 500);
|
|
|
|
hamburgerIcon.classList.remove('hidden');
|
|
closeIcon.classList.add('hidden');
|
|
mobileBtn.setAttribute('aria-expanded', 'false');
|
|
|
|
const scrolled = window.scrollY > 10;
|
|
if (scrolled) {
|
|
navbar.classList.add('bg-white/40', 'backdrop-blur-md', 'shadow-sm',
|
|
'border-gray-200');
|
|
navbar.classList.remove('bg-transparent');
|
|
setIconsScrolled();
|
|
} else {
|
|
navbar.classList.add('bg-transparent');
|
|
navbar.classList.remove('bg-white/40', 'backdrop-blur-md', 'shadow-sm',
|
|
'border-gray-200');
|
|
setIconsDark();
|
|
}
|
|
}
|
|
});
|
|
|
|
window.addEventListener('scroll', () => {
|
|
const isMenuOpen = !mobileMenu.classList.contains('hidden');
|
|
if (isMenuOpen) return;
|
|
|
|
const scrolled = window.scrollY > 10;
|
|
|
|
if (scrolled) {
|
|
navbar.classList.add('bg-white/40', 'backdrop-blur-md', 'shadow-sm', 'border-gray-200');
|
|
navbar.classList.remove('bg-transparent');
|
|
|
|
navLinks.classList.add('bg-white', 'border-gray-300', 'text-black');
|
|
navLinks.classList.remove('bg-transparent', 'border-black', 'text-black');
|
|
|
|
cart.classList.add('border-gray-300', 'bg-white');
|
|
cart.classList.remove('border-black');
|
|
cart.querySelector('span').classList.add('text-gray-800');
|
|
|
|
login.classList.add('border-gray-300', 'text-gray-800', 'bg-white');
|
|
login.classList.remove('border-black', 'text-black');
|
|
|
|
profile.classList.add('border-gray-300');
|
|
profile.classList.remove('border-black');
|
|
|
|
setIconsScrolled();
|
|
} else {
|
|
navbar.classList.add('bg-transparent');
|
|
navbar.classList.remove('bg-white/40', 'backdrop-blur-md', 'shadow-sm', 'border-b',
|
|
'border-gray-200');
|
|
|
|
navLinks.classList.add('bg-transparent', 'border-black', 'text-black');
|
|
navLinks.classList.remove('bg-white', 'border-gray-300');
|
|
|
|
cart.classList.add('border-black');
|
|
cart.classList.remove('border-gray-300', 'bg-white');
|
|
cart.querySelector('span').classList.remove('text-gray-800');
|
|
cart.querySelector('span').classList.add('text-black');
|
|
|
|
login.classList.add('border-black', 'text-black');
|
|
login.classList.remove('border-gray-300', 'text-gray-800', 'bg-white');
|
|
|
|
profile.classList.add('border-black');
|
|
profile.classList.remove('border-gray-300');
|
|
|
|
setIconsDark();
|
|
}
|
|
});
|
|
});
|
|
</script>
|