klevze/SkinbaseNova
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Save workspace changes

Browse Source
This commit is contained in:
Gregor Klevže
2026-04-18 17:02:56 +02:00
parent f02ea9a711
commit 87d60af5a9
4220 changed files with 1388603 additions and 1554 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
.deploy/artwork-evolution-release/resources/views/layouts/__legacy.blade.php Normal file
View File

@@ -0,0 +1,51 @@
@include('layouts._legacy')
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
<title>{{ $page_title ?? 'Skinbase' }}</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="{{ $page_meta_description ?? '' }}">
<meta name="keywords" content="{{ $page_meta_keywords ?? '' }}">
@isset($page_canonical)
<link rel="canonical" href="{{ $page_canonical }}" />
@endisset
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
<link rel="shortcut icon" href="/favicon.ico">
@vite(['resources/css/app.css','resources/scss/nova.scss','resources/js/nova.js'])
@stack('head')
</head>
<body class="bg-nova-900 text-white min-h-screen flex flex-col">
<div id="topbar-root"></div>
@include('layouts.nova.toolbar')
<main class="flex-1 pt-16">
<div class="mx-auto w-full max-w-7xl px-4 py-6 md:px-6 lg:px-8">
@hasSection('sidebar')
<div class="grid grid-cols-1 gap-6 xl:grid-cols-[minmax(0,1fr)_20rem]">
<section class="min-w-0">
@yield('content')
</section>
<aside class="xl:sticky xl:top-24 xl:self-start">
@yield('sidebar')
</aside>
</div>
@else
<section class="min-w-0">
@yield('content')
</section>
@endif
</div>
</main>
@include('layouts.nova.footer')
@stack('toolbar')
@stack('scripts')
</body>
</html>

40
.deploy/artwork-evolution-release/resources/views/layouts/_app.blade.php Normal file
View File

@@ -0,0 +1,40 @@
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />
<!-- Scripts -->
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="font-sans antialiased bg-nova-800">
<div class="min-h-screen">
@include('layouts.navigation')
<!-- Page Heading -->
@isset($header)
<header class="bg-white shadow">
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
{{ $header }}
</div>
</header>
@endisset
<!-- Page Content -->
<main>
@if(isset($slot))
{{ $slot }}
@else
@yield('content')
@endif
</main>
</div>
</body>
</html>

30
.deploy/artwork-evolution-release/resources/views/layouts/_guest.blade.php Normal file
View File

@@ -0,0 +1,30 @@
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />
<!-- Scripts -->
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="font-sans text-gray-900 antialiased">
<div class="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0 bg-gray-100">
<div>
<a href="/">
<x-application-logo class="w-20 h-20 fill-current text-gray-500" />
</a>
</div>
<div class="w-full sm:max-w-md mt-6 px-6 py-4 bg-white shadow-md overflow-hidden sm:rounded-lg">
{{ $slot }}
</div>
</div>
</body>
</html>

53
.deploy/artwork-evolution-release/resources/views/layouts/_legacy.blade.php Normal file
View File

@@ -0,0 +1,53 @@
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
@if($useUnifiedSeo ?? false)
@include('partials.seo.head', ['seo' => $seo ?? null])
@else
<title>{{ $page_title ?? 'Skinbase' }}</title>
<meta name="description" content="{{ $page_meta_description ?? '' }}">
<meta name="keywords" content="{{ $page_meta_keywords ?? '' }}">
@isset($page_canonical)
<link rel="canonical" href="{{ $page_canonical }}" />
@endisset
@endif
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
<link rel="shortcut icon" href="/favicon.ico">
@vite(['resources/css/app.css','resources/scss/nova.scss','resources/js/nova.js'])
@stack('head')
</head>
<body class="bg-nova-900 text-white min-h-screen flex flex-col">
<div id="topbar-root"></div>
@include('layouts.nova.toolbar')
<main class="flex-1 pt-16">
<div class="mx-auto w-full max-w-7xl px-4 py-6 md:px-6 lg:px-8">
@hasSection('sidebar')
<div class="grid grid-cols-1 gap-6 xl:grid-cols-[minmax(0,1fr)_20rem]">
<section class="min-w-0">
@yield('content')
</section>
<aside class="xl:sticky xl:top-24 xl:self-start">
@yield('sidebar')
</aside>
</div>
@else
<section class="min-w-0">
@yield('content')
</section>
@endif
</div>
</main>
@include('layouts.nova.footer')
@stack('toolbar')
@stack('scripts')
</body>
</html>

110
.deploy/artwork-evolution-release/resources/views/layouts/_navigation.blade.php Normal file
View File

@@ -0,0 +1,110 @@
<nav x-data="{ open: false }" class="bg-white border-b border-gray-100">
<!-- Primary Navigation Menu -->
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex">
<!-- Logo -->
<div class="shrink-0 flex items-center">
<a href="{{ route('dashboard') }}">
<x-application-logo class="block h-9 w-auto fill-current text-gray-800" />
</a>
</div>
<!-- Navigation Links -->
<div class="hidden space-x-8 sm:-my-px sm:ms-10 sm:flex">
<x-nav-link :href="route('dashboard')" :active="request()->routeIs('dashboard')">
{{ __('Dashboard') }}
</x-nav-link>
@auth
<x-nav-link :href="route('discover.for-you')" :active="request()->routeIs('discover.for-you')">
{{ __('For You') }}
</x-nav-link>
@endauth
</div>
</div>
<!-- Settings Dropdown -->
<div class="hidden sm:flex sm:items-center sm:ms-6">
<x-dropdown align="right" width="48">
<x-slot name="trigger">
<button class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 bg-white hover:text-gray-700 focus:outline-none transition ease-in-out duration-150">
<div>{{ Auth::user()->name }}</div>
<div class="ms-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>
</x-slot>
<x-slot name="content">
<x-dropdown-link :href="route('profile.edit')">
{{ __('Profile') }}
</x-dropdown-link>
<!-- Authentication -->
<form method="POST" action="{{ route('logout') }}">
@csrf
<x-dropdown-link :href="route('logout')"
onclick="event.preventDefault();
this.closest('form').submit();">
{{ __('Log Out') }}
</x-dropdown-link>
</form>
</x-slot>
</x-dropdown>
</div>
<!-- Hamburger -->
<div class="-me-2 flex items-center sm:hidden">
<button @click="open = ! open" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out">
<svg class="h-6 w-6" 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>
</button>
</div>
</div>
</div>
<!-- Responsive Navigation Menu -->
<div :class="{'block': open, 'hidden': ! open}" class="hidden sm:hidden">
<div class="pt-2 pb-3 space-y-1">
<x-responsive-nav-link :href="route('dashboard')" :active="request()->routeIs('dashboard')">
{{ __('Dashboard') }}
</x-responsive-nav-link>
@auth
<x-responsive-nav-link :href="route('discover.for-you')" :active="request()->routeIs('discover.for-you')">
{{ __('For You') }}
</x-responsive-nav-link>
@endauth
</div>
<!-- Responsive Settings Options -->
<div class="pt-4 pb-1 border-t border-gray-200">
<div class="px-4">
<div class="font-medium text-base text-gray-800">{{ Auth::user()->name }}</div>
<div class="font-medium text-sm text-gray-500">{{ Auth::user()->email }}</div>
</div>
<div class="mt-3 space-y-1">
<x-responsive-nav-link :href="route('profile.edit')">
{{ __('Profile') }}
</x-responsive-nav-link>
<!-- Authentication -->
<form method="POST" action="{{ route('logout') }}">
@csrf
<x-responsive-nav-link :href="route('logout')"
onclick="event.preventDefault();
this.closest('form').submit();">
{{ __('Log Out') }}
</x-responsive-nav-link>
</form>
</div>
</div>
</div>
</nav>

