241 lines
15 KiB
PHP
241 lines
15 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">
|
|
<!-- bars -->
|
|
<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">
|
|
<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>
|
|
|
|
<!-- Left nav -->
|
|
<nav class="hidden lg:flex items-center gap-4 text-sm text-soft">
|
|
|
|
<div class="relative">
|
|
<button class="hover:text-white inline-flex items-center gap-1" data-dd="browse">
|
|
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="hidden absolute left-0 mt-2 w-64 rounded-lg bg-panel border border-panel shadow-sb overflow-visible">
|
|
<div class="rounded-lg overflow-hidden">
|
|
<div class="px-4 dd-section">Views</div>
|
|
<a class="block px-4 py-2 text-sm hover:bg-white/5" href="/forum"><i class="fa-solid fa-comments mr-3 text-sb-muted"></i>Forum</a>
|
|
<a class="block px-4 py-2 text-sm hover:bg-white/5" href="/chat"><i class="fa-solid fa-message mr-3 text-sb-muted"></i>Chat</a>
|
|
<a class="block px-4 py-2 text-sm hover:bg-white/5" href="/sections"><i class="fa-solid fa-folder-open mr-3 text-sb-muted"></i>Browse Sections</a>
|
|
<a class="block px-4 py-2 text-sm hover:bg-white/5" href="/uploads/latest"><i class="fa-solid fa-cloud-arrow-up mr-3 text-sb-muted"></i>Latest Uploads</a>
|
|
<a class="block px-4 py-2 text-sm hover:bg-white/5" href="/uploads/daily"><i class="fa-solid fa-calendar-day mr-3 text-sb-muted"></i>Daily Uploads</a>
|
|
<a class="block px-4 py-2 text-sm hover:bg-white/5" href="/today-in-history"><i class="fa-solid fa-calendar mr-3 text-sb-muted"></i>Today In History</a>
|
|
|
|
<div class="px-4 dd-section">Authors</div>
|
|
<a class="block px-4 py-2 text-sm hover:bg-white/5" href="/interviews"><i class="fa-solid fa-microphone mr-3 text-sb-muted"></i>Interviews</a>
|
|
<a class="block px-4 py-2 text-sm hover:bg-white/5" href="/members/photos"><i class="fa-solid fa-camera mr-3 text-sb-muted"></i>Members Photos</a>
|
|
<a class="block px-4 py-2 text-sm hover:bg-white/5" href="/authors/top"><i class="fa-solid fa-star mr-3 text-sb-muted"></i>Top Authors</a>
|
|
<a class="block px-4 py-2 text-sm hover:bg-white/5" href="/comments/latest"><i class="fa-solid fa-comments mr-3 text-sb-muted"></i>Latest Comments</a>
|
|
<a class="block px-4 py-2 text-sm hover:bg-white/5" href="/comments/monthly"><i class="fa-solid fa-chart-line mr-3 text-sb-muted"></i>Monthly Commented</a>
|
|
|
|
<div class="px-4 dd-section">Statistics</div>
|
|
<a class="block px-4 py-2 text-sm hover:bg-white/5" href="/downloads/today"><i class="fa-solid fa-download mr-3 text-sb-muted"></i>Todays Downloads</a>
|
|
<a class="block px-4 py-2 text-sm hover:bg-white/5" href="/favourites/top"><i class="fa-solid fa-heart mr-3 text-sb-muted"></i>Top Favourites</a>
|
|
</div> <!-- end .rounded-lg -->
|
|
</div> <!-- end .dd-browse -->
|
|
</div> <!-- end .relative -->
|
|
|
|
<div class="relative">
|
|
<button class="hover:text-white inline-flex items-center gap-1" data-dd="cats">
|
|
Categories
|
|
<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-cats"
|
|
class="hidden absolute left-0 mt-2 w-64 rounded-lg bg-panel border border-panel shadow-sb overflow-hidden">
|
|
<a class="block px-4 py-2 text-sm hover:bg-white/5" href="/browse">All Artworks</a>
|
|
<a class="block px-4 py-2 text-sm hover:bg-white/5" href="/photography">Photography</a>
|
|
<a class="block px-4 py-2 text-sm hover:bg-white/5" href="/wallpapers">Wallpapers</a>
|
|
<a class="block px-4 py-2 text-sm hover:bg-white/5" href="/skins">Skins</a>
|
|
<a class="block px-4 py-2 text-sm hover:bg-white/5" href="/other">Other</a>
|
|
<a class="block px-4 py-2 text-sm hover:bg-white/5" href="/featured-artworks">Featured Artwork</a>
|
|
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Search -->
|
|
<div class="flex-1 flex items-center justify-center">
|
|
<div class="w-full max-w-lg relative">
|
|
<input
|
|
class="w-full h-10 rounded-lg bg-black/20 border border-sb-line pl-4 pr-12 text-sm text-white placeholder:text-sb-muted/80 outline-none focus:border-sb-blue/60"
|
|
placeholder="Search tags, artworks, artists..." />
|
|
<button
|
|
class="absolute right-2 top-1/2 -translate-y-1/2 w-9 h-9 rounded-md hover:bg-white/5 text-sb-muted hover:text-white">
|
|
<svg class="w-5 h-5 mx-auto" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
|
stroke-width="2">
|
|
<circle cx="11" cy="11" r="7" />
|
|
<path d="M20 20l-3.5-3.5" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
@auth
|
|
<!-- Right icon counters (authenticated users) -->
|
|
<div class="hidden md:flex items-center gap-3 text-soft">
|
|
<button class="relative w-10 h-10 rounded-lg hover:bg-white/5">
|
|
<svg class="w-5 h-5 mx-auto" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
|
stroke-width="2">
|
|
<path d="M12 5v14M5 12h14" />
|
|
</svg>
|
|
</button>
|
|
|
|
<button class="relative w-10 h-10 rounded-lg hover:bg-white/5">
|
|
<svg class="w-5 h-5 mx-auto" 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>
|
|
<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">{{ $uploadCount ?? 0 }}</span>
|
|
</button>
|
|
|
|
<button class="relative w-10 h-10 rounded-lg hover:bg-white/5">
|
|
<svg class="w-5 h-5 mx-auto" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
|
stroke-width="2">
|
|
<path d="M4 4h16v14H5.2L4 19.2V4z" />
|
|
<path d="M4 6l8 6 8-6" />
|
|
</svg>
|
|
<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 ?? 0 }}</span>
|
|
</button>
|
|
|
|
<button class="relative w-10 h-10 rounded-lg hover:bg-white/5">
|
|
<svg class="w-5 h-5 mx-auto" 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>
|
|
<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 ?? 0 }}</span>
|
|
</button>
|
|
|
|
<!-- User dropdown -->
|
|
<div class="relative">
|
|
<button class="flex items-center gap-2 pl-2 pr-3 h-10 rounded-lg hover:bg-white/5" data-dd="user">
|
|
<img class="w-7 h-7 rounded-full object-cover ring-1 ring-white/10"
|
|
src="{{ \App\Support\AvatarUrl::forUser((int) ($userId ?? (Auth::id() ?? 0)), $avatarHash ?? null, 64) }}"
|
|
alt="{{ $displayName ?? 'User' }}" />
|
|
<span class="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="hidden absolute right-0 mt-2 w-64 rounded-lg bg-panel border border-panel shadow-sb overflow-hidden">
|
|
|
|
<div class="px-4 dd-section">My Account</div>
|
|
|
|
<a class="flex items-center gap-3 px-4 py-2 text-sm hover:bg-white/5" href="/upload">
|
|
<span class="w-8 h-8 rounded-lg bg-white/5 inline-flex items-center justify-center mr-3"><i
|
|
class="fa-solid fa-upload text-sb-muted"></i></span>
|
|
Upload
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-2 text-sm hover:bg-white/5" href="/my/gallery">
|
|
<span class="w-8 h-8 rounded-lg bg-white/5 inline-flex items-center justify-center mr-3"><i
|
|
class="fa-solid fa-image text-sb-muted"></i></span>
|
|
My Gallery
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-2 text-sm hover:bg-white/5" href="/my/artworks">
|
|
<span class="w-8 h-8 rounded-lg bg-white/5 inline-flex items-center justify-center mr-3"><i
|
|
class="fa-solid fa-pencil text-sb-muted"></i></span>
|
|
Edit Artworks
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-2 text-sm hover:bg-white/5" href="/my/stats">
|
|
<span class="w-8 h-8 rounded-lg bg-white/5 inline-flex items-center justify-center mr-3"><i
|
|
class="fa-solid fa-chart-line text-sb-muted"></i></span>
|
|
Statistics
|
|
</a>
|
|
|
|
|
|
<div class="px-4 dd-section">Community</div>
|
|
<a class="flex items-center gap-3 px-4 py-2 text-sm hover:bg-white/5" href="/followers">
|
|
<span class="w-8 h-8 rounded-lg bg-white/5 inline-flex items-center justify-center mr-3"><i
|
|
class="fa-solid fa-user-group text-sb-muted"></i></span>
|
|
Followers
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-2 text-sm hover:bg-white/5" href="/following">
|
|
<span class="w-8 h-8 rounded-lg bg-white/5 inline-flex items-center justify-center mr-3"><i
|
|
class="fa-solid fa-user-plus text-sb-muted"></i></span>
|
|
Following
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-2 text-sm hover:bg-white/5" href="/comments">
|
|
<span class="w-8 h-8 rounded-lg bg-white/5 inline-flex items-center justify-center mr-3"><i
|
|
class="fa-solid fa-comments text-sb-muted"></i></span>
|
|
Comments
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-2 text-sm hover:bg-white/5" href="/favourites">
|
|
<span class="w-8 h-8 rounded-lg bg-white/5 inline-flex items-center justify-center mr-3"><i
|
|
class="fa-solid fa-heart text-sb-muted"></i></span>
|
|
Favourites
|
|
</a>
|
|
|
|
|
|
<div class="px-4 dd-section">Community</div>
|
|
<a class="flex items-center gap-3 px-4 py-2 text-sm hover:bg-white/5" href="/profile">
|
|
<span class="w-8 h-8 rounded-lg bg-white/5 inline-flex items-center justify-center mr-3"><i
|
|
class="fa-solid fa-eye text-sb-muted"></i></span>
|
|
View My Profile
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-2 text-sm hover:bg-white/5" href="/user">
|
|
<span class="w-8 h-8 rounded-lg bg-white/5 inline-flex items-center justify-center mr-3"><i
|
|
class="fa-solid fa-cog text-sb-muted"></i></span>
|
|
Edit Profile
|
|
</a>
|
|
|
|
<div class="px-4 dd-section">System</div>
|
|
<a class="flex items-center gap-3 px-4 py-2 text-sm hover:bg-white/5" href="/logout">
|
|
<span class="w-8 h-8 rounded-lg bg-white/5 inline-flex items-center justify-center mr-3"><i
|
|
class="fa-solid fa-sign-out text-sb-muted"></i></span>
|
|
Logout
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@else
|
|
<!-- Guest: show simple Join / Sign in links -->
|
|
<div class="hidden md:flex items-center gap-3">
|
|
<a href="/signup"
|
|
class="px-3 py-2 rounded-lg text-sm text-sb-muted hover:text-white hover:bg-white/5">Join</a>
|
|
<a href="/login"
|
|
class="px-3 py-2 rounded-lg text-sm text-sb-muted hover:text-white hover:bg-white/5">Sign in</a>
|
|
</div>
|
|
@endauth
|
|
</div>
|
|
</header>
|
|
|
|
<!-- MOBILE MENU -->
|
|
<div class="hidden fixed top-16 left-0 right-0 bg-neutral-950 border-b border-neutral-800 p-4" id="mobileMenu">
|
|
<div class="space-y-2">
|
|
@guest
|
|
<a class="block py-2 border-b border-neutral-900" href="/signup">Join</a>
|
|
<a class="block py-2 border-b border-neutral-900" href="/login">Sign in</a>
|
|
@endguest
|
|
<a class="block py-2 border-b border-neutral-900" href="/browse">All Artworks</a>
|
|
<a class="block py-2 border-b border-neutral-900" href="/photography">Photography</a>
|
|
<a class="block py-2 border-b border-neutral-900" href="/wallpapers">Wallpapers</a>
|
|
<a class="block py-2 border-b border-neutral-900" href="/skins">Skins</a>
|
|
<a class="block py-2 border-b border-neutral-900" href="/other">Other</a>
|
|
<a class="block py-2 border-b border-neutral-900" href="/featured-artworks">Featured</a>
|
|
<a class="block py-2 border-b border-neutral-900" href="/forum">Forum</a>
|
|
<a class="block py-2 border-b border-neutral-900" href="/profile">Profile</a>
|
|
<a class="block py-2" href="/settings">Settings</a>
|
|
</div>
|
|
</div>
|