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