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

31
resources/js/components/Topbar.jsx Normal file
View File

@@ -0,0 +1,31 @@
import React from 'react'
export default function Topbar() {
return (
<header className="fixed top-0 left-0 right-0 h-16 bg-neutral-900 border-b border-neutral-800 z-50">
<div className="h-full px-5 flex items-center justify-between gap-4">
<div className="flex items-center gap-4">
<button aria-label="Toggle menu" className="md:hidden text-neutral-200 hover:text-sky-400">
<i className="fas fa-bars text-lg" aria-hidden="true"></i>
</button>
<a href="/" className="text-sky-400 font-semibold text-xl">Skinbase</a>
</div>
<div className="hidden md:block flex-1 max-w-xl">
<form action="/search" method="get" className="relative">
<input name="q" aria-label="Search" placeholder="Search tags, artworks, artists…"
className="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 className="fas fa-search absolute right-3.5 top-1/2 -translate-y-1/2 text-neutral-400" aria-hidden="true"></i>
</form>
</div>
<div className="flex items-center gap-4 sm:gap-5">
<a href="/forum" className="hidden sm:inline text-sm hover:text-sky-400">Forum</a>
<button aria-label="User menu" className="text-neutral-200 hover:text-sky-400">
<i className="fas fa-user" aria-hidden="true"></i>
</button>
</div>
</div>
</header>
)
}

23
resources/js/entry-topbar.jsx Normal file
View File

@@ -0,0 +1,23 @@
import React from 'react'
import { createRoot } from 'react-dom/client'
import Topbar from './components/Topbar'
function mount() {
const container = document.getElementById('topbar-root')
if (!container) return
const root = createRoot(container)
root.render(<Topbar />)
// hide legacy header if present
const legacy = document.getElementById('legacy-topbar')
const topbar = document.getElementById('topbar')
if (legacy) legacy.style.display = 'none'
if (topbar) topbar.style.display = 'none'
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', mount)
} else {
mount()
}

99
resources/js/nova.js
View File

@@ -101,13 +101,47 @@
document.addEventListener('click', function (e) {
var dropdownToggle = closest(e.target, '[data-dropdown-toggle]');
// legacy shorthand toggles: data-dd="name" -> menu id = dd-name
var legacyToggle = closest(e.target, '[data-dd]');
if (dropdownToggle) {
// On pointer/hover-capable devices prefer hover; ignore mouse clicks
if (canHover() && e.detail > 0) {
// allow keyboard activation (e.detail === 0) to fall through
return;
}
e.preventDefault();
var dropdown = closest(dropdownToggle, '[data-dropdown]');
if (dropdown) toggleDropdown(dropdown);
return;
}
if (legacyToggle) {
// On pointer/hover-capable devices prefer hover; ignore mouse clicks
if (canHover() && e.detail > 0) {
return;
}
e.preventDefault();
var ddName = legacyToggle.getAttribute('data-dd');
if (!ddName) return;
var menu = document.getElementById('dd-' + ddName);
if (!menu) return;
// treat this pair (toggle + menu) similarly to our dropdown API
var isOpen = !menu.classList.contains('hidden');
// close other dropdowns
closeAllDropdowns();
if (isOpen) {
menu.classList.add('hidden');
setExpanded(legacyToggle, false);
} else {
menu.classList.remove('hidden');
setExpanded(legacyToggle, true);
}
return;
}
var mobileToggle = closest(e.target, '[data-mobile-toggle]');
if (mobileToggle) {
e.preventDefault();
@@ -171,11 +205,50 @@
hoverCloseTimers.set(
dropdown,
window.setTimeout(function () {
closeDropdown(dropdown);
closeMenuElement(dropdown);
}, 140)
);
}
// Close a menu element or its parent dropdown wrapper.
function closeMenuElement(el) {
if (!el) return;
// If this is a dropdown wrapper, find the menu inside
if (el.hasAttribute && el.hasAttribute('data-dropdown')) {
var menu = el.querySelector('[data-dropdown-menu]');
var toggle = el.querySelector('[data-dropdown-toggle]');
if (menu) menu.classList.add('hidden');
setExpanded(toggle, false);
// also close submenus inside
el.querySelectorAll('[data-submenu-menu]').forEach(function (sm) {
sm.classList.add('hidden');
});
el.querySelectorAll('[data-submenu-toggle]').forEach(function (st) {
setExpanded(st, false);
});
return;
}
// If it's a menu element (e.g., legacy id=dd-name) hide it and try to find its toggle
var menuEl = el;
if (!menuEl.id && el.getAttribute && el.getAttribute('data-dropdown-menu')) {
// explicit menu element
}
// hide the element if possible
try { menuEl.classList.add('hidden'); } catch (e) {}
// Try to map back to a toggle: id like dd-name -> data-dd="name"
if (menuEl.id && menuEl.id.indexOf('dd-') === 0) {
var name = menuEl.id.slice(3);
var toggle = document.querySelector('[data-dd="' + name + '"]');
if (toggle) setExpanded(toggle, false);
} else {
// fallback: if menu is inside a [data-dropdown], handled above; nothing more to do
}
}
function bindHoverHandlers() {
if (!canHover()) return;
document.querySelectorAll('[data-dropdown]').forEach(function (dropdown) {
@@ -187,6 +260,30 @@
scheduleClose(dropdown);
});
});
// legacy hover binding for shorthand toggles (data-dd)
document.querySelectorAll('[data-dd]').forEach(function (el) {
var ddName = el.getAttribute('data-dd');
if (!ddName) return;
var menu = document.getElementById('dd-' + ddName);
if (!menu) return;
// when pointer enters either toggle or menu, open
function enter() {
clearHoverTimer(menu);
menu.classList.remove('hidden');
setExpanded(el, true);
}
function leave() {
scheduleClose(menu);
}
el.addEventListener('mouseenter', enter);
el.addEventListener('mouseleave', leave);
menu.addEventListener('mouseenter', enter);
menu.addEventListener('mouseleave', leave);
});
}
bindHoverHandlers();

