w33b/hstream
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(nav): redesign navigation bar and add Browse/Community links

Browse Source 
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:
w33b
2026-08-09 10:13:54 +02:00
parent d08e280ce0
commit 338c190ae8
16 changed files with 393 additions and 293 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lang/de/nav.php
+2
View File
@@ -2,6 +2,8 @@
return [
'home' => 'Startseite',
'browse' => 'Stöbern',
'community' => 'Community',
'search' => 'Suche',
'public-playlists' => 'Öffentliche Playlisten',
'downloads' => 'Downloads',
lang/en/nav.php
+2
View File
@@ -2,6 +2,8 @@
return [
'home' => 'Home',
'browse' => 'Browse',
'community' => 'Community',
'search' => 'Search',
'public-playlists' => 'Public Playlists',
'downloads' => 'Downloads',
lang/fr/nav.php
+2
View File
@@ -2,6 +2,8 @@
return [
'home' => 'Accueil',
'browse' => 'Parcourir',
'community' => 'Communauté',
'search' => 'Recherche',
'public-playlists' => 'Playlists publiques',
'downloads' => 'Téléchargements',
resources/css/app.css
+4
View File
@@ -68,6 +68,10 @@ input:checked~.dot {
transform: translateX(100%);
}
input:checked~.theme-icon {
transform: rotate(90deg);
}
#plyr__time_skip {
background: #c61e54;
border: 0;
resources/js/theme.js
+15 -12
View File
@@ -7,7 +7,7 @@ function darkModeListener() {
}
}
document.querySelector("input[type='checkbox']#toogleTheme")?.addEventListener("click", darkModeListener);
document.querySelectorAll("input[type='checkbox']#toogleTheme").forEach((toggle) => toggle.addEventListener("click", darkModeListener));
if(localStorage.theme) {
if (localStorage.theme == 'light') {
@@ -15,10 +15,9 @@ if(localStorage.theme) {
document.querySelector("html").classList.toggle("dark");
}
const toggleThemeButton = document.getElementById("toogleTheme");
if (toggleThemeButton) {
toggleThemeButton.checked = true;
}
document.querySelectorAll("#toogleTheme").forEach((toggle) => {
toggle.checked = true;
});
}
} else {
@@ -28,7 +27,6 @@ if(localStorage.theme) {
// Ability to disable blur effects for slower devices
const LOCAL_STORAGE_KEY = 'blur';
const blurCheckbox = document.querySelector("input[type='checkbox']#toggleBlur");
function setCSSFilter(selector, value) {
document.querySelectorAll(selector).forEach(el => {
@@ -38,10 +36,12 @@ function setCSSFilter(selector, value) {
function applyBlur(enabled) {
if (!enabled) {
setCSSFilter('.backdrop-blur, .backdrop-blur-sm, .backdrop-blur-lg', 'none');
setCSSFilter('.backdrop-blur, .backdrop-blur-sm, .backdrop-blur-lg, .backdrop-blur-xl, .backdrop-blur-2xl', 'none');
return;
}
setCSSFilter('.backdrop-blur-2xl', 'blur(40px)');
setCSSFilter('.backdrop-blur-xl', 'blur(24px)');
setCSSFilter('.backdrop-blur-lg', 'blur(16px)');
setCSSFilter('.backdrop-blur', 'blur(8px)');
setCSSFilter('.backdrop-blur-sm', 'blur(4px)');
@@ -51,19 +51,22 @@ function initBlurToggle() {
const storedValue = localStorage.getItem(LOCAL_STORAGE_KEY);
const enabled = storedValue === null ? true : storedValue === 'true';
const blurCheckboxes = document.querySelectorAll("input[type='checkbox']#toggleBlur");
// initialize UI and DOM
applyBlur(enabled);
if (blurCheckbox) blurCheckbox.checked = enabled;
blurCheckboxes.forEach((checkbox) => {
checkbox.checked = enabled;
});
// add event listener
if (blurCheckbox) {
blurCheckbox.addEventListener('click', (e) => {
console.log("Received Event");
blurCheckboxes.forEach((checkbox) => {
checkbox.addEventListener('click', (e) => {
const isEnabled = e.target.checked;
applyBlur(isEnabled);
localStorage.setItem(LOCAL_STORAGE_KEY, isEnabled ? 'true' : 'false');
});
}
});
}
initBlurToggle();
resources/views/admin/layout.blade.php
+1 -1
View File
@@ -5,7 +5,7 @@
<div class="flex flex-col min-h-screen bg-gray-100 dark:bg-neutral-900">
@include('layouts.navigation')
@include('partials.background')
<div class="mt-[65px]">
<div class="mt-[80px]">
@include('admin.partials.sidenav')
<div class="pl-64">
@yield('content')
resources/views/components/dropdown-link.blade.php
+1 -1
View File
@@ -1 +1 @@
<a {{ $attributes->merge(['class' => 'block w-full px-4 py-2 text-start text-sm leading-5 text-gray-700 dark:text-gray-300 hover:bg-neutral-100 dark:hover:bg-neutral-900 focus:outline-none focus:bg-neutral-100 dark:focus:bg-neutral-800 transition duration-150 ease-in-out']) }}>{{ $slot }}</a>
<a {{ $attributes->merge(['class' => 'flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-start text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-rose-50/70 dark:hover:bg-rose-950/30 hover:text-rose-700 dark:hover:text-rose-300 focus:outline-none transition-colors duration-150']) }}>{{ $slot }}</a>
resources/views/components/dropdown.blade.php
+6 -3
View File
@@ -1,4 +1,4 @@
@props(['align' => 'right', 'width' => '48', 'contentClasses' => 'py-1 bg-white dark:bg-neutral-800'])
@props(['align' => 'right', 'width' => '48', 'contentClasses' => 'p-2 rounded-2xl border border-gray-200/70 dark:border-white/10 bg-white/95 dark:bg-neutral-900/80 backdrop-blur-2xl shadow-2xl shadow-black/10 dark:shadow-black/50'])
@php
$alignmentClasses = match ($align) {
@@ -9,6 +9,9 @@ $alignmentClasses = match ($align) {
$width = match ($width) {
'48' => 'w-48',
'56' => 'w-56',
'64' => 'w-64',
'72' => 'w-72',
default => $width,
};
@endphp
@@ -25,10 +28,10 @@ $width = match ($width) {
x-transition:leave="transition ease-in duration-75"
x-transition:leave-start="opacity-100 scale-100"
x-transition:leave-end="opacity-0 scale-95"
class="absolute z-50 mt-2 {{ $width }} rounded-md shadow-lg {{ $alignmentClasses }}"
class="absolute z-50 mt-2 {{ $width }} rounded-2xl shadow-lg {{ $alignmentClasses }}"
style="display: none;"
@click="open = false">
<div class="rounded-md ring-1 ring-black ring-opacity-5 {{ $contentClasses }}">
<div class="rounded-2xl ring-1 ring-black/5 {{ $contentClasses }}">
{{ $content }}
</div>
</div>
resources/views/components/nav-link.blade.php
+2 -2
View File
@@ -2,8 +2,8 @@
@php
$classes = ($active ?? false)
? 'inline-flex items-center px-1 pt-1 border-b-2 border-indigo-400 dark:border-indigo-600 text-sm font-medium leading-5 text-gray-900 dark:text-gray-100 focus:outline-none focus:border-indigo-700 transition duration-150 ease-in-out'
: 'inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium leading-5 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-700 focus:outline-none focus:text-gray-700 dark:focus:text-gray-300 focus:border-gray-300 dark:focus:border-gray-700 transition duration-150 ease-in-out';
? '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';
@endphp
<a {{ $attributes->merge(['class' => $classes]) }}>
resources/views/components/responsive-nav-link.blade.php
+2 -2
View File
@@ -2,8 +2,8 @@
@php
$classes = ($active ?? false)
? 'block w-full ps-3 pe-4 py-2 border-l-4 border-indigo-400 dark:border-indigo-600 text-start text-base font-medium text-indigo-700 dark:text-indigo-300 bg-indigo-50 dark:bg-indigo-900/50 focus:outline-none focus:text-indigo-800 dark:focus:text-indigo-200 focus:bg-indigo-100 dark:focus:bg-indigo-900 focus:border-indigo-700 dark:focus:border-indigo-300 transition duration-150 ease-in-out'
: 'block w-full ps-3 pe-4 py-2 border-l-4 border-transparent text-start text-base font-medium text-neutral-600 dark:text-neutral-400 hover:text-neutral-800 dark:hover:text-neutral-200 hover:bg-neutral-50 dark:hover:bg-neutral-700 hover:border-neutral-300 dark:hover:border-neutral-600 focus:outline-none focus:text-neutral-800 dark:focus:text-neutral-200 focus:bg-neutral-50 dark:focus:bg-neutral-700 focus:border-neutral-300 dark:focus:border-neutral-600 transition duration-150 ease-in-out';
? 'flex w-full items-center gap-3 rounded-xl border-l-4 border-rose-500 bg-rose-50/80 dark:bg-rose-950/30 px-4 py-2.5 text-sm font-semibold text-rose-700 dark:text-rose-300'
: 'flex w-full items-center gap-3 rounded-xl border-l-4 border-transparent px-4 py-2.5 text-sm font-medium text-gray-600 dark:text-gray-300 hover:bg-rose-50/60 dark:hover:bg-rose-950/20 hover:text-rose-700 dark:hover:text-rose-300 transition-colors';
@endphp
<a {{ $attributes->merge(['class' => $classes]) }}>
resources/views/layouts/app.blade.php
+2 -2
View File
@@ -9,7 +9,7 @@
<!-- Page Heading -->
@if (isset($header))
<header class="bg-white dark:bg-neutral-950/50 backdrop-blur-lg shadow mt-[65px] z-10">
<header class="bg-white dark:bg-neutral-950/50 backdrop-blur-lg shadow mt-[80px] z-10">
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
{{ $header }}
</div>
@@ -17,7 +17,7 @@
@endif
<!-- Page Content -->
<div @if (!isset($header)) class="mt-[65px]" @else class="mt-[40px]" @endif>
<div @if (!isset($header)) class="mt-[80px]" @else class="mt-[40px]" @endif>
<main>
{{ $slot }}
</main>
resources/views/layouts/navigation.blade.php
+229 -163
View File
@@ -1,59 +1,65 @@
<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">
<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="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>
{{-- 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>
{{-- 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-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 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="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') }}
<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')">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
<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 pr-1">
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" />
@@ -62,91 +68,67 @@
<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 :href="route('contact.index')">
<i class="fa-solid fa-message"></i> Contact
</x-dropdown-link>
</x-slot>
</x-dropdown>
</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">
{{-- 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>
<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
{{-- Theme toggle --}}
@include('partials.themeswitcher')
<!-- Settings Dropdown -->
<div class="hidden sm:flex sm:items-center sm:ml-6">
<x-dropdown align="right" width="48">
{{-- Account dropdown --}}
<x-dropdown align="right" width="72">
<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">
<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-8 w-8 rounded-full object-cover mr-2"
<img class="h-9 w-9 rounded-full object-cover ring-2 ring-rose-500/50"
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
@auth
<div style="display: flex; flex-direction: row; align-items: flex-start;">
<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
</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">
<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>
</div>
</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 -->
{{-- 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
<div :class="{ 'block': open, 'hidden': !open }" class="hidden sm:hidden">
<div class="pt-2 pb-3 space-y-1">
<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>
<!-- 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">
<img class="h-8 w-8 rounded-full object-cover mr-2"
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>
@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 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>
<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 pr-4"></i> 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 pr-4"></i> {{ __('nav.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 pr-4"></i> {{ __('nav.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 pr-4"></i> {{ __('nav.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 pr-4"></i> {{ __('nav.watched') }}
<i class="fa-solid fa-eye"></i> {{ __('nav.watched') }}
</x-responsive-nav-link>
<!-- Authentication -->
<form method="POST" action="{{ route('logout') }}">
<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 pr-4"></i> {{ __('nav.logout') }}
<i class="fa-solid fa-right-from-bracket"></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-rose-700 hover:bg-rose-600 text-white font-bold px-4 h-10 rounded text-center p-[10px]">
{{-- 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') }}
</div>
</x-responsive-nav-link>
</div>
</div>
</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>
resources/views/livewire/nav-live-search.blade.php
+2 -2
View File
@@ -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-[300px] lg:min-w-[400px] xl:min-w-[500px]">
<div class="relative w-full sm:min-w-[200px] md:min-w-[200px] lg:min-w-[240px] xl:min-w-[300px]">
{{-- 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">
@@ -17,7 +17,7 @@
type="search"
id="live-search"
name="live-search"
class="block w-full pl-10 pr-28 py-3 text-sm rounded-2xl border border-gray-200 bg-white/80 dark:bg-neutral-900/50 dark:border-neutral-700 placeholder-gray-400 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-rose-600 focus:border-rose-700 transition"
class="block w-full pl-10 pr-24 py-3 text-sm rounded-2xl border border-gray-200 bg-white/80 dark:bg-neutral-900/50 dark:border-neutral-700 placeholder-gray-400 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-rose-600 focus:border-rose-700 transition"
placeholder="@if(request()->path() !== 'search'){{ __('search.search-hentai') }}@endif"
required
@if(request()->path() == 'search') disabled @endif
resources/views/partials/blurswitcher.blade.php
+8 -16
View File
@@ -1,22 +1,17 @@
<div class="grid grid-cols-2">
<p class="cursor-default">{{ __('Blur effects') }}</p>
<div class="flex items-center">
<div class="absolute right-6">
<label for="toggleBlur" class="flex items-center cursor-pointer">
<!-- toggle -->
<div class="relative">
<div class="flex w-full items-center justify-between gap-3 px-3 py-2">
<p class="cursor-default text-sm font-medium text-gray-700 dark:text-gray-300">{{ __('Blur effects') }}</p>
<label for="toggleBlur" class="relative flex cursor-pointer items-center">
<!-- input -->
<input id="toggleBlur" type="checkbox" class="sr-only" checked />
<!-- line -->
<div class="w-10 h-4 bg-rose-600 dark:bg-gray-400 rounded-full shadow-inner">
<div class="w-9 h-5 bg-rose-600 dark:bg-neutral-700 rounded-full shadow-inner">
</div>
<!-- dot -->
<div
class="dot absolute w-6 h-6 bg-white dark:bg-neutral-950 rounded-full shadow -left-1 -top-1 transition">
<div class="items-center ml-[4px] w-6 h-6 font-medium flex">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
<div class="dot absolute w-4 h-4 bg-white dark:bg-neutral-950 rounded-full shadow left-0.5 top-0.5 transition">
<div class="flex h-full w-full items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" 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-blur">
stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-blur text-gray-600 dark:text-gray-200">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path
d="M12 21a9.01 9.01 0 0 0 2.32 -.302a9 9 0 0 0 1.74 -16.733a9 9 0 1 0 -4.06 17.035z" />
@@ -29,8 +24,5 @@
</svg>
</div>
</div>
</div>
</label>
</div>
</div>
</div>
resources/views/partials/themeswitcher.blade.php
+5 -11
View File
@@ -1,16 +1,10 @@
<label for="toogleTheme" class="flex items-center cursor-pointer">
<!-- toggle -->
<div class="relative">
<label for="toogleTheme"
class="relative flex h-9 w-9 cursor-pointer items-center justify-center rounded-full ring-1 ring-gray-200 transition-colors hover:bg-rose-50 dark:ring-neutral-700 dark:hover:bg-rose-950/40">
<!-- input -->
<input id="toogleTheme" type="checkbox" class="sr-only" />
<!-- line -->
<div class="w-10 h-4 bg-rose-600 dark:bg-gray-400 rounded-full shadow-inner"></div>
<!-- dot -->
<div class="dot absolute w-6 h-6 bg-white dark:bg-neutral-950 rounded-full shadow -left-1 -top-1 transition">
<div class="items-center ml-[5px] w-6 h-6 font-medium flex">
<i class="fa-regular fa-moon text-white hidden dark:inline"></i>
<!-- icon -->
<div class="theme-icon flex items-center justify-center transition-transform duration-200">
<i class="fa-regular fa-moon text-gray-600 dark:text-gray-200 hidden dark:inline"></i>
<i class="fa-regular fa-sun text-yellow-400 dark:hidden"></i>
</div>
</div>
</div>
</label>
tests/Feature/NavigationTest.php
+32
View File
@@ -0,0 +1,32 @@
<?php
namespace Tests\Feature;
use App\Enums\UserRole;
use App\Models\User;
use Tests\RefreshDatabase;
use Tests\TestCase;
class NavigationTest extends TestCase
{
use RefreshDatabase;
public function test_home_page_renders_new_nav(): void
{
$this->get('/search')
->assertOk()
->assertSee('Browse')
->assertSee('Playlists')
->assertSeeHtml('id="toogleTheme"');
}
public function test_admin_layout_renders_for_admin(): void
{
$admin = User::factory()->create();
$admin->addRole(UserRole::ADMINISTRATOR);
$this->actingAs($admin)
->get(route('admin.upload.index'))
->assertOk();
}
}