feat: sidebar + top bar game layout with dark crime theme
This commit is contained in:
Doar Mihai
@@ -3,60 +3,76 @@
|
||||
@section('title', config('game.name', 'The Crime Syndicate') . ' - ' . ($title ?? 'Game'))
|
||||
|
||||
@section('content')
|
||||
<!-- Game Header -->
|
||||
<header class="bg-gray-800 text-white shadow">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex justify-between items-center h-16">
|
||||
<!-- Logo -->
|
||||
<div class="flex-shrink-0 flex items-center">
|
||||
<a href="{{ route('game.dashboard') }}" class="text-xl font-bold">
|
||||
{{ config('game.name', 'The Crime Syndicate') }}
|
||||
<div class="flex flex-col min-h-screen">
|
||||
|
||||
{{-- TOP BAR --}}
|
||||
<header class="bg-syndicate-900 border-b border-syndicate-700 h-14 flex items-center px-6 flex-shrink-0 z-10">
|
||||
{{-- Logo --}}
|
||||
<a href="{{ route('game.dashboard') }}" class="font-display font-bold text-xl text-crime-400 uppercase tracking-widest mr-8 flex-shrink-0">
|
||||
{{ config('game.name', 'The Crime Syndicate') }}
|
||||
</a>
|
||||
|
||||
{{-- Stats bar --}}
|
||||
<div class="flex-1 flex items-center justify-center space-x-4">
|
||||
@if(auth()->check() && auth()->user()->character)
|
||||
@include('game.partials.stats-bar')
|
||||
@endif
|
||||
</div>
|
||||
|
||||
{{-- User menu --}}
|
||||
<div class="flex items-center space-x-3 flex-shrink-0">
|
||||
<span class="text-sm text-gray-400">{{ auth()->user()->name ?? '' }}</span>
|
||||
<div x-data="{ open: false }" class="relative">
|
||||
<button @click="open = !open" class="flex items-center text-gray-400 hover:text-gray-100 transition">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" />
|
||||
</svg>
|
||||
</button>
|
||||
<div x-show="open" @click.away="open = false"
|
||||
class="absolute right-0 mt-2 w-48 bg-syndicate-800 border border-syndicate-700 rounded-lg shadow-xl z-50">
|
||||
<a href="{{ route('profile.edit') }}" class="block px-4 py-2 text-sm text-gray-300 hover:bg-syndicate-700 hover:text-gray-100 rounded-t-lg transition">
|
||||
Settings
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Character Stats -->
|
||||
<div class="flex items-center space-x-4">
|
||||
@if(auth()->check() && auth()->user()->character)
|
||||
@include('game.partials.stats-bar')
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<!-- User Menu -->
|
||||
<div class="flex items-center">
|
||||
@include('layouts.navigation')
|
||||
<form method="POST" action="{{ route('logout') }}">
|
||||
@csrf
|
||||
<button type="submit" class="w-full text-left px-4 py-2 text-sm text-gray-300 hover:bg-syndicate-700 hover:text-gray-100 rounded-b-lg transition">
|
||||
Log Out
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Flash Messages -->
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
|
||||
@if(session('success'))
|
||||
<div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4" role="alert">
|
||||
<strong class="font-bold">Success!</strong>
|
||||
<span class="block sm:inline">{{ session('success') }}</span>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if(session('error'))
|
||||
<div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4" role="alert">
|
||||
<strong class="font-bold">Error!</strong>
|
||||
<span class="block sm:inline">{{ session('error') }}</span>
|
||||
</div>
|
||||
@endif
|
||||
{{-- BODY: sidebar + content --}}
|
||||
<div class="flex flex-1">
|
||||
|
||||
{{-- SIDEBAR --}}
|
||||
@include('layouts.navigation')
|
||||
|
||||
{{-- CONTENT --}}
|
||||
<main class="flex-1 bg-syndicate-950 p-6 overflow-auto">
|
||||
|
||||
{{-- Flash messages --}}
|
||||
@if(session('success'))
|
||||
<div class="mb-4 px-4 py-3 bg-green-900/40 border border-green-700 text-green-400 rounded-lg text-sm">
|
||||
{{ session('success') }}
|
||||
</div>
|
||||
@endif
|
||||
@if(session('error'))
|
||||
<div class="mb-4 px-4 py-3 bg-red-900/40 border border-red-800 text-red-400 rounded-lg text-sm">
|
||||
{{ session('error') }}
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@yield('game-content')
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
|
||||
@yield('game-content')
|
||||
</main>
|
||||
|
||||
<!-- Game Footer -->
|
||||
<footer class="bg-gray-800 text-white mt-auto">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
|
||||
<div class="text-center text-sm text-gray-400">
|
||||
© {{ date('Y') }} {{ config('game.name', 'The Crime Syndicate') }} - v{{ config('game.version', '1.0.0') }}
|
||||
</div>
|
||||
</div>
|
||||
{{-- FOOTER --}}
|
||||
<footer class="bg-syndicate-900 border-t border-syndicate-700 py-3 text-center text-xs text-gray-600">
|
||||
© {{ date('Y') }} {{ config('game.name', 'The Crime Syndicate') }} — v{{ config('game.version', '1.0.0') }}
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
Reference in New Issue
Block a user