From 1f582d71d6f1b9f24397f9789670d6a8b458d54d Mon Sep 17 00:00:00 2001
From: w33b <w33b@hstream.moe>
Date: Mon, 10 Aug 2026 16:30:49 +0200
Subject: [PATCH] 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
---
 resources/views/components/nav-link.blade.php | 14 ++--
 resources/views/layouts/navigation.blade.php  | 84 +++++++++----------
 .../views/livewire/nav-live-search.blade.php  |  2 +-
 3 files changed, 52 insertions(+), 48 deletions(-)

diff --git a/resources/views/components/nav-link.blade.php b/resources/views/components/nav-link.blade.php
index 2714436..7dbdd38 100644
--- a/resources/views/components/nav-link.blade.php
+++ b/resources/views/components/nav-link.blade.php
@@ -1,11 +1,15 @@
-@props(['active'])
+@props(['active' => false, 'label' => null])
 
 @php
-$classes = ($active ?? false)
-            ? 'inline-flex items-center gap-1.5 rounded-xl bg-gradient-to-r from-rose-600 to-pink-600 px-3.5 py-2 text-sm font-semibold text-white shadow-md shadow-rose-600/25'
-            : 'inline-flex items-center gap-1.5 rounded-xl px-3.5 py-2 text-sm font-medium text-gray-600 dark:text-gray-300 hover:bg-rose-50 dark:hover:bg-rose-950/30 hover:text-rose-700 dark:hover:text-rose-300 transition-colors';
+$classes = $active
+            ? 'inline-flex h-9 min-w-0 items-center justify-center gap-1.5 rounded-full bg-gradient-to-r from-rose-600 to-pink-600 text-white shadow-md shadow-rose-600/25 max-lg:w-9 lg:px-3.5 [&>i]:shrink-0'
+            : 'inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-gray-600 ring-1 ring-gray-200 transition-colors hover:bg-rose-50 hover:text-rose-700 dark:text-gray-300 dark:ring-neutral-700 dark:hover:bg-rose-950/30 dark:hover:text-rose-300';
 @endphp
 
-<a {{ $attributes->merge(['class' => $classes]) }}>
+<a {{ $attributes->merge(['class' => $classes]) }} @if ($label && ! $active) title="{{ $label }}" @endif>
     {{ $slot }}
+
+    @if ($active && $label)
+        <span class="hidden truncate text-sm font-semibold lg:inline-flex">{{ $label }}</span>
+    @endif
 </a>
diff --git a/resources/views/layouts/navigation.blade.php b/resources/views/layouts/navigation.blade.php
index 279cfae..9a85824 100644
--- a/resources/views/layouts/navigation.blade.php
+++ b/resources/views/layouts/navigation.blade.php
@@ -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>
diff --git a/resources/views/livewire/nav-live-search.blade.php b/resources/views/livewire/nav-live-search.blade.php
index 3bc5f91..f2646b2 100644
--- a/resources/views/livewire/nav-live-search.blade.php
+++ b/resources/views/livewire/nav-live-search.blade.php
@@ -3,7 +3,7 @@
         @csrf
         <div class="relative group">
             <label for="live-search" class="sr-only">Search</label>
-            <div class="relative w-full sm:min-w-[200px] md:min-w-[200px] lg:min-w-[240px] xl:min-w-[300px]">
+            <div class="relative w-full md:min-w-[220px] lg:min-w-[280px] xl:min-w-[360px]">
                 {{-- Search Icon --}}
                 <div class="pointer-events-none absolute inset-y-0 left-0 pl-3 flex items-center">
                     <svg class="w-4 h-4 text-gray-400 dark:text-gray-300" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">