181 lines
11 KiB
PHP
181 lines
11 KiB
PHP
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
document.querySelectorAll('img:not([loading])')
|
|
.forEach(img => img.loading = 'lazy');
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
.text-flow-effect {
|
|
background: linear-gradient(75deg,
|
|
hsl(178, 46.40%, 11.00%) 0%,
|
|
hsl(211, 57.80%, 17.60%) 30%,
|
|
hsl(220, 98%, 61%) 45%,
|
|
hsl(207, 53.00%, 50.80%) 55%,
|
|
hsl(214, 82.50%, 31.40%) 70%,
|
|
hsl(222, 47%, 11%) 100%);
|
|
background-size: 400% auto;
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
animation: textFlowAnimation 8s linear infinite;
|
|
}
|
|
|
|
@keyframes textFlowAnimation {
|
|
to {
|
|
background-position: 400% center;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<nav class="w-full px-4 lg:px-8 bg-background-secondary border-b border-neutral flex flex-col lg:flex-row justify-between fixed top-0 z-20 h-auto">
|
|
<div x-data="{ slideOverOpen: false }"
|
|
x-init="$watch('slideOverOpen', value => { document.documentElement.style.overflow = value ? 'hidden' : '' })"
|
|
class="relative z-50 w-full h-auto">
|
|
|
|
<div class="flex flex-row items-center justify-between w-full h-16">
|
|
|
|
<!-- Logo -->
|
|
<div class="flex flex-row items-center">
|
|
<a href="{{ route('home') }}" class="flex items-center h-10 gap-2" wire:navigate>
|
|
<x-logo class="h-10" />
|
|
<span class="text-xl font-bold leading-none flex items-center text-flow-effect">{{ config('app.name') }}</span>
|
|
</a>
|
|
|
|
<!-- Desktop menu: lg and above -->
|
|
<div class="hidden lg:flex flex-row ml-7">
|
|
@foreach (\App\Classes\Navigation::getLinks() as $nav)
|
|
@if (isset($nav['children']) && count($nav['children']) > 0)
|
|
<div class="relative">
|
|
<x-dropdown>
|
|
<x-slot:trigger>
|
|
<span class="flex flex-row items-center p-3 text-sm font-semibold whitespace-nowrap text-base hover:text-base/80">{{ $nav['name'] }}</span>
|
|
</x-slot:trigger>
|
|
<x-slot:content>
|
|
@foreach ($nav['children'] as $child)
|
|
<x-navigation.link :href="route($child['route'], $child['params'] ?? null)"
|
|
:spa="isset($child['spa']) ? $nav['spa'] : true">
|
|
{{ $child['name'] }}
|
|
</x-navigation.link>
|
|
@endforeach
|
|
</x-slot:content>
|
|
</x-dropdown>
|
|
</div>
|
|
@else
|
|
<x-navigation.link :href="route($nav['route'], $nav['params'] ?? null)"
|
|
:spa="isset($nav['spa']) ? $nav['spa'] : true"
|
|
class="flex items-center px-4 py-2">
|
|
{{ $nav['name'] }}
|
|
</x-navigation.link>
|
|
@endif
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right-side controls -->
|
|
<div class="flex items-center gap-3">
|
|
|
|
<!-- Desktop-only: md/lg controls -->
|
|
<!--<div class="hidden lg:flex items-center gap-2">
|
|
<x-dropdown>
|
|
<x-slot:trigger>
|
|
<span class="text-sm font-semibold">{{ strtoupper(app()->getLocale()) }} <span class="text-base/50">|</span> {{ session('currency', config('settings.default_currency')) }}</span>
|
|
</x-slot:trigger>
|
|
<x-slot:content>
|
|
<strong class="block p-2 text-xs font-semibold uppercase text-base/50">Language</strong>
|
|
<livewire:components.language-switch />
|
|
<livewire:components.currency-switch />
|
|
</x-slot:content>
|
|
</x-dropdown>
|
|
<x-theme-toggle />
|
|
</div>-->
|
|
|
|
<livewire:components.cart />
|
|
|
|
<!-- User account -->
|
|
@if(auth()->check())
|
|
<div class="relative hidden lg:block" x-data="{ open: false }">
|
|
<button @click="open = !open" class="flex items-center gap-3 p-2 rounded-lg transition-all duration-200 group">
|
|
<div class="relative">
|
|
<img src="{{ auth()->user()->avatar }}" class="w-10 h-10 rounded-full border-2 border-background-secondary group-hover:border-blue-500 transition-all duration-300 shadow-lg" alt="avatar" />
|
|
<div class="absolute -bottom-0.5 -right-0.5 w-4 h-4 bg-green-500 rounded-full border-2 border-background shadow-lg" x-show="isOnline" x-transition:enter="transition-all duration-300" x-transition:enter-start="scale-0 opacity-0" x-transition:enter-end="scale-100 opacity-100">
|
|
<div class="w-full h-full bg-green-400 rounded-full animate-ping"></div>
|
|
</div>
|
|
</div>
|
|
<div class="hidden lg:block text-left">
|
|
<div class="text-sm font-bold">{{ Auth::user()->first_name }}</div>
|
|
<div class="text-xs">{{ auth()->user()->email }}</div>
|
|
</div>
|
|
<svg class="w-4 h-4 transform transition-transform duration-200" :class="{ 'rotate-180': open }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
|
</svg>
|
|
</button>
|
|
|
|
<div x-show="open" x-transition ... @click.away="open = false" class="absolute right-0 mt-2 w-72 bg-background-secondary border border-neutral rounded-2xl shadow-2xl z-50">
|
|
<div class="p-4 border-b border-neutral">
|
|
<div class="flex items-center gap-3">
|
|
<img src="{{ auth()->user()->avatar }}" class="rounded-full border-2 border-neutral" alt="avatar" />
|
|
<div>
|
|
<div class="font-medium text-base">{{ auth()->user()->name }}</div>
|
|
<div class="text-sm text-base">{{ auth()->user()->email }}</div>
|
|
<div class="text-xs text-green-400 font-medium">● Online</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="py-2">
|
|
@foreach (\App\Classes\Navigation::getAccountDropdownLinks() as $nav)
|
|
<x-navigation.link :href="route($nav['route'], $nav['params'] ?? null)" :spa="isset($nav['spa']) ? $nav['spa'] : true" class="flex items-center gap-3 px-4 py-3 text-sm text-base hover:bg-background transition-all duration-200">
|
|
{{ $nav['name'] }}
|
|
</x-navigation.link>
|
|
@endforeach
|
|
<div class="px-1">
|
|
<livewire:auth.logout />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@else
|
|
<div class="hidden lg:flex items-center gap-3">
|
|
<a href="{{ route('login') }}" wire:navigate>
|
|
<button class="px-4 py-2 text-sm font-medium text-base border border-neutral hover:text-white hover:bg-primary rounded-lg transition-all duration-200">
|
|
{{ __('navigation.login') }}
|
|
</button>
|
|
</a>
|
|
@if(!config('settings.registration_disabled', false))
|
|
<a href="{{ route('register') }}" wire:navigate>
|
|
<button class="px-4 py-2 text-sm font-medium text-white bg-gradient-to-r from-primary to-secondary hover:from-primary/50 hover:to-secondary/50 rounded-lg transition-all duration-200 shadow-lg hover:shadow-xl transform hover:scale-105">
|
|
{{ __('navigation.register') }}
|
|
</button>
|
|
</a>
|
|
@endif
|
|
</div>
|
|
@endif
|
|
|
|
<!-- Mobile menu toggle -->
|
|
<button @click="slideOverOpen = !slideOverOpen" class="relative w-12 h-12 flex lg:hidden items-center justify-center rounded-xl bg-background hover:bg-neutral/50 transition-all duration-300 group" aria-label="Toggle Menu">
|
|
<span x-show="!slideOverOpen" x-transition ... class="absolute inset-0 flex items-center justify-center">
|
|
<x-ri-menu-fill class="size-6 text-base/80 group-hover:text-foreground transition-colors duration-200" />
|
|
</span>
|
|
<span x-show="slideOverOpen" x-transition ... class="absolute inset-0 flex items-center justify-center">
|
|
<x-ri-close-fill class="size-6 text-base/80 group-hover:text-foreground transition-colors duration-200" />
|
|
</span>
|
|
</button>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mobile slide-over menu (<1024px) -->
|
|
<template x-teleport="body">
|
|
<div x-show="slideOverOpen" @keydown.window.escape="slideOverOpen=false" x-cloak class="fixed left-0 right-0 top-20 w-full z-[99]" style="height:calc(100dvh - 5rem);" aria-modal="true">
|
|
<div x-show="slideOverOpen" x-transition ... @click.away="slideOverOpen = false" class="absolute inset-0 bg-background-secondary/80 backdrop-blur-md border-t border-neutral/50 shadow-2xl overflow-y-auto flex flex-col rounded-t-2xl">
|
|
<div class="flex flex-col h-full p-6">
|
|
<div class="flex-1 min-h-0 overflow-y-auto">
|
|
<x-navigation.sidebar-links />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
</div>
|
|
</nav> |