Files
SkinbaseNova/resources/views/layouts/nova/toolbar.blade.php

357 lines
25 KiB
PHP

<header class="fixed inset-x-0 top-0 z-50 h-16 bg-nova border-b border-panel">
<div class="mx-auto w-full h-full px-4 flex items-center gap-3">
<!-- Mobile hamburger -->
<button id="btnSidebar"
class="md:hidden inline-flex items-center justify-center w-10 h-10 rounded-lg hover:bg-white/5"
aria-label="Open menu">
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
<!-- Logo -->
<a href="/" class="flex items-center gap-2 pr-2 shrink-0">
<img src="/gfx/sb_logo.png" alt="Skinbase.org" class="h-8 w-auto rounded-sm shadow-sm object-contain">
<span class="sr-only">Skinbase.org</span>
</a>
<!-- Desktop left nav: Discover · Browse · Creators · Community -->
@php
$navSection = match(true) {
request()->is('discover', 'discover/*') => 'discover',
request()->is('browse', 'photography', 'wallpapers', 'skins', 'other', 'tags', 'tags/*') => 'browse',
request()->is('creators', 'creators/*', 'stories', 'stories/*', 'following') => 'creators',
request()->is('forum', 'forum/*', 'news', 'news/*') => 'community',
default => null,
};
@endphp
<nav class="hidden lg:flex items-center gap-1 text-sm text-soft" aria-label="Main navigation">
{{-- DISCOVER --}}
<div class="relative">
<button class="inline-flex items-center gap-1 px-3 py-2 rounded-lg transition-colors {{ $navSection === 'discover' ? 'text-white bg-white/10' : 'hover:text-white hover:bg-white/5' }}"
data-dd="discover"
{{ $navSection === 'discover' ? 'aria-current=page' : '' }}>
Discover
<svg class="w-4 h-4 opacity-70" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9l6 6 6-6" /></svg>
</button>
<div id="dd-discover" class="dd-menu absolute left-0 mt-1 w-56 rounded-xl bg-panel border border-panel shadow-sb overflow-hidden">
<a class="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-white/5" href="/discover/trending">
<i class="fa-solid fa-fire w-4 text-center text-sb-muted"></i>Trending
</a>
<a class="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-white/5" href="/discover/rising">
<i class="fa-solid fa-rocket w-4 text-center text-sb-muted"></i>Rising
</a>
<a class="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-white/5" href="/discover/fresh">
<i class="fa-solid fa-bolt w-4 text-center text-sb-muted"></i>Fresh
</a>
<a class="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-white/5" href="/discover/top-rated">
<i class="fa-solid fa-medal w-4 text-center text-sb-muted"></i>Top Rated
</a>
<a class="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-white/5" href="/discover/most-downloaded">
<i class="fa-solid fa-download w-4 text-center text-sb-muted"></i>Most Downloaded
</a>
<a class="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-white/5" href="/discover/on-this-day">
<i class="fa-solid fa-calendar-day w-4 text-center text-sb-muted"></i>On This Day
</a>
@auth
<a class="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-white/5" href="{{ route('discover.for-you') }}">
<i class="fa-solid fa-wand-magic-sparkles w-4 text-center"></i>For You
</a>
@endauth
</div>
</div>
{{-- BROWSE --}}
<div class="relative">
<button class="inline-flex items-center gap-1 px-3 py-2 rounded-lg transition-colors {{ $navSection === 'browse' ? 'text-white bg-white/10' : 'hover:text-white hover:bg-white/5' }}"
data-dd="browse"
{{ $navSection === 'browse' ? 'aria-current=page' : '' }}>
Browse
<svg class="w-4 h-4 opacity-70" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9l6 6 6-6" /></svg>
</button>
<div id="dd-browse" class="dd-menu absolute left-0 mt-1 w-56 rounded-xl bg-panel border border-panel shadow-sb overflow-hidden">
<a class="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-white/5" href="/browse">
<i class="fa-solid fa-border-all w-4 text-center text-sb-muted"></i>All Artworks
</a>
<a class="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-white/5" href="/photography">
<i class="fa-solid fa-camera w-4 text-center text-sb-muted"></i>Photography
</a>
<a class="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-white/5" href="/wallpapers">
<i class="fa-solid fa-desktop w-4 text-center text-sb-muted"></i>Wallpapers
</a>
<a class="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-white/5" href="/skins">
<i class="fa-solid fa-layer-group w-4 text-center text-sb-muted"></i>Skins
</a>
<a class="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-white/5" href="/other">
<i class="fa-solid fa-folder-open w-4 text-center text-sb-muted"></i>Other
</a>
<a class="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-white/5" href="/tags">
<i class="fa-solid fa-tags w-4 text-center text-sb-muted"></i>Tags
</a>
</div>
</div>
{{-- CREATORS --}}
<div class="relative">
<button class="inline-flex items-center gap-1 px-3 py-2 rounded-lg transition-colors {{ $navSection === 'creators' ? 'text-white bg-white/10' : 'hover:text-white hover:bg-white/5' }}"
data-dd="creators"
{{ $navSection === 'creators' ? 'aria-current=page' : '' }}>
Creators
<svg class="w-4 h-4 opacity-70" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9l6 6 6-6" /></svg>
</button>
<div id="dd-creators" class="dd-menu absolute left-0 mt-1 w-56 rounded-xl bg-panel border border-panel shadow-sb overflow-hidden">
<a class="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-white/5" href="/creators/top">
<i class="fa-solid fa-star w-4 text-center text-sb-muted"></i>Top Creators
</a>
<a class="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-white/5" href="/creators/rising">
<i class="fa-solid fa-arrow-trend-up w-4 text-center text-sb-muted"></i>Rising Creators
</a>
<a class="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-white/5" href="/stories">
<i class="fa-solid fa-microphone w-4 text-center text-sb-muted"></i>Creator Stories
</a>
@auth
<a class="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-white/5" href="{{ route('dashboard.following') }}">
<i class="fa-solid fa-user-plus w-4 text-center text-sb-muted"></i>Following
</a>
@endauth
</div>
</div>
{{-- COMMUNITY --}}
<div class="relative">
<button class="inline-flex items-center gap-1 px-3 py-2 rounded-lg transition-colors {{ $navSection === 'community' ? 'text-white bg-white/10' : 'hover:text-white hover:bg-white/5' }}"
data-dd="community"
{{ $navSection === 'community' ? 'aria-current=page' : '' }}>
Community
<svg class="w-4 h-4 opacity-70" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9l6 6 6-6" /></svg>
</button>
<div id="dd-community" class="dd-menu absolute left-0 mt-1 w-56 rounded-xl bg-panel border border-panel shadow-sb overflow-hidden">
<a class="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-white/5" href="/forum">
<i class="fa-solid fa-comments w-4 text-center text-sb-muted"></i>Forum
</a>
<a class="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-white/5" href="/news">
<i class="fa-solid fa-newspaper w-4 text-center text-sb-muted"></i>Announcements
</a>
</div>
</div>
</nav>
<!-- Search: collapsed pill expands on click -->
<div class="flex-1 flex items-center justify-center px-2 min-w-0">
<div id="topbar-search-root" class="w-full flex justify-center"></div>
</div>
@auth
<!-- Upload CTA -->
<a href="{{ route('upload') }}"
class="hidden md:inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-sky-600 hover:bg-sky-500 text-white text-sm font-medium transition-colors shrink-0">
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M12 5v14M5 12h14" />
</svg>
Upload
</a>
<!-- Notification icons -->
<div class="hidden md:flex items-center gap-1 text-soft">
<a href="{{ route('discover.for-you') }}"
class="relative w-10 h-10 inline-flex items-center justify-center rounded-lg transition-colors {{ request()->routeIs('discover.for-you') ? 'bg-yellow-500/15 text-yellow-300' : 'hover:bg-white/5' }}"
title="For You">
<i class="fa-solid fa-wand-magic-sparkles w-5 h-5 text-[1.1rem] {{ request()->routeIs('discover.for-you') ? 'text-yellow-300' : 'text-sb-muted' }}"></i>
</a>
<a href="{{ route('dashboard.favorites') }}"
class="relative w-10 h-10 inline-flex items-center justify-center rounded-lg hover:bg-white/5"
title="Favourites">
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M12 21s-7-4.4-9-9a5.5 5.5 0 0 1 9-6 5.5 5.5 0 0 1 9 6c-2 4.6-9 9-9 9z" />
</svg>
@if(($favCount ?? 0) > 0)
<span class="absolute -bottom-1 right-0 text-[11px] tabular-nums px-1.5 py-0.5 rounded bg-red-700/70 text-white border border-sb-line">{{ $favCount }}</span>
@endif
</a>
<a href="{{ Route::has('messages.index') ? route('messages.index') : '/messages' }}"
class="relative w-10 h-10 inline-flex items-center justify-center rounded-lg hover:bg-white/5"
title="Messages">
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
</svg>
@if(($msgCount ?? 0) > 0)
<span class="absolute -bottom-1 right-0 text-[11px] tabular-nums px-1.5 py-0.5 rounded bg-red-700/70 text-white border border-sb-line">{{ $msgCount }}</span>
@endif
</a>
<a href="{{ route('dashboard.comments') }}"
class="relative w-10 h-10 inline-flex items-center justify-center rounded-lg hover:bg-white/5"
title="Notifications">
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M18 8a6 6 0 10-12 0c0 7-3 7-3 7h18s-3 0-3-7" />
<path d="M13.7 21a2 2 0 01-3.4 0" />
</svg>
@if(($noticeCount ?? 0) > 0)
<span class="absolute -bottom-1 right-0 text-[11px] tabular-nums px-1.5 py-0.5 rounded bg-red-700/70 text-white border border-sb-line">{{ $noticeCount }}</span>
@endif
</a>
</div>
<!-- Profile dropdown -->
<div class="relative">
<button class="flex items-center gap-2 pl-2 pr-3 h-10 rounded-lg hover:bg-white/5 transition-colors" data-dd="user">
@php
$toolbarUserId = (int) ($userId ?? Auth::id() ?? 0);
$toolbarAvatarHash = $avatarHash ?? optional(Auth::user())->profile->avatar_hash ?? null;
@endphp
<img class="w-7 h-7 rounded-full object-cover ring-1 ring-white/10"
src="{{ \App\Support\AvatarUrl::forUser($toolbarUserId, $toolbarAvatarHash, 64) }}"
alt="{{ $displayName ?? 'User' }}" />
<span class="hidden xl:inline text-sm text-white/90">{{ $displayName ?? 'User' }}</span>
<svg class="w-4 h-4 opacity-70" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M6 9l6 6 6-6" />
</svg>
</button>
<div id="dd-user"
class="dd-menu absolute right-0 mt-1 w-64 rounded-xl bg-panel border border-panel shadow-sb overflow-hidden">
@php
$toolbarUsername = strtolower((string) (Auth::user()->username ?? ''));
$routeUpload = Route::has('upload') ? route('upload') : '/upload';
$routeDashboardFavorites = Route::has('dashboard.favorites') ? route('dashboard.favorites') : '/dashboard/favorites';
$routeEditProfile = Route::has('settings') ? route('settings') : '/settings';
$routePublicProfile = Route::has('profile.show') ? route('profile.show', ['username' => $toolbarUsername]) : '/@'.$toolbarUsername;
@endphp
<a class="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-white/5" href="{{ $routeUpload }}">
<span class="w-6 h-6 rounded-md bg-white/5 inline-flex items-center justify-center shrink-0"><i class="fa-solid fa-upload text-xs text-sb-muted"></i></span>
Upload
</a>
<a class="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-white/5" href="/studio/artworks">
<span class="w-6 h-6 rounded-md bg-white/5 inline-flex items-center justify-center shrink-0"><i class="fa-solid fa-palette text-xs text-sb-muted"></i></span>
Studio
</a>
<a class="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-white/5" href="{{ $routeDashboardFavorites }}">
<span class="w-6 h-6 rounded-md bg-white/5 inline-flex items-center justify-center shrink-0"><i class="fa-solid fa-heart text-xs text-sb-muted"></i></span>
My Favorites
</a>
<div class="border-t border-panel my-1"></div>
<a class="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-white/5" href="{{ $routePublicProfile }}">
<span class="w-6 h-6 rounded-md bg-white/5 inline-flex items-center justify-center shrink-0"><i class="fa-solid fa-eye text-xs text-sb-muted"></i></span>
View Profile
</a>
<a class="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-white/5" href="{{ $routeEditProfile }}">
<span class="w-6 h-6 rounded-md bg-white/5 inline-flex items-center justify-center shrink-0"><i class="fa-solid fa-cog text-xs text-sb-muted"></i></span>
Settings
</a>
@if(in_array(strtolower((string) (Auth::user()->role ?? '')), ['admin', 'moderator'], true))
<a class="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-white/5" href="{{ route('admin.usernames.moderation') }}">
<span class="w-6 h-6 rounded-md bg-white/5 inline-flex items-center justify-center shrink-0"><i class="fa-solid fa-user-shield text-xs text-sb-muted"></i></span>
Moderation
</a>
@endif
<div class="border-t border-panel mt-1 mb-1"></div>
<form method="POST" action="{{ route('logout') }}" class="mb-1">
@csrf
<button type="submit" class="w-full text-left flex items-center gap-3 px-4 py-2 text-sm text-red-400 hover:bg-white/5">
<span class="w-6 h-6 rounded-md bg-white/5 inline-flex items-center justify-center shrink-0"><i class="fa-solid fa-sign-out text-xs"></i></span>
Logout
</button>
</form>
</div>
</div>
@else
<!-- Guest: Upload CTA + Join / Sign in -->
<div class="hidden md:flex items-center gap-2">
<a href="/register"
class="px-3 py-2 rounded-lg text-sm text-sb-muted hover:text-white hover:bg-white/5 transition-colors">Join</a>
<a href="/login"
class="px-4 py-2 rounded-lg bg-sky-600 hover:bg-sky-500 text-white text-sm font-medium transition-colors">Sign in</a>
</div>
@endauth
</div>
</header>
<!-- MOBILE MENU -->
<div class="hidden fixed top-16 left-0 right-0 z-40 bg-nova border-b border-panel p-4 shadow-sb" id="mobileMenu">
<div class="space-y-0.5 text-sm text-soft">
@guest
<a class="block py-2.5 px-3 rounded-lg font-medium text-sky-400" href="/register">Join Skinbase</a>
<a class="block py-2.5 px-3 rounded-lg" href="/login">Sign in</a>
<div class="my-2 border-t border-panel"></div>
@endguest
<div class="pt-1 pb-1 px-3 text-[11px] font-semibold uppercase tracking-widest text-sb-muted">Discover</div>
<a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="/discover/trending"><i class="fa-solid fa-fire w-4 text-center text-sb-muted"></i>Trending</a>
<a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="/discover/rising"><i class="fa-solid fa-rocket w-4 text-center text-sb-muted"></i>Rising</a>
<a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="/discover/fresh"><i class="fa-solid fa-bolt w-4 text-center text-sb-muted"></i>Fresh</a>
<a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="/discover/top-rated"><i class="fa-solid fa-medal w-4 text-center text-sb-muted"></i>Top Rated</a>
<a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="/discover/most-downloaded"><i class="fa-solid fa-download w-4 text-center text-sb-muted"></i>Most Downloaded</a>
<a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="/discover/on-this-day"><i class="fa-solid fa-calendar-day w-4 text-center text-sb-muted"></i>On This Day</a>
@auth
<a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="{{ route('discover.for-you') }}"><i class="fa-solid fa-wand-magic-sparkles w-4 text-center text-yellow-400/70"></i>For You</a>
@endauth
<div class="pt-3 pb-1 px-3 text-[11px] font-semibold uppercase tracking-widest text-sb-muted">Browse</div>
<a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="/browse"><i class="fa-solid fa-border-all w-4 text-center text-sb-muted"></i>All Artworks</a>
<a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="/photography"><i class="fa-solid fa-camera w-4 text-center text-sb-muted"></i>Photography</a>
<a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="/wallpapers"><i class="fa-solid fa-desktop w-4 text-center text-sb-muted"></i>Wallpapers</a>
<a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="/skins"><i class="fa-solid fa-layer-group w-4 text-center text-sb-muted"></i>Skins</a>
<a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="/other"><i class="fa-solid fa-folder-open w-4 text-center text-sb-muted"></i>Other</a>
<a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="/tags"><i class="fa-solid fa-tags w-4 text-center text-sb-muted"></i>Tags</a>
<div class="pt-3 pb-1 px-3 text-[11px] font-semibold uppercase tracking-widest text-sb-muted">Creators</div>
<a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="/creators/top"><i class="fa-solid fa-star w-4 text-center text-sb-muted"></i>Top Creators</a>
<a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="/creators/rising"><i class="fa-solid fa-arrow-trend-up w-4 text-center text-sb-muted"></i>Rising Creators</a>
<a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="/stories"><i class="fa-solid fa-microphone w-4 text-center text-sb-muted"></i>Creator Stories</a>
@auth
<a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="{{ route('dashboard.following') }}"><i class="fa-solid fa-user-plus w-4 text-center text-sb-muted"></i>Following</a>
@endauth
<div class="pt-3 pb-1 px-3 text-[11px] font-semibold uppercase tracking-widest text-sb-muted">Community</div>
<a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="/forum"><i class="fa-solid fa-comments w-4 text-center text-sb-muted"></i>Forum</a>
<a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="/news"><i class="fa-solid fa-newspaper w-4 text-center text-sb-muted"></i>Announcements</a>
@auth
<div class="pt-4 pb-2">
<a href="{{ route('upload') }}"
class="flex items-center justify-center gap-2 w-full py-2.5 px-4 rounded-lg bg-sky-600 hover:bg-sky-500 text-white font-medium transition-colors">
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M12 5v14M5 12h14" />
</svg>
Upload Artwork
</a>
</div>
@php
$mobileUsername = strtolower((string) (Auth::user()->username ?? ''));
$mobileProfile = Route::has('profile.show') ? route('profile.show', ['username' => $mobileUsername]) : '/@'.$mobileUsername;
@endphp
<div class="pt-1 pb-1 px-3 text-[11px] font-semibold uppercase tracking-widest text-sb-muted">My Account</div>
<a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="/studio/artworks">
<i class="fa-solid fa-palette w-4 text-center text-sb-muted"></i>Studio
</a>
<a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="{{ Route::has('dashboard.favorites') ? route('dashboard.favorites') : '/dashboard/favorites' }}">
<i class="fa-solid fa-heart w-4 text-center text-sb-muted"></i>My Favorites
</a>
<a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="{{ $mobileProfile }}">
<i class="fa-solid fa-circle-user w-4 text-center text-sb-muted"></i>View Profile
</a>
<a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="{{ Route::has('settings') ? route('settings') : '/settings' }}">
<i class="fa-solid fa-cog w-4 text-center text-sb-muted"></i>Settings
</a>
@if(in_array(strtolower((string) (Auth::user()->role ?? '')), ['admin', 'moderator'], true))
<a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="{{ route('admin.usernames.moderation') }}">
<i class="fa-solid fa-user-shield w-4 text-center text-sb-muted"></i>Moderation
</a>
@endif
@endauth
</div>
</div>