11
.deploy/artwork-evolution-release/resources/views/layouts/app.blade.php Normal file
View File

@@ -0,0 +1,11 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>@yield('title', 'Skinbase')</title>
</head>
<body>
@yield('content')
</body>
</html>

100
.deploy/artwork-evolution-release/resources/views/layouts/navigation.blade.php Normal file
View File

@@ -0,0 +1,100 @@
<nav x-data="{ open: false }" class="bg-white border-b border-gray-100">
<!-- Primary Navigation Menu -->
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex">
<!-- Logo -->
<div class="shrink-0 flex items-center">
<a href="{{ route('dashboard') }}">
<x-application-logo class="block h-9 w-auto fill-current text-gray-800" />
</a>
</div>
<!-- Navigation Links -->
<div class="hidden space-x-8 sm:-my-px sm:ms-10 sm:flex">
<x-nav-link :href="route('dashboard')" :active="request()->routeIs('dashboard')">
{{ __('Dashboard') }}
</x-nav-link>
</div>
</div>
<!-- Settings Dropdown -->
<div class="hidden sm:flex sm:items-center sm:ms-6">
<x-dropdown align="right" width="48">
<x-slot name="trigger">
<button class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 bg-white hover:text-gray-700 focus:outline-none transition ease-in-out duration-150">
<div>{{ Auth::user()->name }}</div>
<div class="ms-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>
</x-slot>
<x-slot name="content">
<x-dropdown-link :href="route('profile.edit')">
{{ __('Profile') }}
</x-dropdown-link>
<!-- Authentication -->
<form method="POST" action="{{ route('logout') }}">
@csrf
<x-dropdown-link :href="route('logout')"
onclick="event.preventDefault();
this.closest('form').submit();">
{{ __('Log Out') }}
</x-dropdown-link>
</form>
</x-slot>
</x-dropdown>
</div>
<!-- Hamburger -->
<div class="-me-2 flex items-center sm:hidden">
<button @click="open = ! open" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out">
<svg class="h-6 w-6" 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>
</button>
</div>
</div>
</div>
<!-- Responsive Navigation Menu -->
<div :class="{'block': open, 'hidden': ! open}" class="hidden sm:hidden">
<div class="pt-2 pb-3 space-y-1">
<x-responsive-nav-link :href="route('dashboard')" :active="request()->routeIs('dashboard')">
{{ __('Dashboard') }}
</x-responsive-nav-link>
</div>
<!-- Responsive Settings Options -->
<div class="pt-4 pb-1 border-t border-gray-200">
<div class="px-4">
<div class="font-medium text-base text-gray-800">{{ Auth::user()->name }}</div>
<div class="font-medium text-sm text-gray-500">{{ Auth::user()->email }}</div>
</div>
<div class="mt-3 space-y-1">
<x-responsive-nav-link :href="route('profile.edit')">
{{ __('Profile') }}
</x-responsive-nav-link>
<!-- Authentication -->
<form method="POST" action="{{ route('logout') }}">
@csrf
<x-responsive-nav-link :href="route('logout')"
onclick="event.preventDefault();
this.closest('form').submit();">
{{ __('Log Out') }}
</x-responsive-nav-link>
</form>
</div>
</div>
</div>
</nav>

335
.deploy/artwork-evolution-release/resources/views/layouts/nova.blade.php Normal file
View File

