Files
Atomcms-edit/resources/themes/dusk/views/components/navigation/mobile-navigation-menu.blade.php
T
2026-05-09 17:32:17 +02:00

110 lines
5.7 KiB
PHP
Executable File

<nav class="nav-header" x-data="{
open: false,
}" x-on:keydown.escape="open = false" x-effect="document.body.classList.toggle('menu-open', open)">
<div class="w-full min-h-[60px] text-white px-5 relative">
<button @click="open = !open" class="absolute right-5 top-5 z-50 p-2 rounded-lg transition-all duration-200 hover:bg-white/10" aria-controls="dusk-mobile-menu" :aria-expanded="open">
<span class="sr-only">{{ __('Open main menu') }}</span>
<svg x-show="!open" x-cloak xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-7 h-7">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
<svg x-show="open" x-cloak xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-7 h-7">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
<div x-show="open" x-cloak
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 -translate-y-4"
x-transition:enter-end="opacity-100 translate-y-0"
x-transition:leave="transition ease-in duration-200"
x-transition:leave-start="opacity-100 translate-y-0"
x-transition:leave-end="opacity-0 -translate-y-4"
class="flex flex-col text-white gap-x-14 p-4 space-y-3">
<x-navigation.dropdown route-group="help-center*" :show-chevron="true" :flex-col="false">
{{ __('Community') }}
<x-slot:children>
<x-navigation.dropdown-child :route="route('article.index')" @click="open = false">
{{ __('Articles') }}
</x-navigation.dropdown-child>
<x-navigation.dropdown-child :route="route('staff.index')" @click="open = false">
{{ __('Staff') }}
</x-navigation.dropdown-child>
<x-navigation.dropdown-child :route="route('teams.index')" @click="open = false">
{{ __('Teams') }}
</x-navigation.dropdown-child>
<x-navigation.dropdown-child :route="route('staff-applications.index')" @click="open = false">
{{ __('Staff applications') }}
</x-navigation.dropdown-child>
<x-navigation.dropdown-child :route="route('help-center.index')" @click="open = false">
{{ __('Help center') }}
</x-navigation.dropdown-child>
<x-navigation.dropdown-child :route="route('photos.index')" @click="open = false">
{{ __('Photos') }}
</x-navigation.dropdown-child>
</x-slot:children>
</x-navigation.dropdown>
<a href="{{ route('leaderboard.index') }}" class="transition ease-in-out hover:text-[#ac93da]" @click="open = false">
{{ __('Leaderboards') }}
</a>
<a href="{{ route('article.index') }}" class="transition ease-in-out hover:text-[#ac93da]" @click="open = false">
{{ __('News') }}
</a>
<a href="{{ route('welcome') }}" class="transition ease-in-out hover:text-[#ac93da]" @click="open = false">
{{ __('Events') }}
</a>
<a href="{{ route('shop.index') }}" class="transition ease-in-out hover:text-[#ac93da]" @click="open = false">
{{ __('Store') }}
</a>
<x-navigation.dropdown route-group="help-center*" :show-chevron="true" :flex-col="false">
{{ __('Home') }}
<x-slot:children>
@auth
<x-navigation.dropdown-child :route="route('profile.show', Auth::user()->username)" @click="open = false">
{{ __('My profile') }}
</x-navigation.dropdown-child>
<x-navigation.dropdown-child :route="route('settings.account.show')" @click="open = false">
{{ __('Account settings') }}
</x-navigation.dropdown-child>
<form action="{{ route('logout') }}" method="POST">
@csrf
<button type="submit" class="dropdown-item dark:text-gray-200 dark:hover:bg-gray-700 w-full text-left flex items-center gap-2 text-red-400 hover:text-red-300">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
</svg>
{{ __('Logout') }}
</button>
</form>
@endauth
@guest
<x-navigation.dropdown-child :route="route('login')" @click="open = false">
{{ __('Login') }}
</x-navigation.dropdown-child>
<x-navigation.dropdown-child :route="route('register')" @click="open = false">
{{ __('Register') }}
</x-navigation.dropdown-child>
@endguest
</x-slot:children>
</x-navigation.dropdown>
</div>
</div>
</nav>