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
This commit is contained in:
@@ -2,46 +2,45 @@
|
||||
@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="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">
|
||||
<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 sm:block">hstream.moe</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>
|
||||
|
||||
{{-- 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') }}
|
||||
<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')">
|
||||
<i class="fa-solid fa-compass"></i> {{ __('nav.browse') }}
|
||||
<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.*')">
|
||||
<i class="fa-solid fa-rectangle-list"></i> {{ __('nav.public-playlists') }}
|
||||
<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')">
|
||||
<i class="fa-solid fa-download"></i> {{ __('nav.downloads') }}
|
||||
<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 class="hidden items-center md:flex">
|
||||
@livewire('nav-live-search')
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Right cluster --}}
|
||||
<div class="hidden items-center gap-1.5 md:flex">
|
||||
{{-- 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">
|
||||
@@ -196,26 +195,27 @@
|
||||
@endguest
|
||||
</x-slot>
|
||||
</x-dropdown>
|
||||
</div>
|
||||
</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>
|
||||
{{-- 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>
|
||||
|
||||
Reference in New Issue
Block a user