90
resources/scss/nova.scss
View File

@@ -3,3 +3,93 @@
* The Nova layout is styled primarily via Tailwind utilities from resources/css/app.css.
*/
/* Hero radial background moved from inline styles to a class to respect Nebula rules */
.nb-hero-radial {
background-image: radial-gradient(circle at 20% 10%, rgba(77,163,255,.25), transparent 35%),
radial-gradient(circle at 70% 30%, rgba(255,196,77,.18), transparent 40%),
radial-gradient(circle at 30% 80%, rgba(180,77,255,.16), transparent 45%);
}
/* Nebula design tokens and helper classes copied from nova.html preview
These provide the same color tokens and small utilities used by the preview
so `blank` renders consistently until Tailwind config is consolidated. */
:root {
--sb-bg: #141416;
--sb-top: #1c1c1f;
--sb-panel: #191a1f;
--sb-panel2: #15161b;
--sb-line: #2a2a33;
--sb-text: #e3e3e3;
--sb-muted: #a6a6b0;
--sb-blue: #4da3ff;
/* Primary UI color tokens (Nebula palette) */
--nebula-blue: #09101acc;
--deep-space: #0F1724;
--panel-dark: #151E2E;
--soft-blue: #7A8CA5;
--accent-orange: #E07A21;
/* Toolbar color (Skinbase Nebula) */
--toolbar-bg: #0F1724;
/* RGB variants for subtle overlays */
--nebula-blue-rgb: 100,111,131;
--deep-space-rgb: 15,23,36;
--panel-dark-rgb: 21,30,46;
--toolbar-bg-rgb: 15,23,36;
}
/* Background / text helpers (used in preview markup) */
.bg-sb-bg { background-color: var(--sb-bg) !important; }
.bg-sb-top { background-color: var(--sb-top) !important; }
.bg-sb-panel { background-color: var(--sb-panel) !important; }
.bg-sb-panel2 { background-color: var(--sb-panel2) !important; }
.text-sb-text { color: var(--sb-text) !important; }
.text-sb-muted { color: var(--sb-muted) !important; }
.border-sb-line { border-color: var(--sb-line) !important; }
/* Small shadow token used by preview */
.shadow-sb { box-shadow: 0 12px 30px rgba(0,0,0,.45) !important; }
/* Scrollbar helpers used in preview */
.sb-scrollbar::-webkit-scrollbar { width: 10px; height: 10px; }
.sb-scrollbar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 999px; }
.sb-scrollbar::-webkit-scrollbar-track { background: rgba(0,0,0,.15); }
/* Ensure header and dropdowns are not clipped and render above page content */
header {
overflow: visible;
/* Use the official toolbar background token from the Nebula spec */
background-color: var(--toolbar-bg);
/* subtle divider to separate toolbar from content */
border-bottom: 1px solid rgba(255,255,255,0.02);
}
/* Menus may be absolute-positioned; ensure they sit above other UI layers */
[id^="dd-"] , [data-dropdown-menu], [data-submenu-menu] {
z-index: 9999 !important;
background-color: var(--panel-dark);
color: var(--sb-text);
border: 1px solid rgba(255,255,255,0.03);
}
/* Convenience helpers for the new nebula tokens */
.bg-nebula { background-color: var(--nebula-blue) !important; }
.bg-deep { background-color: var(--deep-space) !important; }
.bg-panel-dark { background-color: var(--panel-dark) !important; }
.text-soft { color: var(--soft-blue) !important; }
.text-accent { color: var(--accent-orange) !important; }
/* Dropdown section header: subtle, smaller and visually separated */
.dd-section {
font-size: 11px;
color: rgba(166,166,176,0.65);
text-transform: uppercase;
letter-spacing: 0.08em;
border-top: 1px solid rgba(42,42,51,0.12);
margin-top: 0.5rem;
padding-top: 0.5rem;
padding-bottom: 0.25rem;
}

