Init
This commit is contained in:
309
resources/views/layouts/navigation.blade.php
Normal file
309
resources/views/layouts/navigation.blade.php
Normal file
@@ -0,0 +1,309 @@
|
||||
<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">
|
||||
|
||||
<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>
|
||||
<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>
|
||||
</x-slot>
|
||||
</x-dropdown>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center invisible sm:visible">
|
||||
@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">
|
||||
@php $random = App\Models\Episode::inRandomOrder()->limit(1)->pluck('slug')->first(); @endphp
|
||||
<a href="{{ route('hentai.index', ['title' => $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>
|
||||
</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">
|
||||
<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
|
||||
@if (Auth::user()->avatar)
|
||||
<img class="h-8 w-8 rounded-full object-cover mr-2"
|
||||
src="https://external-content.duckduckgo.com/iu/?u=https://cdn.discordapp.com/avatars/{{ Auth::user()->id }}/{{ Auth::user()->avatar }}.webp"
|
||||
alt="{{ Auth::user()->getTagAttribute() }}" />
|
||||
@endif
|
||||
@else
|
||||
<img class="h-8 w-8 rounded-full object-cover mr-2" src="/images/default-avatar.webp"
|
||||
alt="Guest" />
|
||||
@endauth
|
||||
|
||||
@auth
|
||||
<div style="display: flex; flex-direction: row; align-items: flex-start;">
|
||||
{{ Auth::user()->getTagAttribute() }}
|
||||
@if ($notAvailable)
|
||||
<i class="fa-solid fa-bell text-rose-600"></i>
|
||||
@endif
|
||||
</div>
|
||||
@else
|
||||
<div style="display: flex; flex-direction: column; align-items: flex-start;">
|
||||
Guest
|
||||
<small>{{ __('nav.please-login') }}</small>
|
||||
</div>
|
||||
@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>
|
||||
</button>
|
||||
</x-slot>
|
||||
|
||||
<x-slot name="content">
|
||||
@auth
|
||||
<x-dropdown-link :href="route('profile.show')">
|
||||
<i class="fa-solid fa-user"></i> {{ __('Profile') }}
|
||||
</x-dropdown-link>
|
||||
|
||||
@if ($notAvailable)
|
||||
<x-dropdown-link :href="route('profile.notifications')">
|
||||
<i class="fa-solid fa-bell animate-bounce text-rose-600"></i> Notifications
|
||||
</x-dropdown-link>
|
||||
@else
|
||||
<x-dropdown-link :href="route('profile.notifications')">
|
||||
<i class="fa-solid fa-bell"></i> Notifications
|
||||
</x-dropdown-link>
|
||||
@endif
|
||||
|
||||
<x-dropdown-link :href="route('profile.comments')">
|
||||
<i class="fa-solid fa-comment"></i> {{ __('nav.comments') }}
|
||||
</x-dropdown-link>
|
||||
|
||||
<x-dropdown-link :href="route('profile.likes')">
|
||||
<i class="fa-solid fa-heart"></i> {{ __('nav.likes') }}
|
||||
</x-dropdown-link>
|
||||
|
||||
<x-dropdown-link :href="route('profile.playlists')">
|
||||
<i class="fa-solid fa-rectangle-list"></i> {{ __('nav.playlists') }}
|
||||
</x-dropdown-link>
|
||||
|
||||
<x-dropdown-link :href="route('user.watched')">
|
||||
<i class="fa-solid fa-eye"></i> {{ __('nav.watched') }}
|
||||
</x-dropdown-link>
|
||||
|
||||
<x-dropdown-link :href="route('profile.settings')">
|
||||
<i class="fa-solid fa-gear"></i> {{ __('nav.settings') }}
|
||||
</x-dropdown-link>
|
||||
|
||||
@if (Auth::user()->is_admin)
|
||||
<x-dropdown-link href="{{ route('admin.upload.index') }}">
|
||||
<i class="fa-solid fa-user-tie"></i> Admin
|
||||
</x-dropdown-link>
|
||||
@endif
|
||||
@endauth
|
||||
|
||||
<!-- Authentication -->
|
||||
@auth
|
||||
<form method="POST" action="{{ route('logout') }}">
|
||||
@csrf
|
||||
|
||||
<x-dropdown-link :href="route('logout')"
|
||||
onclick="event.preventDefault();
|
||||
this.closest('form').submit();">
|
||||
<i class="fa-solid fa-right-from-bracket"></i> {{ __('nav.logout') }}
|
||||
</x-dropdown-link>
|
||||
</form>
|
||||
@endauth
|
||||
|
||||
@guest
|
||||
<x-dropdown-link :href="route('login')">
|
||||
<div
|
||||
class="relative bg-blue-700 hover:bg-blue-600 text-white font-bold px-4 h-10 rounded text-center p-[10px]">
|
||||
<i class="fa-brands fa-discord"></i> {{ __('nav.login') }}
|
||||
</div>
|
||||
</x-dropdown-link>
|
||||
@endguest
|
||||
</x-slot>
|
||||
</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">
|
||||
<path :class="{ 'hidden': open, 'inline-flex': !open }" class="inline-flex"
|
||||
stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M4 6h16M4 12h16M4 18h16" />
|
||||
<path :class="{ 'hidden': !open, 'inline-flex': open }" class="hidden" stroke-linecap="round"
|
||||
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>
|
||||
@endif
|
||||
</button>
|
||||
</div>
|
||||
</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>
|
||||
|
||||
<!-- Responsive Settings Options -->
|
||||
<div class="pt-4 pb-1 border-t border-gray-200 dark:border-gray-600 dark:bg-neutral-900/30">
|
||||
|
||||
<div class="flex justify-center">
|
||||
@if (Auth::user()->avatar)
|
||||
<img class="h-8 w-8 rounded-full object-cover mr-2"
|
||||
src="https://external-content.duckduckgo.com/iu/?u=https://cdn.discordapp.com/avatars/{{ Auth::user()->id }}/{{ Auth::user()->avatar }}.webp"
|
||||
alt="{{ Auth::user()->getTagAttribute() }}" />
|
||||
@else
|
||||
<img class="h-8 w-8 rounded-full object-cover mr-2" src="/images/default-avatar.webp"
|
||||
alt="Guest" />
|
||||
@endif
|
||||
<span class="font-medium text-base text-gray-800 dark:text-neutral-200">{{ Auth::user()->username }}
|
||||
</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>
|
||||
</div>
|
||||
</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-blue-700 hover:bg-blue-600 text-white font-bold px-4 h-10 rounded text-center p-[10px]">
|
||||
<i class="fa-brands fa-discord"></i> {{ __('nav.login') }}
|
||||
</div>
|
||||
</x-responsive-nav-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endauth
|
||||
</nav>
|
||||
Reference in New Issue
Block a user