411 lines
31 KiB
PHP
411 lines
31 KiB
PHP
<header 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="Skinbase.org" 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 · 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', '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>
|
|
<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="{{ 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>
|
|
|
|
{{-- 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"></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
|
|
$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 min-[900px]:inline-block max-w-[8rem] truncate 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';
|
|
$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
|
|
|
|
<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>
|
|
<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>
|
|
</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>
|