176 lines
8.0 KiB
PHP
176 lines
8.0 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{{ $title }} | {{ config('app.name') }}</title>
|
|
@vite(['resources/css/app.css', 'resources/js/app.js'])
|
|
@fluxAppearance
|
|
<link rel="icon" type="image/png" href="{{ asset('assets/images/logo.png') }}">
|
|
<link rel="preconnect" href="https://fonts.bunny.net">
|
|
<link href="https://fonts.bunny.net/css?family=inter:400,500,600&display=swap" rel="stylesheet" />
|
|
</head>
|
|
|
|
<body>
|
|
@include('components.sections.ui.home._header')
|
|
|
|
@persist('toast')
|
|
<flux:toast position="bottom end" class="ps-6" />
|
|
@endpersist
|
|
|
|
{{ $slot }}
|
|
@fluxScripts
|
|
|
|
<script>
|
|
document.addEventListener('livewire:navigated', () => {
|
|
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>
|
|
|
|
</body>
|
|
|
|
</html>
|