@@ -0,0 +1,335 @@
@php
$gridVersion = request()->query('grid') === 'v2' ? 'v2' : 'v1';
$deferToolbarSearch = request()->routeIs('index');
$deferFontAwesome = request()->routeIs('index');
$deferWebManifest = request()->routeIs('index');
$isInertiaPage = isset($page) && is_array($page);
$shouldRenderBladeSeo = ($useUnifiedSeo ?? false) && (($renderBladeSeo ?? false) || ! $isInertiaPage);
$novaViteEntries = [
'resources/css/app.css',
'resources/css/nova-grid.css',
'resources/scss/nova.scss',
'resources/js/nova.js',
];
if (!$deferToolbarSearch) {
$novaViteEntries[] = 'resources/js/entry-search.jsx';
}
@endphp
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}" data-grid-version="{{ $gridVersion }}">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="csrf-token" content="{{ csrf_token() }}">
@if($shouldRenderBladeSeo)
@include('partials.seo.head', ['seo' => $seo ?? null])
@endif
{{-- Global RSS feed discovery --}}
<link rel="alternate" type="application/rss+xml" title="Skinbase Latest Artworks" href="{{ url('/rss') }}">
<!-- Icons: keep CDN delivery, but keep homepage webfonts out of the initial critical path -->
@if(!$deferFontAwesome)
<link rel="preconnect" href="https://cdnjs.cloudflare.com" crossorigin>
<link rel="dns-prefetch" href="//cdnjs.cloudflare.com">
<link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" as="style" crossorigin>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" media="print" onload="this.media='all'" crossorigin>
<noscript>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" crossorigin>
</noscript>
@endif
<link rel="icon" type="image/png" href="/favicon/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/svg+xml" href="/favicon/favicon.svg" />
<link rel="shortcut icon" href="/favicon/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png" />
@if(!$deferWebManifest)
<link rel="manifest" href="/favicon/site.webmanifest" />
@endif
@vite($novaViteEntries)
@stack('head')
@if($deferToolbarSearch)
<script type="module">
(() => {
const searchEntryUrl = @js(Vite::asset('resources/js/entry-search.jsx'));
let searchLoaded = false;
const loadSearch = (intent = null) => {
if (searchLoaded) {
return;
}
if (intent) {
window.__sbSearchIntent = intent;
}
searchLoaded = true;
cleanup();
import(searchEntryUrl);
};
const resolveIntent = (eventTarget) => {
return eventTarget?.closest?.('[data-search-intent]')?.getAttribute('data-search-intent') || null;
};
const handlePointerEnter = () => {
loadSearch();
};
const handleActivate = (event) => {
const intent = resolveIntent(event.target);
loadSearch(intent);
};
const handleShortcut = (event) => {
if (!((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'k')) {
return;
}
event.preventDefault();
loadSearch(window.matchMedia('(max-width: 767px)').matches ? 'mobile' : 'desktop');
};
const onReady = () => {
const searchRoot = document.getElementById('topbar-search-root');
if (!searchRoot) {
return;
}
searchRoot.addEventListener('pointerenter', handlePointerEnter, { once: true, passive: true });
searchRoot.addEventListener('click', handleActivate, { passive: true });
searchRoot.addEventListener('touchstart', handleActivate, { passive: true });
document.addEventListener('keydown', handleShortcut);
};
const cleanup = () => {
const searchRoot = document.getElementById('topbar-search-root');
if (searchRoot) {
searchRoot.removeEventListener('pointerenter', handlePointerEnter);
searchRoot.removeEventListener('click', handleActivate);
searchRoot.removeEventListener('touchstart', handleActivate);
}
document.removeEventListener('keydown', handleShortcut);
};
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', onReady, { once: true });
} else {
onReady();
}
})();
</script>
@endif
@if($deferFontAwesome)
<script>
(() => {
const href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css';
const linkId = 'deferred-font-awesome';
let loaded = false;
const loadFontAwesome = () => {
if (loaded || document.getElementById(linkId)) {
return;
}
loaded = true;
cleanup();
const link = document.createElement('link');
link.id = linkId;
link.rel = 'stylesheet';
link.href = href;
link.crossOrigin = 'anonymous';
document.head.appendChild(link);
};
const onReady = () => {
const toolbar = document.getElementById('nova-toolbar');
if (toolbar) {
toolbar.addEventListener('pointerenter', loadFontAwesome, { once: true, passive: true });
toolbar.addEventListener('focusin', loadFontAwesome, { once: true, passive: true });
toolbar.addEventListener('pointerdown', loadFontAwesome, { once: true, passive: true });
}
};
const cleanup = () => {
const toolbar = document.getElementById('nova-toolbar');
if (toolbar) {
toolbar.removeEventListener('pointerenter', loadFontAwesome);
toolbar.removeEventListener('focusin', loadFontAwesome);
toolbar.removeEventListener('pointerdown', loadFontAwesome);
}
};
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', onReady, { once: true });
} else {
onReady();
}
})();
</script>
@endif
@if($isInertiaPage)
@inertiaHead
@endif
@if(config('services.google_adsense.publisher_id'))
{{-- Google AdSense — consent-gated loader --}}
{{-- Script is only injected after the user accepts all cookies. --}}
{{-- If consent was given on a previous visit it fires on page load. --}}
<script>
(function () {
var PUB = '{{ config('services.google_adsense.publisher_id') }}';
var SCRIPT_ID = 'adsense-js';
function injectAdsense() {
if (document.getElementById(SCRIPT_ID)) return;
var s = document.createElement('script');
s.id = SCRIPT_ID;
s.async = true;
s.crossOrigin = 'anonymous';
s.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=' + PUB;
document.head.appendChild(s);
}
// Expose so Alpine consent banner can trigger immediately on accept
window.sbLoadAds = injectAdsense;
// If the user already consented on a previous visit, load straight away
if (localStorage.getItem('sb_cookie_consent') === 'all') {
injectAdsense();
}
// Handle consent granted in another tab
window.addEventListener('storage', function (e) {
if (e.key === 'sb_cookie_consent' && e.newValue === 'all') {
injectAdsense();
}
});
})();
</script>
@endif
</head>
@php
$authBgRoutes = [
'login', 'register', 'register.notice', 'password.request', 'password.reset',
'verification.notice', 'registration.verify', 'setup.password.create', 'setup.username.create', 'password.confirm'
];
$useAuthBackground = request()->route() && in_array(request()->route()->getName(), $authBgRoutes);
$authBackgrounds = [
'/gfx/skinbase_back_001.webp',
'/gfx/skinbase_back_002.webp',
'/gfx/skinbase_back_003.webp',
'/gfx/skinbase_back_004.webp',
];
$selectedAuthBg = $useAuthBackground ? $authBackgrounds[array_rand($authBackgrounds)] : null;
@endphp
<body class="bg-nova-900 text-white min-h-screen flex flex-col" @if($selectedAuthBg) style="background: url('{{ $selectedAuthBg }}') center/cover no-repeat; background-attachment: fixed;" @endif>
<!-- React Topbar mount point -->
<div id="topbar-root"
@auth
data-user-id="{{ Auth::id() }}"
data-display-name="{{ Auth::user()->name ?? '' }}"
data-username="{{ Auth::user()->username ?? '' }}"
data-avatar-url="{{ \App\Support\AvatarUrl::forUser((int) Auth::id(), optional(Auth::user()->profile)->avatar_hash, 64) }}"
data-upload-url="{{ Route::has('upload') ? route('upload') : '/upload' }}"
@endauth
></div>
@include('layouts.nova.toolbar')
<main class="flex-1 @yield('main-class', 'pt-16')">
@yield('content')
</main>
@include('layouts.nova.footer')
{{-- Toast notifications (Alpine) --}}
@php
$toastMessage = session('status') ?? session('error') ?? null;
$toastType = session('error') ? 'error' : 'success';
$toastBorder = session('error') ? 'border-red-500' : 'border-green-500';
@endphp
@if($toastMessage)
<div x-data="{show:true}" x-show="show" x-init="setTimeout(()=>show=false,4000)" x-cloak
class="fixed right-4 bottom-6 z-50">
<div class="max-w-sm w-full rounded-lg shadow-lg overflow-hidden bg-nova-600 border {{ $toastBorder }}">
<div class="px-4 py-3 flex items-start gap-3">
<div class="flex-shrink-0">
@if(session('error'))
<svg class="w-6 h-6 text-red-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 12H6"/></svg>
@else
<svg class="w-6 h-6 text-green-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
@endif
</div>
<div class="flex-1 text-sm text-white/95">{!! nl2br(e($toastMessage)) !!}</div>
<button @click="show=false" class="text-white/60 hover:text-white">
<svg class="w-5 h-5" viewBox="0 0 20 20" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 6l8 8M6 14L14 6"/></svg>
</button>
</div>
</div>
</div>
@endif
{{-- Cookie Consent Banner --}}
<div
x-data="{
show: false,
init() {
if (!localStorage.getItem('sb_cookie_consent')) {
this.show = true;
}
},
accept() {
localStorage.setItem('sb_cookie_consent', 'all');
this.show = false;
if (typeof window.sbLoadAds === 'function') window.sbLoadAds();
},
essential() {
localStorage.setItem('sb_cookie_consent', 'essential');
this.show = false;
}
}"
x-show="show"
x-cloak
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 translate-y-4"
x-transition:enter-end="opacity-100 translate-y-0"
x-transition:leave="transition ease-in duration-200"
x-transition:leave-start="opacity-100 translate-y-0"
x-transition:leave-end="opacity-0 translate-y-4"
class="fixed bottom-0 left-0 right-0 z-50 border-t border-orange-400/30 bg-orange-950/50 backdrop-blur-2xl px-4 md:px-8 py-5"
role="dialog"
aria-label="Cookie consent"
aria-live="polite"
>
<div class="max-w-6xl mx-auto flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-6">
<div class="flex items-start gap-3 flex-1">
<span class="text-orange-400 mt-0.5 shrink-0 text-lg">🍪</span>
<p class="text-sm text-orange-100/90 leading-relaxed">
We use <strong class="text-white">essential cookies</strong> to keep you logged in and protect your session.
With your permission we also load <strong class="text-white">advertising cookies</strong> from third-party networks.
<a href="/privacy-policy#cookies" class="text-orange-300 hover:text-orange-200 hover:underline ml-1">Learn more ↗</a>
</p>
</div>
<div class="flex items-center gap-2 shrink-0">
<button
@click="essential()"
class="rounded-lg border border-orange-400/40 px-4 py-2 text-sm text-orange-200 hover:text-white hover:border-orange-400/70 hover:bg-white/5 transition-colors"
>Essential only</button>
<button
@click="accept()"
class="rounded-lg bg-orange-500 hover:bg-orange-400 px-4 py-2 text-sm font-semibold text-white shadow-lg shadow-orange-900/40 transition-colors"
>Accept all</button>
</div>
</div>
</div>
@stack('scripts')
</body>
</html>

