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

fixed toolbar menu

Browse Source
This commit is contained in:
Gregor Klevže
2026-02-08 16:43:29 +01:00
parent 3f7c22373e
commit f04854bb8d
839 changed files with 657 additions and 2322 deletions
Download Patch File Download Diff File Expand all files Collapse all files

162
resources/views/layouts/nova.blade.php
View File

@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en">
<html lang="{{ app()->getLocale() }}">
<head>
<title>{{ $page_title ?? 'Skinbase' }}</title>
@@ -15,163 +15,15 @@
@vite(['resources/css/app.css','resources/scss/nova.scss','resources/js/nova.js'])
@stack('head')
</head>
<body class="bg-neutral-950 text-neutral-200 min-h-screen">
<body class="bg-nebula-900 text-white min-h-screen">
<header class="fixed top-0 left-0 right-0 h-16 bg-neutral-900 border-b border-neutral-800 z-50">
<div class="h-full px-5 flex items-center justify-between gap-4">
<!-- LEFT -->
<div class="flex items-center gap-4">
<button type="button" class="md:hidden text-neutral-200 hover:text-sky-400" data-mobile-toggle aria-controls="mobileMenu" aria-expanded="false" aria-label="Toggle menu">
<i class="fas fa-bars text-lg"></i>
</button>
<a href="/" class="text-sky-400 font-semibold text-xl">Skinbase</a>
</div>
<!-- CENTER SEARCH (hidden on mobile) -->
<div class="hidden md:block flex-1 max-w-xl">
<form action="/search" method="get" class="relative">
<input type="search" name="q" value="{{ request('q') }}" placeholder="Search tags, artworks, artists…"
class="w-full bg-neutral-800 border border-neutral-700 rounded-lg py-2.5 pl-3.5 pr-10 text-white outline-none focus:border-sky-400">
<i class="fas fa-search absolute right-3.5 top-1/2 -translate-y-1/2 text-neutral-400"></i>
</form>
</div>
<!-- RIGHT -->
<div class="flex items-center gap-4 sm:gap-5">
@guest
<div class="hidden sm:flex items-center gap-4 text-sm">
<a href="/signup" class="hover:text-sky-400">Join</a>
<a href="/login" class="hover:text-sky-400">Sign in</a>
</div>
@endguest
@auth
@php
$userId = auth()->id();
$novaCounts = $novaCounts ?? [];
$favCount = $novaCounts['favourites'] ?? null;
$msgCount = $novaCounts['messages'] ?? null;
$noticeCount = $novaCounts['notifications'] ?? null;
@endphp
<a href="/upload" class="relative text-neutral-200 hover:text-sky-400" title="Upload">
<i class="fas fa-upload"></i>
</a>
<a href="/favourites/{{ $userId }}/{{ auth()->user()->username ?? '' }}" class="relative text-neutral-200 hover:text-sky-400" title="Favourites">
<i class="fas fa-heart"></i>
@if($favCount)
<span class="absolute -top-1 -right-2 bg-red-500 text-white text-xs px-1.5 py-0.5 rounded-full leading-none">{{ $favCount }}</span>
@endif
</a>
<a href="/messages" class="relative text-neutral-200 hover:text-sky-400" title="Messages">
<i class="fas fa-envelope"></i>
@if($msgCount)
<span class="absolute -top-1 -right-2 bg-red-500 text-white text-xs px-1.5 py-0.5 rounded-full leading-none">{{ $msgCount }}</span>
@endif
</a>
<a href="/notices" class="relative text-neutral-200 hover:text-sky-400" title="Notifications">
<i class="fas fa-bell"></i>
@if($noticeCount)
<span class="absolute -top-1 -right-2 bg-red-500 text-white text-xs px-1.5 py-0.5 rounded-full leading-none">{{ $noticeCount }}</span>
@endif
</a>
@endauth
<!-- BROWSE DROPDOWN -->
<div class="relative" data-dropdown>
<button type="button" class="text-neutral-200 hover:text-sky-400" data-dropdown-toggle aria-expanded="false" aria-label="Browse">
<i class="fas fa-layer-group"></i>
</button>
<div class="hidden absolute top-[120%] right-0 bg-neutral-800 border border-neutral-700 rounded-lg min-w-[200px] overflow-visible shadow-lg" data-dropdown-menu>
<div class="rounded-lg overflow-hidden">
<a class="block px-3.5 py-2.5 text-sm hover:bg-neutral-700" href="/browse">All Artworks</a>
<!-- Submenu: Types -->
<div class="relative group" data-submenu>
<button type="button" class="w-full text-left px-3.5 py-2.5 text-sm hover:bg-neutral-700 flex items-center justify-between gap-3" data-submenu-toggle aria-expanded="false">
<span>Types</span>
<i class="fas fa-chevron-right text-[11px] opacity-70"></i>
</button>
<div class="hidden group-hover:block absolute left-full top-0 ml-1 bg-neutral-800 border border-neutral-700 rounded-lg min-w-[200px] shadow-lg z-50" data-submenu-menu>
<div class="rounded-lg overflow-hidden">
<a class="block px-3.5 py-2.5 text-sm hover:bg-neutral-700" href="/photography">Photography</a>
<a class="block px-3.5 py-2.5 text-sm hover:bg-neutral-700" href="/wallpapers">Wallpapers</a>
<a class="block px-3.5 py-2.5 text-sm hover:bg-neutral-700" href="/skins">Skins</a>
<a class="block px-3.5 py-2.5 text-sm hover:bg-neutral-700" href="/other">Other</a>
</div>
</div>
</div>
<a class="block px-3.5 py-2.5 text-sm hover:bg-neutral-700" href="/featured-artworks">Featured</a>
</div>
</div>
</div>
<a href="/forum" class="hidden sm:inline text-sm hover:text-sky-400">Forum</a>
<!-- USER DROPDOWN -->
<div class="relative" data-dropdown>
<button type="button" class="text-neutral-200 hover:text-sky-400" data-dropdown-toggle aria-expanded="false" aria-label="User">
<i class="fas fa-user"></i>
</button>
<div class="hidden absolute top-[120%] right-0 bg-neutral-800 border border-neutral-700 rounded-lg min-w-[220px] overflow-hidden shadow-lg" data-dropdown-menu>
@auth
<a class="block px-3.5 py-2.5 text-sm hover:bg-neutral-700" href="/upload">Upload</a>
<a class="block px-3.5 py-2.5 text-sm hover:bg-neutral-700" href="{{ route('dashboard.artworks.index') }}">Edit Artworks</a>
<div class="h-px bg-neutral-700"></div>
<a class="block px-3.5 py-2.5 text-sm hover:bg-neutral-700" href="/statistics">Statistics</a>
<a class="block px-3.5 py-2.5 text-sm hover:bg-neutral-700" href="/mybuddies.php">My Followers</a>
<a class="block px-3.5 py-2.5 text-sm hover:bg-neutral-700" href="/buddies.php">Who I Follow</a>
<div class="h-px bg-neutral-700"></div>
<a class="block px-3.5 py-2.5 text-sm hover:bg-neutral-700" href="/recieved-comments">Received Comments</a>
<a class="block px-3.5 py-2.5 text-sm hover:bg-neutral-700" href="/favourites/{{ $userId }}/{{ auth()->user()->username ?? '' }}">My Favourites</a>
<a class="block px-3.5 py-2.5 text-sm hover:bg-neutral-700" href="/gallery/{{ $userId }}/{{ auth()->user()->username ?? '' }}">My Gallery</a>
<div class="h-px bg-neutral-700"></div>
<a class="block px-3.5 py-2.5 text-sm hover:bg-neutral-700" href="/user">Edit Profile</a>
<a class="block px-3.5 py-2.5 text-sm hover:bg-neutral-700" href="/profile/{{ $userId }}/{{ auth()->user()->username ?? '' }}">View Profile</a>
<form method="POST" action="/logout" class="m-0">
@csrf
<button type="submit" class="w-full text-left px-3.5 py-2.5 text-sm hover:bg-neutral-700">Logout</button>
</form>
@else
<a class="block px-3.5 py-2.5 text-sm hover:bg-neutral-700" href="/signup">Join</a>
<a class="block px-3.5 py-2.5 text-sm hover:bg-neutral-700" href="/login">Sign in</a>
@endauth
</div>
</div>
</div>
</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>
<main class="pt-20">
<!-- React Topbar mount point -->
<div id="topbar-root"></div>
@include('layouts.nova.toolbar')
<main class="pt-16">
@yield('content')
</main>
@include('layouts.nova.footer')
</body>
</html>

