feat(nav): redesign navigation bar and add Browse/Community links
Enhance the navigation with a modern floating glass design, new Browse and Community dropdown links, and improved theme/blur toggles that now handle multiple instances. Update dropdown components with rounded styling and support for wider widths, refine nav-link active states, and add navigation feature tests.
This commit is contained in:
@@ -1,152 +1,134 @@
|
||||
<nav x-data="{ open: false }"
|
||||
class="bg-white/30 dark:bg-neutral-950/40 border-b border-gray-200 dark:border-neutral-700 fixed xs:absolute sm:fixed w-[100%] z-50 backdrop-blur">
|
||||
<!-- Primary Navigation Menu -->
|
||||
<div class="max-w-[100%] xl:max-w-[95%] 2xl:max-w-[84%] mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex justify-between h-16">
|
||||
<div class="flex items-center">
|
||||
<x-dropdown align="right" width="48">
|
||||
<x-slot name="trigger">
|
||||
<button
|
||||
class="inline-flex items-center px-3 py-2 border text-sm leading-4 font-medium rounded-md text-gray-700 border-neutral-300/50 dark:text-gray-200 bg-white/20 dark:bg-neutral-950/20 dark:border-neutral-800/50 hover:text-gray-800 dark:hover:text-gray-100 focus:outline-none transition ease-in-out duration-150">
|
||||
<nav x-data="{ open: false }" class="fixed inset-x-0 top-0 z-50">
|
||||
@php $notAvailable = auth()->check() ? auth()->user()->unreadNotifications()->count() > 0 : false; @endphp
|
||||
|
||||
<div class="shrink-0 flex items-center">
|
||||
<img src="/images/cropped-HS-1-192x192.webp" class="h-8 mr-3" alt="hstream.moe Logo" />
|
||||
<span class="self-center text-2xl font-semibold whitespace-nowrap">hstream.moe</span>
|
||||
</div>
|
||||
|
||||
<div class="ml-1">
|
||||
<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd"
|
||||
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
|
||||
clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
</button>
|
||||
</x-slot>
|
||||
|
||||
<x-slot name="content">
|
||||
|
||||
<x-dropdown-link :href="route('home.index')">
|
||||
<i class="fa-solid fa-house"></i> {{ __('nav.home') }}
|
||||
</x-dropdown-link>
|
||||
|
||||
<x-dropdown-link :href="route('hentai.search')">
|
||||
<i class="fa-solid fa-magnifying-glass"></i> {{ __('nav.search') }}
|
||||
</x-dropdown-link>
|
||||
|
||||
<x-dropdown-link :href="route('playlist.index')">
|
||||
<i class="fa-solid fa-rectangle-list"></i> {{ __('nav.public-playlists') }}
|
||||
</x-dropdown-link>
|
||||
|
||||
@auth
|
||||
<x-dropdown-link :href="route('download.search')">
|
||||
<i class="fa-solid fa-download"></i> {{ __('nav.downloads') }}
|
||||
</x-dropdown-link>
|
||||
@endauth
|
||||
|
||||
<x-dropdown-link :href="config('discord.invite_link')">
|
||||
<i class="fa-brands fa-discord"></i> {{ __('nav.our-discord-server') }}
|
||||
</x-dropdown-link>
|
||||
|
||||
<x-dropdown-link :href="route('join.matrix')">
|
||||
<div class="flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
||||
class="icon icon-tabler icons-tabler-outline icon-tabler-brand-matrix pr-1">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
|
||||
<path d="M4 3h-1v18h1" />
|
||||
<path d="M20 21h1v-18h-1" />
|
||||
<path d="M7 9v6" />
|
||||
<path d="M12 15v-3.5a2.5 2.5 0 1 0 -5 0v.5" />
|
||||
<path d="M17 15v-3.5a2.5 2.5 0 1 0 -5 0v.5" />
|
||||
</svg>
|
||||
Join our Matrix
|
||||
</div>
|
||||
</x-dropdown-link>
|
||||
|
||||
<x-dropdown-link>
|
||||
<div class="grid grid-cols-2">
|
||||
<p class="cursor-default">{{ __('nav.theme') }}</p>
|
||||
<div class="flex items-center">
|
||||
<div class="absolute right-6">
|
||||
@include('partials.themeswitcher')
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</x-dropdown-link>
|
||||
|
||||
{{-- Expiremental --}}
|
||||
<x-dropdown-link>
|
||||
@include('partials.blurswitcher')
|
||||
</x-dropdown-link>
|
||||
</x-slot>
|
||||
</x-dropdown>
|
||||
<div class="mx-auto max-w-[100%] px-3 pt-3 sm:px-5 xl:max-w-[95%] 2xl:max-w-[84%]">
|
||||
<div class="flex h-16 items-center justify-between gap-3 rounded-2xl border border-gray-200/60 bg-white/70 px-3 backdrop-blur-xl shadow-lg shadow-black/5 dark:border-white/10 dark:bg-neutral-950/60 dark:shadow-black/40 sm:px-5">
|
||||
{{-- Brand --}}
|
||||
<div class="flex shrink-0 items-center">
|
||||
<a href="{{ route('home.index') }}" class="flex items-center gap-2.5">
|
||||
<span class="relative">
|
||||
<img src="/images/cropped-HS-1-192x192.webp" class="h-9 w-9 rounded-xl " alt="hstream.moe Logo" />
|
||||
</span>
|
||||
<span class="hidden text-lg font-bold bg-gradient-to-r from-rose-600 to-pink-500 bg-clip-text text-transparent sm:block">hstream.moe</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="items-center hidden md:flex">
|
||||
@livewire('nav-live-search')
|
||||
<div class="hidden lg:block pl-4">
|
||||
<div class="flex flex-col items-center bg-gray-50/20 dark:bg-neutral-900/40 rounded-md">
|
||||
<a href="{{ route('hentai.random') }}"
|
||||
class="cursor-pointer px-4 py-2 text-sm font-medium dark:hover:text-white text-gray-500 dark:text-white/90 focus:outline-none flex flex-col items-center md:flex-row">
|
||||
<i class="fa-solid fa-shuffle"></i>
|
||||
<p class="md:pl-1 pl-0">Random</p>
|
||||
</a>
|
||||
</div>
|
||||
{{-- Center: inline links + live search --}}
|
||||
<div class="flex items-center gap-1">
|
||||
<div class="hidden items-center gap-1 lg:flex">
|
||||
<x-nav-link :href="route('home.index')" :active="request()->routeIs('home.index')">
|
||||
<i class="fa-solid fa-house"></i> {{ __('nav.home') }}
|
||||
</x-nav-link>
|
||||
|
||||
<x-nav-link :href="route('hentai.search')" :active="request()->routeIs('hentai.search', 'hentai.searchredirect')">
|
||||
<i class="fa-solid fa-compass"></i> {{ __('nav.browse') }}
|
||||
</x-nav-link>
|
||||
|
||||
<x-nav-link :href="route('playlist.index')" :active="request()->routeIs('playlist.*')">
|
||||
<i class="fa-solid fa-rectangle-list"></i> {{ __('nav.public-playlists') }}
|
||||
</x-nav-link>
|
||||
|
||||
@auth
|
||||
<x-nav-link :href="route('download.search')" :active="request()->routeIs('download.search')">
|
||||
<i class="fa-solid fa-download"></i> {{ __('nav.downloads') }}
|
||||
</x-nav-link>
|
||||
@endauth
|
||||
</div>
|
||||
|
||||
<div class="hidden items-center md:flex">
|
||||
@livewire('nav-live-search')
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@auth
|
||||
@php $notAvailable = Auth::user()->unreadNotifications()->count() > 0; @endphp
|
||||
@else
|
||||
@php $notAvailable = false; @endphp
|
||||
@endauth
|
||||
|
||||
<!-- Settings Dropdown -->
|
||||
<div class="hidden sm:flex sm:items-center sm:ml-6">
|
||||
<x-dropdown align="right" width="48">
|
||||
{{-- Right cluster --}}
|
||||
<div class="hidden items-center gap-1.5 md:flex">
|
||||
{{-- Community dropdown --}}
|
||||
<x-dropdown align="right" width="56">
|
||||
<x-slot name="trigger">
|
||||
<button
|
||||
class="inline-flex items-center px-3 py-2 border text-sm leading-4 font-medium rounded-md text-gray-500 border-neutral-300/50 dark:text-gray-400 bg-white/20 dark:bg-neutral-950/20 dark:border-neutral-800/50 hover:text-gray-700 dark:hover:text-gray-300 focus:outline-none transition ease-in-out duration-150">
|
||||
@auth
|
||||
<img class="h-8 w-8 rounded-full object-cover mr-2"
|
||||
src="{{ Auth::user()->getAvatar() }}"
|
||||
alt="{{ Auth::user()->name }}" />
|
||||
@else
|
||||
<img class="h-8 w-8 rounded-full object-cover mr-2" src="/images/default-avatar.webp"
|
||||
alt="Guest" />
|
||||
@endauth
|
||||
<button type="button" title="{{ __('nav.community') }}"
|
||||
class="inline-flex h-9 w-9 items-center justify-center rounded-full ring-1 ring-gray-200 text-gray-600 transition-colors hover:bg-rose-50 hover:text-rose-700 dark:ring-neutral-700 dark:text-gray-300 dark:hover:bg-rose-950/40 dark:hover:text-rose-300">
|
||||
<i class="fa-solid fa-users"></i>
|
||||
</button>
|
||||
</x-slot>
|
||||
|
||||
<x-slot name="content">
|
||||
<x-dropdown-link :href="config('discord.invite_link')">
|
||||
<i class="fa-brands fa-discord text-indigo-500 dark:text-indigo-400"></i> {{ __('nav.our-discord-server') }}
|
||||
</x-dropdown-link>
|
||||
|
||||
<x-dropdown-link :href="route('join.matrix')">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
||||
class="icon icon-tabler icons-tabler-outline icon-tabler-brand-matrix shrink-0">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
|
||||
<path d="M4 3h-1v18h1" />
|
||||
<path d="M20 21h1v-18h-1" />
|
||||
<path d="M7 9v6" />
|
||||
<path d="M12 15v-3.5a2.5 2.5 0 1 0 -5 0v.5" />
|
||||
<path d="M17 15v-3.5a2.5 2.5 0 1 0 -5 0v.5" />
|
||||
</svg>
|
||||
Join our Matrix
|
||||
</x-dropdown-link>
|
||||
|
||||
<x-dropdown-link :href="route('contact.index')">
|
||||
<i class="fa-solid fa-message"></i> Contact
|
||||
</x-dropdown-link>
|
||||
</x-slot>
|
||||
</x-dropdown>
|
||||
|
||||
{{-- Random --}}
|
||||
<a href="{{ route('hentai.random') }}" title="Random"
|
||||
class="inline-flex h-9 w-9 items-center justify-center rounded-full ring-1 ring-gray-200 text-gray-600 transition-colors hover:bg-rose-50 hover:text-rose-700 dark:ring-neutral-700 dark:text-gray-300 dark:hover:bg-rose-950/40 dark:hover:text-rose-300">
|
||||
<i class="fa-solid fa-shuffle"></i>
|
||||
</a>
|
||||
|
||||
{{-- Theme toggle --}}
|
||||
@include('partials.themeswitcher')
|
||||
|
||||
{{-- Account dropdown --}}
|
||||
<x-dropdown align="right" width="72">
|
||||
<x-slot name="trigger">
|
||||
<button type="button"
|
||||
class="inline-flex items-center gap-2 rounded-full py-1 pl-1 pr-2 ring-1 ring-gray-200 transition-colors hover:bg-rose-50 dark:ring-neutral-700 dark:hover:bg-rose-950/40">
|
||||
@auth
|
||||
<div style="display: flex; flex-direction: row; align-items: flex-start;">
|
||||
<img class="h-9 w-9 rounded-full object-cover ring-2 ring-rose-500/50"
|
||||
src="{{ Auth::user()->getAvatar() }}"
|
||||
alt="{{ Auth::user()->name }}" />
|
||||
<span class="hidden items-center gap-1.5 text-sm font-semibold text-gray-800 dark:text-neutral-200 xl:inline-flex">
|
||||
{{ Auth::user()->name }}
|
||||
@if ($notAvailable)
|
||||
<i class="fa-solid fa-bell text-rose-600"></i>
|
||||
<span class="relative">
|
||||
<i class="fa-solid fa-bell text-rose-600"></i>
|
||||
<span class="absolute -top-1 -right-1 flex h-2 w-2">
|
||||
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-rose-400 opacity-75"></span>
|
||||
<span class="relative inline-flex rounded-full h-2 w-2 bg-rose-500"></span>
|
||||
</span>
|
||||
</span>
|
||||
@endif
|
||||
</div>
|
||||
</span>
|
||||
@else
|
||||
<div style="display: flex; flex-direction: column; align-items: flex-start;">
|
||||
Guest
|
||||
<small>{{ __('nav.please-login') }}</small>
|
||||
</div>
|
||||
<img class="h-9 w-9 rounded-full object-cover ring-2 ring-rose-500/50" src="/images/default-avatar.webp"
|
||||
alt="Guest" />
|
||||
<span class="hidden flex-col items-start leading-tight xl:flex">
|
||||
<span class="text-sm font-semibold text-gray-800 dark:text-neutral-200">Guest</span>
|
||||
<small class="text-xs text-gray-400 dark:text-gray-500">{{ __('nav.please-login') }}</small>
|
||||
</span>
|
||||
@endauth
|
||||
|
||||
<div class="ml-1">
|
||||
<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd"
|
||||
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
|
||||
clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
<svg class="h-4 w-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd"
|
||||
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
|
||||
clip-rule="evenodd" />
|
||||
</svg>
|
||||
</button>
|
||||
</x-slot>
|
||||
|
||||
<x-slot name="content">
|
||||
@auth
|
||||
<p class="px-3 pb-1 pt-1.5 text-xs font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-500">Account</p>
|
||||
|
||||
<x-dropdown-link :href="route('profile.show')">
|
||||
<i class="fa-solid fa-user"></i> {{ __('Profile') }}
|
||||
<i class="fa-solid fa-user"></i> {{ __('nav.profile') }}
|
||||
</x-dropdown-link>
|
||||
|
||||
@if ($notAvailable)
|
||||
@@ -175,6 +157,10 @@
|
||||
<i class="fa-solid fa-eye"></i> {{ __('nav.watched') }}
|
||||
</x-dropdown-link>
|
||||
|
||||
<div class="my-1 border-t border-gray-100 dark:border-white/5"></div>
|
||||
|
||||
<p class="px-3 pb-1 pt-1.5 text-xs font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-500">Preferences</p>
|
||||
|
||||
<x-dropdown-link :href="route('profile.settings')">
|
||||
<i class="fa-solid fa-gear"></i> {{ __('nav.settings') }}
|
||||
</x-dropdown-link>
|
||||
@@ -184,10 +170,11 @@
|
||||
<i class="fa-solid fa-user-tie"></i> Admin
|
||||
</x-dropdown-link>
|
||||
@endif
|
||||
@endauth
|
||||
|
||||
<!-- Authentication -->
|
||||
@auth
|
||||
@include('partials.blurswitcher')
|
||||
|
||||
<div class="my-1 border-t border-gray-100 dark:border-white/5"></div>
|
||||
|
||||
<form method="POST" action="{{ route('logout') }}">
|
||||
@csrf
|
||||
|
||||
@@ -202,7 +189,7 @@
|
||||
@guest
|
||||
<x-dropdown-link :href="route('login')">
|
||||
<div
|
||||
class="relative bg-rose-700 hover:bg-rose-600 text-white font-bold px-4 h-10 rounded text-center p-[10px]">
|
||||
class="flex w-full items-center justify-center gap-2 rounded-xl bg-gradient-to-r from-rose-600 to-pink-600 px-4 py-2.5 font-semibold text-white transition-colors hover:from-rose-500 hover:to-pink-500">
|
||||
<i class="fa-solid fa-arrow-right-to-bracket"></i> {{ __('nav.login') }}
|
||||
</div>
|
||||
</x-dropdown-link>
|
||||
@@ -211,11 +198,11 @@
|
||||
</x-dropdown>
|
||||
</div>
|
||||
|
||||
<!-- Hamburger -->
|
||||
<div class="-mr-2 flex items-center sm:hidden">
|
||||
<button @click="open = ! open"
|
||||
class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 dark:text-gray-500 hover:text-gray-500 dark:hover:text-gray-400 hover:bg-gray-100 dark:hover:bg-neutral-900 focus:outline-none focus:bg-gray-100 dark:focus:bg-neutral-900 focus:text-gray-500 dark:focus:text-gray-400 transition duration-150 ease-in-out">
|
||||
<svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
|
||||
{{-- Hamburger --}}
|
||||
<div class="flex items-center md:hidden">
|
||||
<button @click="open = ! open" type="button"
|
||||
class="relative inline-flex h-9 w-9 items-center justify-center rounded-full text-gray-500 ring-1 ring-gray-200 transition-colors hover:bg-rose-50 hover:text-rose-700 dark:text-gray-400 dark:ring-neutral-700 dark:hover:bg-rose-950/40">
|
||||
<svg class="h-5 w-5" stroke="currentColor" fill="none" viewBox="0 0 24 24">
|
||||
<path :class="{ 'hidden': open, 'inline-flex': !open }" class="inline-flex"
|
||||
stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M4 6h16M4 12h16M4 18h16" />
|
||||
@@ -223,10 +210,9 @@
|
||||
stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
@if ($notAvailable)
|
||||
<span class="absolute mb-4 ml-4 flex h-3 w-3 float-right">
|
||||
<span
|
||||
class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
|
||||
<span class="relative inline-flex rounded-full h-3 w-3 bg-red-500"></span>
|
||||
<span class="absolute -right-0.5 -top-0.5 flex h-3 w-3">
|
||||
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-rose-400 opacity-75"></span>
|
||||
<span class="relative inline-flex h-3 w-3 rounded-full bg-rose-500"></span>
|
||||
</span>
|
||||
@endif
|
||||
</button>
|
||||
@@ -234,90 +220,170 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Responsive Navigation Menu -->
|
||||
@auth
|
||||
<div :class="{ 'block': open, 'hidden': !open }" class="hidden sm:hidden">
|
||||
<div class="pt-2 pb-3 space-y-1">
|
||||
@include('partials.mobilesearch')
|
||||
</div>
|
||||
{{-- Drawer overlay --}}
|
||||
<div x-show="open" @click="open = false"
|
||||
class="fixed inset-0 z-40 bg-black/40 backdrop-blur-sm md:hidden"
|
||||
style="display: none"></div>
|
||||
|
||||
<!-- Responsive Settings Options -->
|
||||
<div class="pt-4 pb-1 border-t border-gray-200 dark:border-gray-600 dark:bg-neutral-900/30">
|
||||
{{-- Slide-in drawer --}}
|
||||
<div x-show="open"
|
||||
x-transition:enter="transition ease-out duration-200"
|
||||
x-transition:enter-start="opacity-0 translate-x-full"
|
||||
x-transition:enter-end="opacity-100 translate-x-0"
|
||||
x-transition:leave="transition ease-in duration-150"
|
||||
x-transition:leave-start="opacity-100 translate-x-0"
|
||||
x-transition:leave-end="opacity-0 translate-x-full"
|
||||
class="fixed inset-y-0 right-0 z-50 flex w-80 max-w-[85%] flex-col overflow-y-auto border-l border-gray-200/70 bg-white/95 p-5 shadow-2xl backdrop-blur-xl dark:border-white/10 dark:bg-neutral-950/90 md:hidden"
|
||||
style="display: none">
|
||||
|
||||
<div class="flex justify-center">
|
||||
<img class="h-8 w-8 rounded-full object-cover mr-2"
|
||||
{{-- Drawer header --}}
|
||||
<div class="flex items-center justify-between gap-3">
|
||||
<div class="flex min-w-0 items-center gap-3">
|
||||
@auth
|
||||
<img class="h-10 w-10 rounded-full object-cover ring-2 ring-rose-500/50"
|
||||
src="{{ Auth::user()->getAvatar() }}"
|
||||
alt="{{ Auth::user()->name }}" />
|
||||
<span class="font-medium text-base text-gray-800 dark:text-neutral-200">
|
||||
{{ Auth::user()->name }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="mt-3 space-y-1">
|
||||
<x-responsive-nav-link :href="route('profile.show')" :active="request()->routeIs('user.show')">
|
||||
<i class="fa-solid fa-user pr-4"></i> {{ __('nav.profile') }}
|
||||
</x-responsive-nav-link>
|
||||
|
||||
@if ($notAvailable)
|
||||
<x-responsive-nav-link :href="route('profile.notifications')" :active="request()->routeIs('profile.notifications')">
|
||||
<i class="fa-solid fa-bell pr-4"></i> Notifications
|
||||
<span class="relative flex h-3 w-3 float-right top-[6px]">
|
||||
<span
|
||||
class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
|
||||
<span class="relative inline-flex rounded-full h-3 w-3 bg-red-500"></span>
|
||||
</span>
|
||||
</x-responsive-nav-link>
|
||||
@else
|
||||
<x-responsive-nav-link :href="route('profile.notifications')" :active="request()->routeIs('profile.notifications')">
|
||||
<i class="fa-solid fa-bell pr-4"></i> Notifications
|
||||
</x-responsive-nav-link>
|
||||
@endif
|
||||
|
||||
<x-responsive-nav-link :href="route('profile.comments')" :active="request()->routeIs('profile.comments')">
|
||||
<i class="fa-solid fa-comment pr-4"></i> {{ __('nav.comments') }}
|
||||
</x-responsive-nav-link>
|
||||
|
||||
<x-responsive-nav-link :href="route('profile.likes')" :active="request()->routeIs('profile.likes')">
|
||||
<i class="fa-solid fa-heart pr-4"></i> {{ __('nav.likes') }}
|
||||
</x-responsive-nav-link>
|
||||
|
||||
<x-responsive-nav-link :href="route('profile.playlists')" :active="request()->routeIs('profile.playlists')">
|
||||
<i class="fa-solid fa-rectangle-list pr-4"></i> {{ __('nav.playlists') }}
|
||||
</x-responsive-nav-link>
|
||||
|
||||
<x-responsive-nav-link :href="route('user.watched')" :active="request()->routeIs('user.watched')">
|
||||
<i class="fa-solid fa-eye pr-4"></i> {{ __('nav.watched') }}
|
||||
</x-responsive-nav-link>
|
||||
|
||||
<!-- Authentication -->
|
||||
<form method="POST" action="{{ route('logout') }}">
|
||||
@csrf
|
||||
|
||||
<x-responsive-nav-link :href="route('logout')"
|
||||
onclick="event.preventDefault();
|
||||
this.closest('form').submit();">
|
||||
<i class="fa-solid fa-right-from-bracket pr-4"></i> {{ __('nav.logout') }}
|
||||
</x-responsive-nav-link>
|
||||
</form>
|
||||
</div>
|
||||
<span class="truncate text-sm font-semibold text-gray-800 dark:text-neutral-200">{{ Auth::user()->name }}</span>
|
||||
@else
|
||||
<img class="h-10 w-10 rounded-full object-cover ring-2 ring-rose-500/50" src="/images/default-avatar.webp"
|
||||
alt="Guest" />
|
||||
<span class="truncate text-sm font-semibold text-gray-800 dark:text-neutral-200">Guest</span>
|
||||
@endauth
|
||||
</div>
|
||||
<button @click="open = false" type="button"
|
||||
class="inline-flex h-9 w-9 items-center justify-center rounded-full text-gray-500 ring-1 ring-gray-200 transition-colors hover:bg-rose-50 hover:text-rose-700 dark:text-gray-400 dark:ring-neutral-700 dark:hover:bg-rose-950/40">
|
||||
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
@else
|
||||
<div :class="{ 'block': open, 'hidden': !open }" class="hidden sm:hidden">
|
||||
<!-- Search Form Mobile -->
|
||||
<div class="pt-2 pb-3 space-y-1">
|
||||
@include('partials.mobilesearch')
|
||||
|
||||
<div class="pb-1 text-center w-full">
|
||||
<x-responsive-nav-link :href="route('login')">
|
||||
<div
|
||||
class="relative bg-rose-700 hover:bg-rose-600 text-white font-bold px-4 h-10 rounded text-center p-[10px]">
|
||||
<i class="fa-solid fa-arrow-right-to-bracket"></i> {{ __('nav.login') }}
|
||||
</div>
|
||||
</x-responsive-nav-link>
|
||||
</div>
|
||||
</div>
|
||||
{{-- Primary links --}}
|
||||
<p class="px-4 pb-1 pt-4 text-xs font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-500">Menu</p>
|
||||
<div class="space-y-1">
|
||||
<x-responsive-nav-link :href="route('home.index')" :active="request()->routeIs('home.index')">
|
||||
<i class="fa-solid fa-house"></i> {{ __('nav.home') }}
|
||||
</x-responsive-nav-link>
|
||||
|
||||
<x-responsive-nav-link :href="route('hentai.search')" :active="request()->routeIs('hentai.search', 'hentai.searchredirect')">
|
||||
<i class="fa-solid fa-compass"></i> {{ __('nav.browse') }}
|
||||
</x-responsive-nav-link>
|
||||
|
||||
<x-responsive-nav-link :href="route('playlist.index')" :active="request()->routeIs('playlist.*')">
|
||||
<i class="fa-solid fa-rectangle-list"></i> {{ __('nav.public-playlists') }}
|
||||
</x-responsive-nav-link>
|
||||
|
||||
@auth
|
||||
<x-responsive-nav-link :href="route('download.search')" :active="request()->routeIs('download.search')">
|
||||
<i class="fa-solid fa-download"></i> {{ __('nav.downloads') }}
|
||||
</x-responsive-nav-link>
|
||||
@endauth
|
||||
</div>
|
||||
@endauth
|
||||
|
||||
{{-- Mobile search --}}
|
||||
<div class="pt-4">
|
||||
@include('partials.mobilesearch')
|
||||
</div>
|
||||
|
||||
@auth
|
||||
{{-- Account --}}
|
||||
<p class="px-4 pb-1 pt-4 text-xs font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-500">Account</p>
|
||||
<div class="space-y-1">
|
||||
@if ($notAvailable)
|
||||
<x-responsive-nav-link :href="route('profile.notifications')" :active="request()->routeIs('profile.notifications')">
|
||||
<i class="fa-solid fa-bell"></i> Notifications
|
||||
<span class="relative ml-auto flex h-3 w-3">
|
||||
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-rose-400 opacity-75"></span>
|
||||
<span class="relative inline-flex h-3 w-3 rounded-full bg-rose-500"></span>
|
||||
</span>
|
||||
</x-responsive-nav-link>
|
||||
@else
|
||||
<x-responsive-nav-link :href="route('profile.notifications')" :active="request()->routeIs('profile.notifications')">
|
||||
<i class="fa-solid fa-bell"></i> Notifications
|
||||
</x-responsive-nav-link>
|
||||
@endif
|
||||
|
||||
<x-responsive-nav-link :href="route('profile.show')" :active="request()->routeIs('profile.show')">
|
||||
<i class="fa-solid fa-user"></i> {{ __('nav.profile') }}
|
||||
</x-responsive-nav-link>
|
||||
|
||||
<x-responsive-nav-link :href="route('profile.comments')" :active="request()->routeIs('profile.comments')">
|
||||
<i class="fa-solid fa-comment"></i> {{ __('nav.comments') }}
|
||||
</x-responsive-nav-link>
|
||||
|
||||
<x-responsive-nav-link :href="route('profile.likes')" :active="request()->routeIs('profile.likes')">
|
||||
<i class="fa-solid fa-heart"></i> {{ __('nav.likes') }}
|
||||
</x-responsive-nav-link>
|
||||
|
||||
<x-responsive-nav-link :href="route('profile.playlists')" :active="request()->routeIs('profile.playlists')">
|
||||
<i class="fa-solid fa-rectangle-list"></i> {{ __('nav.playlists') }}
|
||||
</x-responsive-nav-link>
|
||||
|
||||
<x-responsive-nav-link :href="route('user.watched')" :active="request()->routeIs('user.watched')">
|
||||
<i class="fa-solid fa-eye"></i> {{ __('nav.watched') }}
|
||||
</x-responsive-nav-link>
|
||||
|
||||
<x-responsive-nav-link :href="route('profile.settings')" :active="request()->routeIs('profile.settings')">
|
||||
<i class="fa-solid fa-gear"></i> {{ __('nav.settings') }}
|
||||
</x-responsive-nav-link>
|
||||
|
||||
@if (Auth::user()->hasRole(\App\Enums\UserRole::ADMINISTRATOR))
|
||||
<x-responsive-nav-link href="{{ route('admin.upload.index') }}">
|
||||
<i class="fa-solid fa-user-tie"></i> Admin
|
||||
</x-responsive-nav-link>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
{{-- Logout --}}
|
||||
<form method="POST" action="{{ route('logout') }}" class="pt-4">
|
||||
@csrf
|
||||
|
||||
<x-responsive-nav-link :href="route('logout')"
|
||||
onclick="event.preventDefault();
|
||||
this.closest('form').submit();">
|
||||
<i class="fa-solid fa-right-from-bracket"></i> {{ __('nav.logout') }}
|
||||
</x-responsive-nav-link>
|
||||
</form>
|
||||
@else
|
||||
{{-- Guest login CTA --}}
|
||||
<div class="pt-4">
|
||||
<a href="{{ route('login') }}"
|
||||
class="flex w-full items-center justify-center gap-2 rounded-xl bg-gradient-to-r from-rose-600 to-pink-600 px-4 py-2.5 font-semibold text-white transition-colors hover:from-rose-500 hover:to-pink-500">
|
||||
<i class="fa-solid fa-arrow-right-to-bracket"></i> {{ __('nav.login') }}
|
||||
</a>
|
||||
</div>
|
||||
@endauth
|
||||
|
||||
{{-- Community --}}
|
||||
<p class="px-4 pb-1 pt-4 text-xs font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-500">{{ __('nav.community') }}</p>
|
||||
<div class="space-y-1">
|
||||
<x-responsive-nav-link :href="config('discord.invite_link')">
|
||||
<i class="fa-brands fa-discord text-indigo-500 dark:text-indigo-400"></i> {{ __('nav.our-discord-server') }}
|
||||
</x-responsive-nav-link>
|
||||
|
||||
<x-responsive-nav-link :href="route('join.matrix')">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
||||
class="icon icon-tabler icons-tabler-outline icon-tabler-brand-matrix shrink-0">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
|
||||
<path d="M4 3h-1v18h1" />
|
||||
<path d="M20 21h1v-18h-1" />
|
||||
<path d="M7 9v6" />
|
||||
<path d="M12 15v-3.5a2.5 2.5 0 1 0 -5 0v.5" />
|
||||
<path d="M17 15v-3.5a2.5 2.5 0 1 0 -5 0v.5" />
|
||||
</svg>
|
||||
Join our Matrix
|
||||
</x-responsive-nav-link>
|
||||
</div>
|
||||
|
||||
{{-- Toggles --}}
|
||||
<div class="mt-4 space-y-2 rounded-2xl border border-gray-200/70 p-2 dark:border-white/10">
|
||||
<div class="flex items-center justify-between gap-3 px-3 py-1.5">
|
||||
<p class="cursor-default text-sm font-medium text-gray-700 dark:text-gray-300">{{ __('nav.theme') }}</p>
|
||||
@include('partials.themeswitcher')
|
||||
</div>
|
||||
|
||||
@include('partials.blurswitcher')
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
Reference in New Issue
Block a user