142
resources/views/blank.blade.php
View File

@@ -1,18 +1,140 @@
@extends('layouts.nova')
@section('content')
<div class="bg-slate-900 min-h-screen">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="py-8">
<header class="mb-6">
<h1 class="text-3xl font-semibold text-white">Blank</h1>
</header>
<!-- Nova main preview ported into Blade (server-rendered) -->
<div class="pt-0">
<div class="mx-auto w-full">
<div class="flex min-h-[calc(100vh-64px)]">
<!-- SIDEBAR -->
<aside id="sidebar" class="hidden md:block w-72 shrink-0 border-r border-neutral-800 bg-nebula-900/60 backdrop-blur-sm">
<div class="p-4">
<button class="w-full h-12 rounded-xl bg-white/5 hover:bg-white/7 border border-white/5 flex items-center gap-3 px-4">
<span class="w-8 h-8 rounded-lg bg-white/5 inline-flex items-center justify-center">
<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>
</span>
<span class="text-sm text-white/90">Menu</span>
</button>
<section class="bg-slate-800 rounded-lg p-6 shadow-sm">
<!-- Empty content area for layout testing -->
<p class="text-slate-300">Layout test area — add components here.</p>
</section>
<div class="mt-6 text-sm text-neutral-400">
<div class="font-semibold text-white/80 mb-2">Main Categories:</div>
<ul class="space-y-2">
<li><a class="flex items-center gap-2 hover:text-white" href="#"><span class="opacity-70">📷</span> Photography</a></li>
<li><a class="flex items-center gap-2 hover:text-white" href="#"><span class="opacity-70">🖼️</span> Wallpapers</a></li>
<li><a class="flex items-center gap-2 hover:text-white" href="#"><span class="opacity-70">🧩</span> Skins</a></li>
<li><a class="flex items-center gap-2 hover:text-white" href="#"><span class="opacity-70">✨</span> Other</a></li>
</ul>
<div class="mt-6 font-semibold text-white/80 mb-2">Browse Subcategories:</div>
<ul class="space-y-2 sb-scrollbar max-h-56 overflow-auto pr-2">
<li><a class="hover:text-white" href="#">3D</a></li>
<li><a class="hover:text-white" href="#">Abstract</a></li>
<li><a class="hover:text-white" href="#">Animals</a></li>
<li><a class="hover:text-white" href="#">Anime</a></li>
<li><a class="hover:text-white" href="#">Art</a></li>
<li><a class="hover:text-white" href="#">Cars</a></li>
<li><a class="hover:text-white" href="#">Cartoon</a></li>
<li><a class="hover:text-white" href="#">Fantasy</a></li>
<li><a class="hover:text-white" href="#">Nature</a></li>
<li><a class="hover:text-white" href="#">Sci-Fi</a></li>
</ul>
<div class="mt-6 font-semibold text-white/80 mb-2">Daily Uploads <span class="text-neutral-400 font-normal">(245)</span></div>
<div class="rounded-xl bg-white/5 border border-white/5 overflow-hidden">
<button class="w-full px-4 py-3 text-left hover:bg-white/5">All</button>
<button class="w-full px-4 py-3 text-left hover:bg-white/5">Hot</button>
</div>
<a class="mt-4 inline-flex items-center gap-2 text-neutral-400 hover:text-white" href="#">
<span>Link, more</span>
<span class="opacity-60">›</span>
</a>
</div>
</div>
</aside>
<!-- MAIN -->
<main class="flex-1">
<!-- Hero background -->
<div class="relative overflow-hidden nb-hero-radial">
<div class="absolute inset-0 opacity-35"></div>
<div class="relative px-6 py-8 md:px-10 md:py-10">
<div class="text-sm text-neutral-400">
<a class="hover:text-white" href="#">Wallpapers</a> <span class="opacity-50">›</span> <span class="text-white/80">Fantasy</span>
</div>
<h1 class="mt-2 text-3xl md:text-4xl font-semibold tracking-tight text-white/95">Fantasy</h1>
<!-- Info card -->
<section class="mt-5 bg-white/5 border border-white/10 rounded-2xl shadow-lg">
<div class="p-5 md:p-6">
<div class="text-lg font-semibold text-white/90">Fantasy</div>
<p class="mt-2 text-sm leading-6 text-neutral-400">A small preview of the Nebula layout, server-rendered for SEO and progressive enhancement.</p>
</div>
</section>
</div>
</div>
<!-- Grid -->
<section class="px-6 pb-10 md:px-10">
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
<!-- Card template (replace src with real thumbnails server-side) -->
<a href="#" class="group relative rounded-2xl overflow-hidden bg-black/20 border border-white/10 shadow-lg">
<div class="aspect-[16/10] bg-gradient-to-br from-cyan-400/30 via-blue-500/20 to-purple-600/30">
<img src="/images/placeholder.jpg" alt="Fantasy artwork" width="1600" height="1000" loading="lazy" class="w-full h-full object-cover" />
</div>
<div class="p-3 text-xs text-neutral-400 group-hover:text-white/80">Featured artwork</div>
</a>
<a href="#" class="group relative rounded-2xl overflow-hidden bg-black/20 border border-white/10 shadow-lg">
<div class="aspect-[16/10] bg-gradient-to-br from-emerald-400/25 via-teal-500/15 to-sky-500/25">
<img src="/images/placeholder.jpg" alt="Island artwork" width="1600" height="1000" loading="lazy" class="w-full h-full object-cover" />
</div>
<div class="p-3 text-xs text-neutral-400 group-hover:text-white/80">Island</div>
</a>
<a href="#" class="group relative rounded-2xl overflow-hidden bg-black/20 border border-white/10 shadow-lg">
<div class="aspect-[16/10] bg-gradient-to-br from-fuchsia-400/20 via-rose-500/20 to-amber-500/20">
<img src="/images/placeholder.jpg" alt="Sunset artwork" width="1600" height="1000" loading="lazy" class="w-full h-full object-cover" />
</div>
<div class="p-3 text-xs text-neutral-400 group-hover:text-white/80">Sunset</div>
</a>
<a href="#" class="group relative rounded-2xl overflow-hidden bg-black/20 border border-white/10 shadow-lg">
<div class="aspect-[16/10] bg-gradient-to-br from-indigo-400/20 via-slate-500/20 to-zinc-700/30">
<img src="/images/placeholder.jpg" alt="Dragon artwork" width="1600" height="1000" loading="lazy" class="w-full h-full object-cover" />
</div>
<div class="p-3 text-xs text-neutral-400 group-hover:text-white/80">Dragon</div>
</a>
</div>
<div class="flex justify-center mt-10">
<a href="/browse" class="px-10 py-3 rounded-xl bg-white/5 border border-white/10 hover:bg-white/10 text-white/90 shadow-lg">Browse All</a>
</div>
</section>
<!-- Nebula color scale examples -->
<section class="px-6 pb-10 md:px-10 mt-8">
<h2 class="text-lg font-semibold mb-4">Nebula color scale</h2>
<div class="grid grid-cols-2 sm:grid-cols-5 md:grid-cols-10 gap-3">
<div class="h-20 rounded-md flex items-center justify-center text-sm font-medium border border-white/5 bg-nebula-50 text-black">nebula-50</div>
<div class="h-20 rounded-md flex items-center justify-center text-sm font-medium border border-white/5 bg-nebula-100 text-black">nebula-100</div>
<div class="h-20 rounded-md flex items-center justify-center text-sm font-medium border border-white/5 bg-nebula-200 text-black">nebula-200</div>
<div class="h-20 rounded-md flex items-center justify-center text-sm font-medium border border-white/5 bg-nebula-300 text-black">nebula-300</div>
<div class="h-20 rounded-md flex items-center justify-center text-sm font-medium border border-white/5 bg-nebula-400 text-black">nebula-400</div>
<div class="h-20 rounded-md flex items-center justify-center text-sm font-medium border border-white/5 bg-nebula-500 text-white">nebula-500</div>
<div class="h-20 rounded-md flex items-center justify-center text-sm font-medium border border-white/5 bg-nebula-600 text-white">nebula-600</div>
<div class="h-20 rounded-md flex items-center justify-center text-sm font-medium border border-white/5 bg-nebula-700 text-white">nebula-700</div>
<div class="h-20 rounded-md flex items-center justify-center text-sm font-medium border border-white/5 bg-nebula-800 text-white">nebula-800</div>
<div class="h-20 rounded-md flex items-center justify-center text-sm font-medium border border-white/5 bg-nebula-900 text-white">nebula-900</div>
</div>
</section>
</main>
</div>
</div>
</div>
@endsection

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>