27
resources/views/layouts/nova/footer.blade.php
View File

@@ -1,11 +1,20 @@
<footer id="mainFooter">
<p>&copy; 2000 - {{ date('Y') }} by SkinBase.org. All artwork copyrighted to its Author. (Dragon II Edition)</p>
<div class="footer_links">
<a href="/bug-report" title="Inform us about any bugs you found">Bug report</a> :
<a href="/rss-feeds" title="Skinbase RSS Feeds about new Artworks">RSS Feeds</a> :
<a href="/faq" title="Frequently Asked Questions">FAQ</a> :
<a href="/rules" title="Rules and Guidelines">Rules and Guidelines</a> :
<a href="/staff" title="Who is actually behind Skinbase">Staff</a> :
<a href="/privacy" title="Privacy Policy">Privacy Policy</a>
<!-- Footer -->
<footer class="border-t border-neutral-800 bg-nebula">
<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="/gfx/skinbase_logo.png" alt="Skinbase" class="h-16 w-auto 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="/bug-report">Bug Report</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>
</div>
<div class="text-xs text-neutral-400">© 2026 Skinbase.org</div>
</div>
</footer>

403
resources/views/layouts/nova/toolbar.blade.php
View File

@@ -1,214 +1,213 @@
<nav class="nb-navbar" role="navigation">
<div class="nb-container">
<div class="nb-header">
<button type="button" class="nb-toggle" aria-expanded="false" aria-controls="nb-main-nav">
<span class="nb-sr">Toggle navigation</span>
<span class="nb-bar"></span>
<span class="nb-bar"></span>
<span class="nb-bar"></span>
</button>
<a href="/" class="nb-brand" title="SkinBase">SkinBase</a>
<header class="fixed inset-x-0 top-0 z-50 h-16 bg-nebula 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>
</div>
</div>
<div id="nb-main-nav" class="nb-collapse">
<form class="nb-search" action="/search" method="get" id="search_box">
<input type="text" name="q" value="{{ request('q') }}" placeholder="Search">
<input type="hidden" name="group" value="all">
<button type="submit" aria-label="Search"><svg class="icon icon-search" viewBox="0 0 24 24" aria-hidden="true"><use xlink:href="#icon-search"></use></svg></button>
</form>
<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>
<ul class="nb-nav">
<li class="nb-dropdown nb-mega">
<button class="nb-dropbtn"> <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><use xlink:href="#icon-cloud"></use></svg> Browse <svg class="icon icon-caret" viewBox="0 0 24 24"><use xlink:href="#icon-caret"></use></svg></button>
<div class="nb-mega-panel" aria-hidden="true">
<div class="nb-mega-row">
<div class="nb-mega-col">
<div class="nb-mega-title">Browse Artworks</div>
<ul>
<li><a href="/browse">All Artworks</a></li>
<li><a href="/photography">Photography</a></li>
<li><a href="/wallpapers">Wallpapers</a></li>
<li><a href="/skins">Skins</a></li>
<li><a href="/other">Other</a></li>
<li><a href="/featured-artworks">Featured</a></li>
</ul>
</div>
<div class="nb-mega-col">
<div class="nb-mega-title">View</div>
<ul>
<li><a href="/forum">Forum</a></li>
<li><a href="/chat">Chat</a></li>
<li><a href="/browse-categories">Categories</a></li>
<li><a href="/latest-artworks">Latest Uploads</a></li>
<li><a href="/daily-uploads">Recent Uploads</a></li>
<li><a href="/today-in-history">Today in History</a></li>
</ul>
</div>
<div class="nb-mega-col">
<div class="nb-mega-title">Authors</div>
<ul>
<li><a href="/interviews">Interviews</a></li>
<li><a href="/Members/MembersPhotos/545">Members Photos</a></li>
<li><a href="/top-authors">Top Authors</a></li>
<li><a href="/latest-comments">Latest Comments</a></li>
<li><a href="/monthly-commentators">Monthly Top Comments</a></li>
</ul>
</div>
<div class="nb-mega-col">
<div class="nb-mega-title">Statistics</div>
<ul>
<li><a href="/today-downloads">Today Downloads</a></li>
<li><a href="/top-favourites">Top Favourites</a></li>
</ul>
</div>
</div>
</div>
</li>
<li class="nb-dropdown">
<button class="nb-dropbtn"> <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><use xlink:href="#icon-list"></use></svg> Categories <svg class="icon icon-caret" viewBox="0 0 24 24"><use xlink:href="#icon-caret"></use></svg></button>
<div class="nb-dropdown-panel" aria-hidden="true">
<ul>
<li><a href="/photography">Photography</a></li>
<li><a href="/wallpapers">Wallpapers</a></li>
<li><a href="/skins">Skins</a></li>
<li><a href="/other">Others</a></li>
<li class="nb-divider" role="separator"></li>
<li><a href="/browse-categories" class="btn_category">Categories List</a></li>
</ul>
</div>
</li>
</ul>
<ul class="nb-nav nb-right">
@auth
@php
$userId = auth()->id();
try {
$uploadCount = \Illuminate\Support\Facades\DB::table('artworks')->where('user_id', $userId)->count();
} catch (\Throwable $e) {
$uploadCount = 0;
}
try {
$favCount = \Illuminate\Support\Facades\DB::table('favourites')->where('user_id', $userId)->count();
} catch (\Throwable $e) {
$favCount = 0;
}
try {
$msgCount = \Illuminate\Support\Facades\DB::table('messages')->where('reciever_id', $userId)->whereNull('read_at')->count();
} catch (\Throwable $e) {
$msgCount = 0;
}
try {
$noticeCount = \Illuminate\Support\Facades\DB::table('notification')->where('user_id', $userId)->where('new', 1)->count();
} catch (\Throwable $e) {
$noticeCount = 0;
}
try {
$profile = \Illuminate\Support\Facades\DB::table('user_profiles')->where('user_id', $userId)->first();
$avatar = $profile->avatar ?? null;
} catch (\Throwable $e) {
$avatar = null;
}
$displayName = auth()->user()->name ?: (auth()->user()->username ?? '');
@endphp
<li class="nb-notice">
<a href="/upload" title="Upload new Artwork"><svg class="icon" viewBox="0 0 24 24"><use xlink:href="#icon-upload"></use></svg><br> {{ $uploadCount }}</a>
</li>
<li class="nb-notice">
<a href="/favourites/{{ $userId }}/{{ auth()->user()->username ?? '' }}" title="Your Favourite Artworks"><svg class="icon" viewBox="0 0 24 24"><use xlink:href="#icon-heart"></use></svg><br> {{ $favCount }}</a>
</li>
<li class="nb-notice">
<a href="/messages" title="Messages"><svg class="icon" viewBox="0 0 24 24"><use xlink:href="#icon-mail"></use></svg><br> {{ $msgCount }}</a>
</li>
<li class="nb-notice">
<a href="/notices" title="Notices"><svg class="icon" viewBox="0 0 24 24"><use xlink:href="#icon-bell"></use></svg><br> {{ $noticeCount }}</a>
</li>
<li class="nb-dropdown nb-user">
<button class="nb-dropbtn">
@if($avatar)
<img src="/storage/{{ ltrim($avatar, '/') }}" alt="{{ $displayName }}" width="20">&nbsp;&nbsp;
@endif
<span class="username">{{ $displayName }}</span>
<svg class="icon icon-caret" viewBox="0 0 24 24"><use xlink:href="#icon-caret"></use></svg>
</button>
<div class="nb-dropdown-panel">
<ul>
<li><a href="/upload">Upload</a></li>
<li><a href="{{ route('dashboard.artworks.index') }}">Edit Artworks</a></li>
<li class="nb-divider" role="presentation"></li>
<li><a href="/statistics">Statistics</a></li>
<li><a href="/mybuddies.php">My Followes</a></li>
<li><a href="/buddies.php">Who follows me</a></li>
<li class="nb-divider" role="presentation"></li>
<li><a href="/recieved-comments">Received Comments</a></li>
<li><a href="/favourites/{{ $userId }}/{{ auth()->user()->username ?? '' }}">My Favourites</a></li>
<li><a href="/gallery/{{ $userId }}/{{ auth()->user()->username ?? '' }}">My Gallery</a></li>
<li class="nb-divider" role="presentation"></li>
<li><a href="/user">Edit Profile</a></li>
<li><a href="/profile/{{ $userId }}/{{ auth()->user()->username ?? '' }}">View My Profile</a></li>
<li class="nb-dropdown-footer clearfix">
<form method="POST" action="/logout" style="margin:0;">
@csrf
<button type="submit" class="nb-btn-link">Logout</button>
</form>
</li>
</ul>
</div>
</li>
<li class="nb-chat">
<button class="nb-chat-toggle" title="Chat"><svg class="icon" viewBox="0 0 24 24"><use xlink:href="#icon-chat"></use></svg></button>
</li>
@else
<li class="nb-link"><a href="/signup" title="Signup for a new account">Join</a></li>
<li class="nb-link"><a href="/login" title="Login to Skinbase account">Sign in</a></li>
@endauth
</ul>
</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>
<!-- SVG icons -->
<svg style="display:none;" aria-hidden="true">
<symbol id="icon-search" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zM10 14a4 4 0 110-8 4 4 0 010 8z"/></symbol>
<symbol id="icon-cloud" viewBox="0 0 24 24"><path d="M19.36 10.46A7 7 0 005 9a5 5 0 00.11 10H19a4 4 0 00.36-8.54z"/></symbol>
<symbol id="icon-caret" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"/></symbol>
<symbol id="icon-list" viewBox="0 0 24 24"><path d="M3 13h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zm0-8h14V7H7v2z"/></symbol>
<symbol id="icon-upload" viewBox="0 0 24 24"><path d="M19 15v4H5v-4H3v4a2 2 0 002 2h14a2 2 0 002-2v-4h-2zM11 19h2V9h3l-4-5-4 5h3z"/></symbol>
<symbol id="icon-heart" viewBox="0 0 24 24"><path d="M12 21s-7-4.35-9-7.03C-1.2 9.9 4.7 4 8.5 7.5 11 9.7 12 11 12 11s1-1.3 3.5-3.5C19.3 4 25.2 9.9 21 13.97 19 16.65 12 21 12 21z"/></symbol>
<symbol id="icon-mail" viewBox="0 0 24 24"><path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></symbol>
<symbol id="icon-bell" viewBox="0 0 24 24"><path d="M12 22a2 2 0 002-2H10a2 2 0 002 2zm6-6V10c0-3.07-1.63-5.64-4.5-6.32V3a1.5 1.5 0 10-3 0v.68C7.63 4.36 6 6.92 6 10v6l-2 2v1h16v-1l-2-2z"/></symbol>
<symbol id="icon-chat" viewBox="0 0 24 24"><path d="M21 6h-2v9H7l-4 4V6a2 2 0 012-2h16a2 2 0 012 2z"/></symbol>
</svg>
</nav>
@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>
<!-- MOBILE MENU (hidden on desktop) -->
<div id="nb-mobile-menu" class="nb-mobile-menu" aria-hidden="true">
<div class="nb-mobile-inner">
@auth
<a href="/upload">Upload</a>
<a href="/favourites/{{ auth()->id() }}/{{ auth()->user()->username ?? '' }}">Favourites</a>
<a href="/messages">Messages</a>
<a href="/notices">Notices</a>
@else
<a href="/signup">Join</a>
<a href="/login">Sign in</a>
@endauth
<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">37</span>
</button>
<hr class="nb-mobile-sep">
<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">22</span>
</button>
<a href="/browse">All Artworks</a>
<a href="/photography">Photography</a>
<a href="/wallpapers">Wallpapers</a>
<a href="/skins">Skins</a>
<a href="/other">Other</a>
<a href="/featured-artworks">Featured</a>
<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">5</span>
</button>
<hr class="nb-mobile-sep">
<!-- 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="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=64&h=64&fit=crop"
alt="User" />
<span class="text-sm text-white/90">Gregor</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>
<a href="/forum">Forum</a>
<a href="/profile">Profile</a>
<a href="/settings">Settings</a>
<div id="dd-user" class="hidden absolute right-0 mt-2 w-64 rounded-lg bg-panel border border-panel shadow-sb overflow-hidden">
<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/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>
<a class="flex items-center gap-3 px-4 py-2 text-sm hover:bg-white/5" href="/my/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>
My Followers
</a>
<a class="flex items-center gap-3 px-4 py-2 text-sm hover:bg-white/5" href="/my/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>
Who I Follow
</a>
<div class="h-px bg-panel/80 my-1"></div>
<a class="flex items-center gap-3 px-4 py-2 text-sm hover:bg-white/5" href="/my/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>
Received Comments
</a>
<a class="flex items-center gap-3 px-4 py-2 text-sm hover:bg-white/5" href="/my/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>
My Favourites
</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="/settings">
<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>
<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>
<div class="h-px bg-panel/80 my-1"></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>
</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>