fixed toolbar menu
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user