w33b/hstream
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
40fe75d9b7b0acfe38357a6493ad9424263f4bf8
hstream/resources/views/layouts/navigation.blade.php
T
w33b 1f582d71d6 feat(nav): make nav links icon-only on mobile with tooltips 
- Add label prop to nav-link component to display text labels only when active on large screens
- Restructure navigation layout to use grid with left column for brand and inline links
- Show icon-only links with title tooltips on mobile, full labels on larger screens
- Adjust live search input widths for better responsive scaling across breakpoints
2026-08-10 16:30:49 +02:00

390 lines
22 KiB
PHP
Raw Blame History

<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="mx-auto max-w-[100%] px-3 pt-3 sm:px-5 xl:max-w-[95%] 2xl:max-w-[84%]">
<div class="grid h-16 grid-cols-[1fr_auto_1fr] items-center gap-2 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:gap-3 sm:px-5">
{{-- Left column: brand + inline links --}}
<div class="flex min-w-0 items-center justify-self-start gap-1">
<a href="{{ route('home.index') }}" class="flex shrink-0 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 xl:block">hstream.moe</span>
</a>
<div class="hidden min-w-0 items-center gap-1 md:flex">
<x-nav-link :href="route('home.index')" :active="request()->routeIs('home.index')" :label="__('nav.home')">
<i class="fa-solid fa-house"></i>
</x-nav-link>
<x-nav-link :href="route('hentai.search')" :active="request()->routeIs('hentai.search', 'hentai.searchredirect')" :label="__('nav.browse')">
<i class="fa-solid fa-compass"></i>
</x-nav-link>
<x-nav-link :href="route('playlist.index')" :active="request()->routeIs('playlist.*')" :label="__('nav.public-playlists')">
<i class="fa-solid fa-rectangle-list"></i>
</x-nav-link>
@auth
<x-nav-link :href="route('download.search')" :active="request()->routeIs('download.search')" :label="__('nav.downloads')">
<i class="fa-solid fa-download"></i>
</x-nav-link>
@endauth
</div>
</div>
{{-- Center column: live search --}}
<div class="hidden items-center justify-self-center md:flex">
@livewire('nav-live-search')
</div>
{{-- Right column: right cluster + hamburger --}}
<div class="flex min-w-0 items-center justify-self-end col-start-3 gap-1.5">
<div class="hidden items-center gap-1.5 md:flex">
{{-- Community dropdown --}}
<x-dropdown align="right" width="56">
<x-slot name="trigger">
<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
<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)
<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
</span>
@else
<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
<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> {{ __('nav.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>
<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>
@if (Auth::user()->hasRole(\App\Enums\UserRole::ADMINISTRATOR))
<x-dropdown-link href="{{ route('admin.upload.index') }}">
<i class="fa-solid fa-user-tie"></i> Admin
</x-dropdown-link>
@endif
@include('partials.blurswitcher')
<div class="my-1 border-t border-gray-100 dark:border-white/5"></div>
<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="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>
@endguest
</x-slot>
</x-dropdown>
</div>
{{-- 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" />
<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 -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>
</div>
</div>
</div>
</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>
{{-- 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">
{{-- 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="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>
{{-- 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>
{{-- 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 View Git Blame Copy Permalink