186 lines
12 KiB
PHP
186 lines
12 KiB
PHP
<div class="lg:px-4 lg:py-6 flex flex-col gap-3 h-full">
|
|
<div class="flex flex-col gap-2">
|
|
@foreach (\App\Classes\Navigation::getLinks() as $nav)
|
|
@if (!empty($nav['children']))
|
|
<div x-data="{ activeAccordion: {{ $nav['active'] ? 'true' : 'false' }} }"
|
|
class="relative w-full overflow-hidden text-sm font-medium">
|
|
<div class="cursor-pointer">
|
|
<button @click="activeAccordion = !activeAccordion"
|
|
class="flex items-center justify-between w-full p-3 text-sm font-semibold whitespace-nowrap rounded-lg
|
|
hover:bg-primary/10 transition-colors duration-200 {{ $nav['active'] ? 'text-primary bg-primary/5' : 'text-color-base' }}">
|
|
<div class="flex items-center gap-3">
|
|
@isset($nav['icon'])
|
|
<x-dynamic-component :component="$nav['icon']"
|
|
class="size-5 {{ $nav['active'] ? 'text-primary' : 'text-color-muted' }}" />
|
|
@endisset
|
|
<span>{{ $nav['name'] }}</span>
|
|
</div>
|
|
<x-ri-arrow-down-s-line x-bind:class="{ 'rotate-180': activeAccordion }"
|
|
class="size-5 text-color-muted transition-transform duration-300" />
|
|
</button>
|
|
<div x-show="activeAccordion" x-collapse x-cloak>
|
|
<div class="py-2 pl-8 pr-4 border-l-2 border-primary/50 ml-4 opacity-90">
|
|
@foreach ($nav['children'] as $child)
|
|
<div class="flex items-center py-1">
|
|
<x-navigation.link :href="route($child['route'], $child['params'] ?? [])"
|
|
:spa="$child['spa'] ?? true"
|
|
class="block w-full p-2 rounded-md transition-colors duration-200
|
|
{{ $child['active'] ? 'text-primary font-bold bg-primary/10' : 'text-color-muted hover:bg-primary/5' }}">
|
|
{{ $child['name'] }}
|
|
</x-navigation.link>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@else
|
|
<x-navigation.link :href="route($nav['route'], $nav['params'] ?? [])"
|
|
:spa="$nav['spa'] ?? true"
|
|
class="flex items-center gap-3 p-3 rounded-lg transition-colors duration-200 w-full
|
|
{{ $nav['active'] ? 'bg-primary/10 text-primary font-semibold' : 'hover:bg-primary/5 text-color-base' }}">
|
|
@isset($nav['icon'])
|
|
<x-dynamic-component :component="$nav['icon']"
|
|
class="size-5 {{ $nav['active'] ? 'text-primary' : 'text-color-muted' }}" />
|
|
@endisset
|
|
<span>{{ $nav['name'] }}</span>
|
|
</x-navigation.link>
|
|
@endif
|
|
@isset($nav['separator'])
|
|
<div class="h-px w-full bg-neutral/50 my-2"></div>
|
|
@endisset
|
|
@endforeach
|
|
</div>
|
|
|
|
{{-- Separator between main navigation and dashboard navigation --}}
|
|
@auth
|
|
<div class="h-px w-full bg-neutral/50 my-2"></div>
|
|
@endauth
|
|
|
|
{{-- Dashboard Navigation Section --}}
|
|
<div class="flex flex-col gap-2 flex-grow">
|
|
@foreach (\App\Classes\Navigation::getDashboardLinks() as $nav)
|
|
@if (!empty($nav['children']))
|
|
<div x-data="{ activeAccordion: {{ $nav['active'] ? 'true' : 'false' }} }"
|
|
class="relative w-full overflow-hidden text-sm font-medium">
|
|
<div class="cursor-pointer">
|
|
<button @click="activeAccordion = !activeAccordion"
|
|
class="flex items-center justify-between w-full p-3 text-sm font-semibold whitespace-nowrap rounded-lg
|
|
hover:bg-primary/10 transition-colors duration-200 {{ $nav['active'] ? 'text-primary bg-primary/5' : 'text-color-base' }}">
|
|
<div class="flex items-center gap-3">
|
|
@isset($nav['icon'])
|
|
<x-dynamic-component :component="$nav['icon']"
|
|
class="size-5 {{ $nav['active'] ? 'text-primary' : 'text-color-muted' }}" />
|
|
@endisset
|
|
<span>{{ $nav['name'] }}</span>
|
|
</div>
|
|
<x-ri-arrow-down-s-line x-bind:class="{ 'rotate-180': activeAccordion }"
|
|
class="size-5 text-color-muted transition-transform duration-300" />
|
|
</button>
|
|
<div x-show="activeAccordion" x-collapse x-cloak>
|
|
<div class="py-2 pl-8 pr-4 border-l-2 border-primary/50 ml-4 opacity-90">
|
|
@foreach ($nav['children'] as $child)
|
|
@if ($child['condition'] ?? true)
|
|
<div class="flex items-center py-1">
|
|
<x-navigation.link :href="route($child['route'], $child['params'] ?? [])"
|
|
:spa="$child['spa'] ?? true"
|
|
class="block w-full p-2 rounded-md transition-colors duration-200
|
|
{{ $child['active'] ? 'text-primary font-bold bg-primary/10' : 'text-color-muted hover:bg-primary/5' }}">
|
|
{{ $child['name'] }}
|
|
</x-navigation.link>
|
|
</div>
|
|
@endif
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@else
|
|
<x-navigation.link :href="route($nav['route'], $nav['params'] ?? [])"
|
|
:spa="$nav['spa'] ?? true"
|
|
class="flex items-center gap-3 p-3 rounded-lg transition-colors duration-200 w-full
|
|
{{ $nav['active'] ? 'bg-primary/10 text-primary font-semibold' : 'hover:bg-primary/5 text-color-base' }}">
|
|
@isset($nav['icon'])
|
|
<x-dynamic-component :component="$nav['icon']"
|
|
class="size-5 {{ $nav['active'] ? 'text-primary' : 'text-color-muted' }}" />
|
|
@endisset
|
|
<span>{{ $nav['name'] }}</span>
|
|
</x-navigation.link>
|
|
@endif
|
|
@isset($nav['separator'])
|
|
<div class="h-px w-full bg-neutral/50 my-2"></div>
|
|
@endisset
|
|
@endforeach
|
|
|
|
<div class="flex flex-row items-center mt-6 justify-between md:hidden border-t border-neutral/50 pt-4">
|
|
<x-dropdown>
|
|
<x-slot:trigger>
|
|
<div class="flex flex-col items-start cursor-pointer hover:opacity-80 transition-opacity duration-200">
|
|
<div class="flex items-center gap-2">
|
|
<x-ri-global-line class="size-5 text-color-muted" />
|
|
<span class="text-sm text-color-base font-semibold">
|
|
{{ strtoupper(app()->getLocale()) }}
|
|
<span class="text-color-muted/50 font-semibold mx-1">|</span>
|
|
<span class="text-color-base">{{ session('currency', config('settings.default_currency')) }}</span>
|
|
</span>
|
|
</div>
|
|
<span class="text-xs text-color-muted mt-1">Language & Currency</span>
|
|
</div>
|
|
</x-slot:trigger>
|
|
<x-slot:content>
|
|
<strong class="block p-2 text-xs font-semibold uppercase text-color-muted">Language</strong>
|
|
<livewire:components.language-switch />
|
|
<strong class="block p-2 text-xs font-semibold uppercase text-color-muted mt-2">Currency</strong>
|
|
<livewire:components.currency-switch />
|
|
</x-slot:content>
|
|
</x-dropdown>
|
|
|
|
<x-theme-toggle class="p-2 rounded-full hover:bg-primary/5 transition-colors duration-200" />
|
|
</div>
|
|
</div>
|
|
|
|
@if(auth()->check())
|
|
<div class="border-t border-neutral/50 pt-4 mt-auto">
|
|
<div class="flex items-center gap-3 p-3 mb-3 bg-background-secondary/50 rounded-xl">
|
|
<img src="{{ auth()->user()->avatar }}" class="size-10 rounded-full border-2 border-neutral bg-background shadow-lg" alt="User Avatar" />
|
|
<div class="flex flex-col flex-1">
|
|
<span class="text-sm font-semibold text-color-base">{{ auth()->user()->name }}</span>
|
|
<span class="text-xs text-color-muted truncate">{{ auth()->user()->email }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Account dropdown links for mobile -->
|
|
<div class="flex flex-col gap-1 mb-3">
|
|
@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-2.5 text-sm text-color-base hover:bg-background-secondary/50 rounded-lg transition-all duration-200">
|
|
{{ $nav['name'] }}
|
|
</x-navigation.link>
|
|
@endforeach
|
|
</div>
|
|
|
|
<livewire:auth.logout
|
|
class="flex items-center gap-3 p-3 rounded-lg transition-colors duration-200 w-full text-color-base hover:bg-error/10 hover:text-error border border-neutral/50" />
|
|
</div>
|
|
@else
|
|
<div class="border-t border-neutral/50 pt-4 mt-auto">
|
|
<div class="flex flex-col gap-3">
|
|
<a href="{{ route('login') }}" wire:navigate class="w-full">
|
|
<button class="flex items-center justify-center gap-2 w-full px-4 py-3 text-sm font-semibold text-color-base border-2 border-neutral hover:border-primary hover:text-primary hover:bg-primary/5 rounded-xl transition-all duration-200">
|
|
<x-ri-login-box-line class="size-5" />
|
|
<span>{{ __('navigation.login') }}</span>
|
|
</button>
|
|
</a>
|
|
@if(!config('settings.registration_disabled', false))
|
|
<a href="{{ route('register') }}" wire:navigate class="w-full">
|
|
<button class="flex items-center justify-center gap-2 w-full px-4 py-3 text-sm font-semibold text-white bg-gradient-to-r from-primary to-secondary hover:from-primary/90 hover:to-secondary/90 rounded-xl transition-all duration-200 shadow-lg hover:shadow-xl transform hover:scale-[1.02]">
|
|
<x-ri-user-add-line class="size-5" />
|
|
<span>{{ __('navigation.register') }}</span>
|
|
</button>
|
|
</a>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</div>
|