64
.deploy/artwork-evolution-release/resources/views/layouts/nova/content-layout.blade.php Normal file
View File

@@ -0,0 +1,64 @@
{{--
ContentLayout — minimal hero for tags directory, blog, static pages, legal.
Used by /tags, /blog/*, /pages/*, /about, /help, /legal/*
Expected variables:
$page_title, $page_meta_description, $page_canonical, $page_robots
$breadcrumbs (collection, optional)
Content via @yield('page-content')
--}}
@php($useUnifiedSeo = true)
@extends('layouts.nova')
@section('content')
{{-- Minimal hero --}}
@if(!empty($center_content))
<x-centered-content :max="$center_max ?? '3xl'" class="pt-10 pb-6" style="padding-top:2.5rem;padding-bottom:1.5rem;">
@hasSection('page-hero')
@yield('page-hero')
@else
{{-- Breadcrumbs --}}
@include('components.breadcrumbs', ['breadcrumbs' => $breadcrumbs ?? collect()])
<div class="mt-4">
<h1 class="text-3xl font-bold text-white leading-tight">
{{ $hero_title ?? $page_title ?? 'Skinbase' }}
</h1>
@isset($hero_description)
<p class="mt-1 text-sm text-white/50 max-w-xl">{{ $hero_description }}</p>
@endisset
</div>
@endif
</x-centered-content>
{{-- Page body (centered) --}}
<x-centered-content :max="$center_max ?? '3xl'" class="pb-16">
@yield('page-content')
</x-centered-content>
@else
<div class="px-6 pt-10 pb-6 md:px-10">
@hasSection('page-hero')
@yield('page-hero')
@else
{{-- Breadcrumbs --}}
@include('components.breadcrumbs', ['breadcrumbs' => $breadcrumbs ?? collect()])
<div class="mt-4">
<h1 class="text-3xl font-bold text-white leading-tight">
{{ $hero_title ?? $page_title ?? 'Skinbase' }}
</h1>
@isset($hero_description)
<p class="mt-1 text-sm text-white/50 max-w-xl">{{ $hero_description }}</p>
@endisset
</div>
@endif
</div>
{{-- Page body --}}
<div class="px-6 pb-16 md:px-10">
@yield('page-content')
</div>
@endif
@endsection

36
.deploy/artwork-evolution-release/resources/views/layouts/nova/discover-layout.blade.php Normal file
View File

@@ -0,0 +1,36 @@
{{--
DiscoverLayout — compact header + mode pills.
Used by /discover/* pages.
Expected variables:
$page_title, $description, $icon, $section
Content via @yield('discover-content')
--}}
@php($useUnifiedSeo = true)
@extends('layouts.nova')
@section('content')
{{-- Compact header --}}
<div class="px-6 pt-10 pb-6 md:px-10">
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
<div>
<p class="text-xs font-semibold uppercase tracking-widest text-white/30 mb-1">Discover</p>
<h1 class="text-3xl font-bold text-white leading-tight flex items-center gap-3">
<i class="fa-solid {{ $icon ?? 'fa-compass' }} text-sky-400 text-2xl"></i>
{{ $page_title ?? 'Discover' }}
</h1>
@isset($description)
<p class="mt-1 text-sm text-white/50">{{ $description }}</p>
@endisset
</div>
{{-- Mode pills --}}
@include('web.discover._nav', ['section' => $section ?? ''])
</div>
</div>
{{-- Page body --}}
@yield('discover-content')
@endsection

146
.deploy/artwork-evolution-release/resources/views/layouts/nova/explore-layout.blade.php Normal file
View File

@@ -0,0 +1,146 @@
{{--
ExploreLayout — hero header + mode tabs + filters + paginated grid.
Used by /explore/*, /tag/:slug, and gallery pages.
Expected variables:
$hero_title, $hero_description, $breadcrumbs (collection),
$current_sort, $sort_options, $artworks,
$contentTypes (collection, optional), $activeType (string, optional)
$page_title, $page_meta_description, $page_canonical, $page_robots
--}}
@php($useUnifiedSeo = true)
@extends('layouts.nova')
@php
use App\Banner;
$seoPage = max(1, (int) request()->query('page', 1));
$seoBase = url()->current();
$seoQ = request()->query(); unset($seoQ['page']);
$seoUrl = fn(int $p) => $seoBase . ($p > 1
? '?' . http_build_query(array_merge($seoQ, ['page' => $p]))
: (count($seoQ) ? '?' . http_build_query($seoQ) : ''));
$seoPrev = $seoPage > 1 ? $seoUrl($seoPage - 1) : null;
$seoNext = (isset($artworks) && method_exists($artworks, 'nextPageUrl'))
? $artworks->nextPageUrl() : null;
@endphp
@php
$page_canonical = $page_canonical ?? $seoUrl($seoPage);
$page_rel_prev = $page_rel_prev ?? $seoPrev;
$page_rel_next = $page_rel_next ?? $seoNext;
$page_robots = $page_robots ?? 'index,follow';
@endphp
@section('content')
<div class="container-fluid legacy-page">
@php Banner::ShowResponsiveAd(); @endphp
<div class="pt-0">
<div class="mx-auto w-full">
<div class="relative min-h-[calc(120vh-64px)] md:min-h-[calc(100vh-64px)]">
<main class="w-full">
{{-- ══ HERO HEADER ══ --}}
<div class="relative overflow-hidden nb-hero-radial">
<div class="absolute inset-0 nb-hero-gradient" aria-hidden="true"></div>
<div class="absolute inset-0 opacity-20 bg-[radial-gradient(ellipse_80%_60%_at_50%_-10%,#E07A2130,transparent)]" aria-hidden="true"></div>
<div class="relative px-6 py-10 md:px-10 md:py-14">
{{-- Breadcrumbs --}}
@include('components.breadcrumbs', ['breadcrumbs' => $breadcrumbs ?? collect()])
{{-- Title panel --}}
<div class="mt-4 py-5">
<h1 class="text-3xl md:text-4xl font-bold tracking-tight text-white/95 leading-tight">
{{ $hero_title ?? 'Explore' }}
</h1>
@if(!empty($hero_description))
<p class="mt-2 text-sm leading-6 text-neutral-400 max-w-xl">{!! $hero_description !!}</p>
@endif
@if(is_object($artworks) && method_exists($artworks, 'total') && $artworks->total() > 0)
<div class="mt-3 flex items-center gap-1.5 text-xs text-neutral-500">
<svg class="h-3.5 w-3.5 text-accent/70" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
</svg>
<span>{{ number_format($artworks->total()) }} artworks</span>
</div>
@endif
</div>
{{-- Content type chips (Explore only) --}}
@if(isset($contentTypes) && $contentTypes->isNotEmpty())
<div class="flex flex-wrap gap-2 mt-2">
@foreach($contentTypes as $ct)
<a href="{{ $ct->url }}"
class="inline-flex items-center px-3 py-1.5 rounded-lg text-sm font-medium transition-colors
{{ ($activeType ?? '') === $ct->slug
? 'bg-sky-600 text-white'
: 'bg-white/[0.05] text-white/60 hover:bg-white/[0.1] hover:text-white' }}">
{{ $ct->name }}
</a>
@endforeach
</div>
@endif
</div>
<div class="absolute left-0 right-0 bottom-0 h-16 nb-hero-fade pointer-events-none" aria-hidden="true"></div>
</div>
{{-- ══ RANKING TABS ══ --}}
@php
$rankingTabs = $sort_options ?? [
['value' => 'trending', 'label' => '🔥 Trending'],
['value' => 'new-hot', 'label' => '🚀 New & Hot'],
['value' => 'best', 'label' => '⭐ Best'],
['value' => 'latest', 'label' => '🕐 Latest'],
];
$activeTab = $current_sort ?? 'trending';
@endphp
<div class="sticky top-0 z-30 border-b border-white/10 bg-nova-900/90 backdrop-blur-md" id="gallery-ranking-tabs">
<div class="px-6 md:px-10">
<div class="flex items-center justify-between gap-4">
<nav class="flex items-center gap-0 -mb-px nb-scrollbar-none overflow-x-auto" role="tablist">
@foreach($rankingTabs as $tab)
@php $isActive = $activeTab === $tab['value']; @endphp
<button
role="tab"
aria-selected="{{ $isActive ? 'true' : 'false' }}"
data-rank-tab="{{ $tab['value'] }}"
class="gallery-rank-tab relative flex items-center gap-1.5 whitespace-nowrap px-5 py-4 text-sm font-medium transition-colors focus-visible:outline-none {{ $isActive ? 'text-white' : 'text-neutral-400 hover:text-white' }}"
>
{{ $tab['label'] }}
<span class="nb-tab-indicator absolute bottom-0 left-0 right-0 h-0.5 {{ $isActive ? 'bg-accent scale-x-100' : 'bg-transparent scale-x-0' }} transition-transform duration-300 origin-left rounded-full"></span>
</button>
@endforeach
</nav>
<button id="gallery-filter-panel-toggle" type="button"
class="hidden md:flex items-center gap-2 shrink-0 rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-sm text-white/80 hover:bg-white/10 hover:text-white transition-colors"
aria-haspopup="dialog" aria-expanded="false">
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2a1 1 0 01-.293.707L13 13.414V19a1 1 0 01-.553.894l-4 2A1 1 0 017 21v-7.586L3.293 6.707A1 1 0 013 6V4z" /></svg>
Filters
</button>
</div>
</div>
</div>
{{-- ══ ARTWORK GRID ══ --}}
@yield('explore-grid')
{{-- ══ PAGINATION ══ --}}
@if(is_object($artworks) && method_exists($artworks, 'links'))
<div class="px-6 md:px-10 py-8 flex justify-center">
{{ $artworks->withQueryString()->links() }}
</div>
@endif
</main>
</div>
</div>
</div>
</div>
@endsection

27
.deploy/artwork-evolution-release/resources/views/layouts/nova/footer.blade.php Normal file
View File

@@ -0,0 +1,27 @@
<!-- Footer -->
<footer class="border-t border-neutral-800 bg-nova">
<div class="px-6 md:px-10 py-8 flex flex-col md:flex-row md:items-center md:justify-between gap-2">
<div class="text-xl font-semibold tracking-wide flex items-center gap-1">
<img src="https://cdn.skinbase.org/images/skinbase_logo_64.webp" alt="" width="320" height="64" class="h-16 w-80 object-contain">
<span class="sr-only">Skinbase</span>
</div>
<div class="flex flex-wrap gap-x-6 gap-y-2 text-sm text-neutral-400">
<a class="hover:text-white" href="/contact">Contact / Apply</a>
<a class="hover:text-white" href="/help">Help</a>
<a class="hover:text-white" href="/rss-feeds">RSS Feeds</a>
<a class="hover:text-white" href="/faq">FAQ</a>
<a class="hover:text-white" href="/rules-and-guidelines">Rules and Guidelines</a>
<a class="hover:text-white" href="/staff">Staff</a>
<a class="hover:text-white" href="/privacy-policy">Privacy Policy</a>
<a class="hover:text-white" href="/terms-of-service">Terms of Service</a>
<button
x-data
@click="localStorage.removeItem('sb_cookie_consent'); window.location.reload()"
class="hover:text-white cursor-pointer bg-transparent border-0 p-0 text-sm text-neutral-400"
>Cookie Preferences</button>
</div>
<div class="text-xs text-neutral-400">© 2026 Skinbase.org</div>
</div>
</footer>

0
.deploy/artwork-evolution-release/resources/views/layouts/nova/header.blade.php Normal file
View File

554
.deploy/artwork-evolution-release/resources/views/layouts/nova/toolbar.blade.php Normal file
View File

@@ -0,0 +1,554 @@
<header id="nova-toolbar" class="fixed inset-x-0 top-0 z-50 h-16 bg-black/40 backdrop-blur border-b border-white/10">
<div class="mx-auto w-full h-full px-3 sm:px-4 flex items-center gap-2 sm:gap-3">
<!-- Mobile hamburger -->
<button id="btnSidebar"
type="button"
data-mobile-toggle
class="lg:hidden inline-flex items-center justify-center w-10 h-10 rounded-lg hover:bg-white/5"
aria-label="Open menu"
aria-controls="mobileMenu"
aria-expanded="false">
<svg data-mobile-icon-hamburger class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M4 6h16M4 12h16M4 18h16" />
</svg>
<svg data-mobile-icon-close class="hidden w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M6 6l12 12M18 6L6 18" />
</svg>
</button>
<!-- Logo -->
<a href="/" class="flex items-center gap-2 pr-2 shrink-0">
<img src="/gfx/sb_logo.webp" alt="" width="289" height="100" class="h-9 w-auto rounded-sm shadow-sm object-contain">
<span class="sr-only">Skinbase.org</span>
</a>
<!-- Desktop left nav: Discover · Browse · Groups · Creators · Community -->
@php
$toolbarContentTypes = collect($toolbarContentTypes ?? []);
$toolbarContentTypeSlugs = $toolbarContentTypes
->pluck('slug')
->filter()
->map(fn ($slug) => strtolower((string) $slug))
->values()
->all();
$toolbarContentTypeIcons = [
'photography' => 'fa-camera',
'wallpapers' => 'fa-desktop',
'skins' => 'fa-layer-group',
'digital-art' => 'fa-palette',
'other' => 'fa-folder-open',
];
$navSection = match(true) {
request()->is('discover', 'discover/*') => 'discover',
request()->is(...array_merge(['browse', 'tags', 'tags/*'], $toolbarContentTypeSlugs)) => 'browse',
request()->is('groups', 'groups/*') => 'groups',
request()->is('creators', 'creators/*', 'stories', 'stories/*', 'following', 'leaderboard') => '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="{{ route('downloads.today') }}">
<i class="fa-solid fa-arrow-down-short-wide w-4 text-center text-sb-muted"></i>Today Downloads
</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' : '' }}>
Explore
<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="/explore">
<i class="fa-solid fa-border-all w-4 text-center text-sb-muted"></i>All Artworks
</a>
@foreach($toolbarContentTypes as $contentType)
@php
$contentTypeSlug = strtolower((string) $contentType->slug);
$contentTypeIcon = $toolbarContentTypeIcons[$contentTypeSlug] ?? 'fa-folder-open';
@endphp
<a class="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-white/5" href="/{{ $contentTypeSlug }}">
<i class="fa-solid {{ $contentTypeIcon }} w-4 text-center text-sb-muted"></i>{{ $contentType->name }}
</a>
@endforeach
<a class="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-white/5" href="{{ route('categories.index') }}">
<i class="fa-solid fa-folder-open w-4 text-center text-sb-muted"></i>Categories
</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>
<div class="relative">
<button class="inline-flex items-center gap-1 px-3 py-2 rounded-lg transition-colors {{ $navSection === 'groups' ? 'text-white bg-white/10' : 'hover:text-white hover:bg-white/5' }}"
data-dd="groups"
{{ $navSection === 'groups' ? 'aria-current=page' : '' }}>
Groups
<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-groups" class="dd-menu absolute left-0 mt-1 w-64 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="/groups">
<i class="fa-solid fa-people-group w-4 text-center text-sb-muted"></i>Browse Groups
</a>
<a class="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-white/5" href="/groups?surface=featured">
<i class="fa-solid fa-star w-4 text-center text-sb-muted"></i>Featured Groups
</a>
<a class="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-white/5" href="/groups?surface=recruiting">
<i class="fa-solid fa-user-plus w-4 text-center text-sb-muted"></i>Recruiting Now
</a>
<a class="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-white/5" href="/groups?surface=new_rising">
<i class="fa-solid fa-arrow-trend-up w-4 text-center text-sb-muted"></i>New & Rising
</a>
<a class="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-white/5" href="/leaderboard?type=groups&period=monthly">
<i class="fa-solid fa-trophy w-4 text-center text-sb-muted"></i>Group Leaderboard
</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="/leaderboard">
<i class="fa-solid fa-trophy w-4 text-center text-sb-muted"></i>Leaderboard
</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="{{ route('community.activity') }}">
<i class="fa-solid fa-wave-square w-4 text-center text-sb-muted"></i>Activity Feed
</a>
@auth
<a class="flex items-center justify-between gap-3 px-4 py-2.5 text-sm hover:bg-white/5" href="{{ route('dashboard.comments.received') }}">
<span class="flex items-center gap-3">
<i class="fa-solid fa-inbox w-4 text-center text-sb-muted"></i>Received Comments
</span>
@if(($receivedCommentsCount ?? 0) > 0)
<span class="rounded-full border border-cyan-400/25 bg-cyan-500/10 px-2 py-0.5 text-[11px] font-semibold text-cyan-200">{{ $receivedCommentsCount }}</span>
@endif
</a>
@endauth
<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>News
</a>
</div>
</div>
</nav>
<!-- Search: collapsed pill → expands on click -->
<div class="flex-1 flex items-center justify-center px-1 sm:px-2 min-w-0">
<div id="topbar-search-root" class="w-full flex justify-center">
@if(request()->routeIs('index'))
<button
type="button"
data-search-intent="mobile"
aria-label="Open search"
class="md:hidden inline-flex items-center justify-center w-10 h-10 rounded-lg text-soft hover:text-white hover:bg-white/5 transition-colors"
>
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.2" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-4.35-4.35M17 11A6 6 0 1 1 5 11a6 6 0 0 1 12 0z"/>
</svg>
</button>
<div class="hidden md:block w-full" style="max-width: clamp(8.75rem, 8vw + 4rem, 10.5rem);">
<button
type="button"
data-search-intent="desktop"
aria-label="Search"
class="w-full h-10 flex items-center gap-2.5 px-3.5 rounded-lg bg-white/[0.05] border border-white/[0.09] text-soft hover:bg-white/[0.1] hover:border-white/20 hover:text-white transition-colors"
>
<svg class="w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-4.35-4.35M17 11A6 6 0 1 1 5 11a6 6 0 0 1 12 0z"/>
</svg>
<span class="text-sm flex-1 text-left truncate">Search</span>
<kbd class="hidden lg:inline-flex shrink-0 items-center gap-0.5 text-[10px] font-medium px-1.5 py-0.5 rounded-md bg-white/[0.06] border border-white/[0.10] text-white/30">
CtrlK
</kbd>
</button>
</div>
@endif
</div>
</div>
@auth
<!-- Notification icons -->
<div class="hidden md:flex items-center gap-0.5 lg:gap-1 text-soft shrink-0">
<a href="{{ route('dashboard.favorites') }}"
class="relative inline-flex w-9 h-9 lg:w-10 lg:h-10 items-center justify-center rounded-lg hover:bg-white/5"
title="Favourites">
<svg class="w-[18px] h-[18px] lg:w-5 lg: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-[10px] lg:text-[11px] tabular-nums px-1 py-0 lg:px-1.5 lg:py-0.5 rounded bg-red-700/70 text-white border border-sb-line">{{ $favCount }}</span>
@endif
</a>
@php
$toolbarMessagesProps = [
'initialUnreadCount' => (int) ($msgCount ?? 0),
'userId' => (int) ($userId ?? Auth::id() ?? 0),
'href' => Route::has('messages.index') ? route('messages.index') : '/messages',
];
@endphp
<div id="toolbar-messages-root" data-props='@json($toolbarMessagesProps)'></div>
<div id="toolbar-notification-root" data-props='@json(['initialUnreadCount' => (int) ($noticeCount ?? 0)])'></div>
</div>
<!-- Profile dropdown -->
<div class="relative">
<button class="flex items-center gap-2 pl-1.5 sm:pl-2 pr-2 sm:pr-3 h-10 rounded-lg hover:bg-white/5 transition-colors shrink-0" data-dd="user">
@php
$toolbarUser = Auth::user();
$toolbarUserId = (int) ($userId ?? Auth::id() ?? 0);
$toolbarAvatarHash = $avatarHash ?? optional($toolbarUser)->profile->avatar_hash ?? null;
$toolbarEmailVerified = method_exists($toolbarUser, 'hasVerifiedEmail')
? $toolbarUser->hasVerifiedEmail()
: !empty($toolbarUser?->email_verified_at);
$toolbarVerificationNoticeRoute = Route::has('verification.notice') ? route('verification.notice') : null;
$toolbarVerificationSendRoute = Route::has('verification.send') ? route('verification.send') : null;
$toolbarVerificationLinkSent = session('status') === 'verification-link-sent';
@endphp
<span class="relative shrink-0">
<img class="w-7 h-7 rounded-full object-cover ring-1 {{ $toolbarEmailVerified ? 'ring-white/10' : 'ring-amber-400/30' }}"
src="{{ \App\Support\AvatarUrl::forUser($toolbarUserId, $toolbarAvatarHash, 64) }}"
alt="" />
@unless($toolbarEmailVerified)
<span class="absolute -right-0.5 -top-0.5 h-2.5 w-2.5 rounded-full bg-amber-400 ring-2 ring-[#0b1220]" aria-hidden="true"></span>
@endunless
</span>
<span class="hidden min-[900px]:inline-block max-w-[8rem] truncate text-sm text-white/90">{{ $displayName ?? 'User' }}</span>
@unless($toolbarEmailVerified)
<span class="hidden xl:inline-flex items-center rounded-full border border-amber-400/25 bg-amber-500/10 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-[0.14em] text-amber-100">Verify email</span>
@endunless
<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';
$routeDashboard = Route::has('dashboard') ? route('dashboard') : '/dashboard';
$routeMyArtworks = Route::has('studio.artworks') ? route('studio.artworks') : '/studio/artworks';
$routeMyStories = Route::has('creator.stories.index') ? route('creator.stories.index') : '/creator/stories';
$routeWriteStory = Route::has('creator.stories.create') ? route('creator.stories.create') : '/creator/stories/create';
$routeDashboardFavorites = Route::has('dashboard.favorites') ? route('dashboard.favorites') : '/dashboard/favorites';
$routeEditProfile = Route::has('dashboard.profile')
? route('dashboard.profile')
: (Route::has('settings') ? route('settings') : '/settings');
// Guard: username may be null for OAuth users still in onboarding.
$routePublicProfile = $toolbarUsername !== ''
? (Route::has('profile.show') ? route('profile.show', ['username' => $toolbarUsername]) : '/@'.$toolbarUsername)
: route('setup.username.create');
@endphp
@unless($toolbarEmailVerified)
<div class="px-3 pt-3 pb-2">
<div class="rounded-xl border border-amber-400/20 bg-amber-500/10 px-3 py-3 text-sm text-amber-50">
<div class="flex items-start gap-3">
<span class="mt-0.5 inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-amber-400/15 text-amber-200">
<i class="fa-solid fa-envelope-circle-check text-sm"></i>
</span>
<div class="min-w-0 flex-1">
<div class="font-semibold text-amber-100">Verify your email</div>
<p class="mt-1 text-xs leading-5 text-amber-100/85">
Confirm <span class="font-medium text-amber-50">{{ $toolbarUser?->email }}</span> to unlock medals and other mature-account actions.
</p>
@if($toolbarVerificationLinkSent)
<div class="mt-2 rounded-lg border border-emerald-400/20 bg-emerald-500/10 px-2.5 py-2 text-[11px] font-medium text-emerald-100">
A fresh verification link was sent to your email.
</div>
@endif
<div class="mt-3 flex flex-wrap gap-2">
@if($toolbarVerificationNoticeRoute)
<a class="inline-flex items-center rounded-lg border border-amber-300/25 bg-white/5 px-3 py-1.5 text-[11px] font-semibold uppercase tracking-[0.14em] text-amber-50 transition-colors hover:bg-white/10"
href="{{ $toolbarVerificationNoticeRoute }}">
Open verification page
</a>
@endif
@if($toolbarVerificationSendRoute)
<form method="POST" action="{{ $toolbarVerificationSendRoute }}">
@csrf
<button type="submit" class="inline-flex items-center rounded-lg border border-amber-300/25 bg-amber-300/10 px-3 py-1.5 text-[11px] font-semibold uppercase tracking-[0.14em] text-amber-50 transition-colors hover:bg-amber-300/20">
Resend verification email
</button>
</form>
@endif
</div>
</div>
</div>
</div>
</div>
<div class="border-t border-panel my-1"></div>
@endunless
<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="{{ $routeDashboard }}">
<span class="w-6 h-6 rounded-md bg-white/5 inline-flex items-center justify-center shrink-0"><i class="fa-solid fa-table-columns text-xs text-sb-muted"></i></span>
Dashboard
</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="{{ $routeMyStories }}">
<span class="w-6 h-6 rounded-md bg-white/5 inline-flex items-center justify-center shrink-0"><i class="fa-solid fa-book-open text-xs text-sb-muted"></i></span>
My Stories
</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>
<a class="flex items-center justify-between gap-3 px-4 py-2.5 text-sm hover:bg-white/5" href="{{ route('dashboard.comments.received') }}">
<span class="flex items-center gap-3 min-w-0">
<span class="w-6 h-6 rounded-md bg-white/5 inline-flex items-center justify-center shrink-0"><i class="fa-solid fa-inbox text-xs text-sb-muted"></i></span>
<span>Received Comments</span>
</span>
@if(($receivedCommentsCount ?? 0) > 0)
<span class="rounded-full border border-cyan-400/25 bg-cyan-500/10 px-2 py-0.5 text-[11px] font-semibold text-cyan-200">{{ $receivedCommentsCount }}</span>
@endif
</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) && \Illuminate\Support\Facades\Route::has('admin.usernames.moderation'))
<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 auth toolbar: desktop CTA + secondary sign-in. -->
<div class="hidden lg:flex items-center gap-4 shrink-0">
<a href="/register"
aria-label="Join Skinbase"
class="inline-flex items-center px-4 py-2 rounded-lg bg-gradient-to-r from-indigo-500 to-cyan-500 text-white text-sm font-semibold shadow-sm transition duration-200 ease-out hover:-translate-y-[1px] hover:shadow-[0_0_15px_rgba(99,102,241,0.7)] focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-black/40">
Join Skinbase
</a>
<a href="/login"
aria-label="Sign in"
class="text-sm font-medium text-gray-300 transition-colors hover:text-white focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-black/40 rounded-md px-1.5 py-1">
Sign in
</a>
</div>
<!-- Guest auth on mobile: icon trigger with lightweight dropdown menu. -->
<details class="relative lg:hidden shrink-0">
<summary
aria-label="Open authentication menu"
class="list-none inline-flex items-center justify-center w-10 h-10 rounded-lg text-gray-300 hover:text-white hover:bg-white/5 cursor-pointer focus:outline-none focus:ring-2 focus:ring-indigo-500">
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M20 21a8 8 0 1 0-16 0" />
<circle cx="12" cy="7" r="4" />
</svg>
</summary>
<div class="absolute right-0 mt-2 w-48 rounded-xl border border-white/10 bg-black/80 backdrop-blur p-2 shadow-sb">
<a href="/register"
aria-label="Join Skinbase"
class="block px-3 py-2 rounded-lg bg-gradient-to-r from-indigo-500 to-cyan-500 text-white text-sm font-semibold transition duration-200 ease-out hover:shadow-[0_0_12px_rgba(59,130,246,0.6)] focus:outline-none focus:ring-2 focus:ring-indigo-500">
Join Skinbase
</a>
<a href="/login"
aria-label="Sign in"
class="mt-1 block px-3 py-2 rounded-lg text-sm font-medium text-gray-300 transition-colors hover:text-white hover:bg-white/5 focus:outline-none focus:ring-2 focus:ring-indigo-500">
Sign in
</a>
</div>
</details>
@endauth
</div>
</header>
<!-- MOBILE MENU -->
<div class="hidden fixed inset-x-0 top-16 bottom-0 z-40 overflow-y-auto overscroll-contain bg-nova border-b border-panel p-4 shadow-sb" id="mobileMenu">
<div class="space-y-0.5 text-sm text-soft">
@guest
<div class="my-2 border-t border-panel"></div>
@endguest
<div class="pt-1">
<button type="button" data-mobile-section-toggle aria-controls="mobileSectionDiscover" aria-expanded="true" class="w-full flex items-center justify-between py-2.5 px-3 rounded-lg text-[11px] font-semibold uppercase tracking-widest text-sb-muted hover:bg-white/5">
<span>Discover</span>
<i data-mobile-section-icon class="fa-solid fa-chevron-down text-xs transition-transform rotate-180"></i>
</button>
<div id="mobileSectionDiscover" data-mobile-section-panel class="mt-0.5 space-y-0.5">
<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="{{ route('downloads.today') }}"><i class="fa-solid fa-arrow-down-short-wide w-4 text-center text-sb-muted"></i>Today Downloads</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>
</div>
</div>
<div class="pt-1">
<button type="button" data-mobile-section-toggle aria-controls="mobileSectionBrowse" aria-expanded="false" class="w-full flex items-center justify-between py-2.5 px-3 rounded-lg text-[11px] font-semibold uppercase tracking-widest text-sb-muted hover:bg-white/5">
<span>Browse</span>
<i data-mobile-section-icon class="fa-solid fa-chevron-down text-xs transition-transform"></i>
</button>
<div id="mobileSectionBrowse" data-mobile-section-panel class="hidden mt-0.5 space-y-0.5">
<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>
@foreach($toolbarContentTypes as $contentType)
@php
$contentTypeSlug = strtolower((string) $contentType->slug);
$contentTypeIcon = $toolbarContentTypeIcons[$contentTypeSlug] ?? 'fa-folder-open';
@endphp
<a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="/{{ $contentTypeSlug }}"><i class="fa-solid {{ $contentTypeIcon }} w-4 text-center text-sb-muted"></i>{{ $contentType->name }}</a>
@endforeach
<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>
</div>
<div class="pt-1">
<button type="button" data-mobile-section-toggle aria-controls="mobileSectionGroups" aria-expanded="false" class="w-full flex items-center justify-between py-2.5 px-3 rounded-lg text-[11px] font-semibold uppercase tracking-widest text-sb-muted hover:bg-white/5">
<span>Groups</span>
<i data-mobile-section-icon class="fa-solid fa-chevron-down text-xs transition-transform"></i>
</button>
<div id="mobileSectionGroups" data-mobile-section-panel class="hidden mt-0.5 space-y-0.5">
<a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="/groups"><i class="fa-solid fa-people-group w-4 text-center text-sb-muted"></i>Browse Groups</a>
<a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="/groups?surface=featured"><i class="fa-solid fa-star w-4 text-center text-sb-muted"></i>Featured Groups</a>
<a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="/groups?surface=recruiting"><i class="fa-solid fa-user-plus w-4 text-center text-sb-muted"></i>Recruiting Now</a>
<a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="/groups?surface=new_rising"><i class="fa-solid fa-arrow-trend-up w-4 text-center text-sb-muted"></i>New & Rising</a>
<a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="/leaderboard?type=groups&period=monthly"><i class="fa-solid fa-trophy w-4 text-center text-sb-muted"></i>Group Leaderboard</a>
</div>
</div>
<div class="pt-1">
<button type="button" data-mobile-section-toggle aria-controls="mobileSectionCreators" aria-expanded="false" class="w-full flex items-center justify-between py-2.5 px-3 rounded-lg text-[11px] font-semibold uppercase tracking-widest text-sb-muted hover:bg-white/5">
<span>Creators</span>
<i data-mobile-section-icon class="fa-solid fa-chevron-down text-xs transition-transform"></i>
</button>
<div id="mobileSectionCreators" data-mobile-section-panel class="hidden mt-0.5 space-y-0.5">
<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="/leaderboard"><i class="fa-solid fa-trophy w-4 text-center text-sb-muted"></i>Leaderboard</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('creator.stories.index') }}"><i class="fa-solid fa-rectangle-list w-4 text-center text-sb-muted"></i>My Stories</a>
<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>
</div>
<div class="pt-1">
<button type="button" data-mobile-section-toggle aria-controls="mobileSectionCommunity" aria-expanded="false" class="w-full flex items-center justify-between py-2.5 px-3 rounded-lg text-[11px] font-semibold uppercase tracking-widest text-sb-muted hover:bg-white/5">
<span>Community</span>
<i data-mobile-section-icon class="fa-solid fa-chevron-down text-xs transition-transform"></i>
</button>
<div id="mobileSectionCommunity" data-mobile-section-panel class="hidden mt-0.5 space-y-0.5">
<a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="{{ route('community.activity') }}"><i class="fa-solid fa-wave-square w-4 text-center text-sb-muted"></i>Activity Feed</a>
@auth
<a class="flex items-center justify-between gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="{{ route('dashboard.comments.received') }}"><span class="flex items-center gap-3"><i class="fa-solid fa-inbox w-4 text-center text-sb-muted"></i>Received Comments</span>@if(($receivedCommentsCount ?? 0) > 0)<span class="rounded-full border border-cyan-400/25 bg-cyan-500/10 px-2 py-0.5 text-[11px] font-semibold text-cyan-200">{{ $receivedCommentsCount }}</span>@endif</a>
@endauth
<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>News</a>
</div>
</div>
</div>
</div>