336 lines
25 KiB
PHP
336 lines
25 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="dark">
|
|
<head>
|
|
@include('partials.head')
|
|
@fluxAppearance
|
|
</head>
|
|
<body class="min-h-screen bg-white dark:bg-zinc-800">
|
|
<!-- Flux Header -->
|
|
<flux:header container class="bg-zinc-50 dark:bg-zinc-900 border-b border-zinc-200 dark:border-zinc-700">
|
|
<flux:sidebar.toggle class="lg:hidden" icon="bars-2" />
|
|
|
|
<flux:brand href="{{ route('dashboard') }}" name="Auto Repair Shop" class="max-lg:hidden" wire:navigate>
|
|
<x-app-logo />
|
|
</flux:brand>
|
|
|
|
<flux:navbar class="-mb-px max-lg:hidden">
|
|
<flux:navbar.item icon="home" href="{{ route('dashboard') }}" :current="request()->routeIs('dashboard')" wire:navigate>Dashboard</flux:navbar.item>
|
|
<flux:navbar.item icon="clipboard-document-list" href="{{ route('job-cards.index') }}" :current="request()->is('job-cards*')" wire:navigate>Job Cards</flux:navbar.item>
|
|
<flux:navbar.item icon="users" href="{{ route('customers.list') }}" :current="request()->routeIs('customers.*')" wire:navigate>Customers</flux:navbar.item>
|
|
<flux:navbar.item icon="wrench-screwdriver" href="/work-orders" :current="request()->is('work-orders*')" wire:navigate>Work Orders</flux:navbar.item>
|
|
</flux:navbar>
|
|
|
|
<flux:spacer />
|
|
|
|
<flux:navbar class="me-4">
|
|
<flux:navbar.item icon="magnifying-glass" href="#" label="Search" />
|
|
<flux:navbar.item class="max-lg:hidden" icon="cog-6-tooth" href="{{ route('settings.profile') }}" label="Settings" wire:navigate />
|
|
</flux:navbar>
|
|
|
|
<flux:dropdown position="top" align="start">
|
|
<flux:profile name="{{ auth()->user()->name }}" avatar="" />
|
|
|
|
<flux:menu>
|
|
<flux:menu.item icon="user" href="{{ route('settings.profile') }}" wire:navigate>Profile</flux:menu.item>
|
|
<flux:menu.item icon="cog-6-tooth" href="{{ route('settings.profile') }}" wire:navigate>Settings</flux:menu.item>
|
|
|
|
<flux:menu.separator />
|
|
|
|
<form method="POST" action="{{ route('logout') }}">
|
|
@csrf
|
|
<flux:menu.item icon="arrow-right-start-on-rectangle" type="submit">Logout</flux:menu.item>
|
|
</form>
|
|
</flux:menu>
|
|
</flux:dropdown>
|
|
</flux:header>
|
|
|
|
<!-- Mobile Sidebar -->
|
|
<flux:sidebar stashable sticky class="lg:hidden bg-zinc-50 dark:bg-zinc-900 border-r border-zinc-200 dark:border-zinc-700">
|
|
<flux:sidebar.toggle class="lg:hidden" icon="x-mark" />
|
|
|
|
<flux:brand href="{{ route('dashboard') }}" name="Auto Repair Shop" class="px-2" wire:navigate>
|
|
<x-app-logo />
|
|
</flux:brand>
|
|
|
|
<!-- Navigation -->
|
|
<nav class="mt-6 px-4 pb-20">
|
|
<!-- Main Navigation - No sections, just grouped items -->
|
|
<div class="space-y-1">
|
|
<a href="{{ route('dashboard') }}"
|
|
class="flex items-center px-3 py-2 text-sm font-medium rounded-md transition-colors {{ request()->routeIs('dashboard') ? 'bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-300' : 'text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800' }}"
|
|
wire:navigate>
|
|
<svg class="mr-3 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
|
|
</svg>
|
|
{{ __('Dashboard') }}
|
|
</a>
|
|
|
|
<a href="{{ route('customers.list') }}"
|
|
class="flex items-center px-3 py-2 text-sm font-medium rounded-md transition-colors {{ request()->routeIs('customers.*') ? 'bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-300' : 'text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800' }}"
|
|
wire:navigate>
|
|
<svg class="mr-3 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z"></path>
|
|
</svg>
|
|
{{ __('Customers') }}
|
|
</a>
|
|
|
|
<a href="/vehicles"
|
|
class="flex items-center px-3 py-2 text-sm font-medium rounded-md transition-colors {{ request()->is('vehicles*') ? 'bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-300' : 'text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800' }}"
|
|
wire:navigate>
|
|
<svg class="mr-3 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>
|
|
</svg>
|
|
{{ __('Vehicles') }}
|
|
</a>
|
|
|
|
<a href="/appointments"
|
|
class="flex items-center px-3 py-2 text-sm font-medium rounded-md transition-colors {{ request()->is('appointments*') ? 'bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-300' : 'text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800' }}"
|
|
wire:navigate>
|
|
<svg class="mr-3 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
|
|
</svg>
|
|
{{ __('Appointments') }}
|
|
</a>
|
|
|
|
<a href="{{ route('job-cards.index') }}"
|
|
class="flex items-center px-3 py-2 text-sm font-medium rounded-md transition-colors {{ request()->is('job-cards*') ? 'bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-300' : 'text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800' }}"
|
|
wire:navigate>
|
|
<svg class="mr-3 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"></path>
|
|
</svg>
|
|
{{ __('Job Cards') }}
|
|
</a>
|
|
|
|
<a href="/inspections"
|
|
class="flex items-center px-3 py-2 text-sm font-medium rounded-md transition-colors {{ request()->is('inspections*') ? 'bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-300' : 'text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800' }}"
|
|
wire:navigate>
|
|
<svg class="mr-3 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path>
|
|
</svg>
|
|
{{ __('Inspections') }}
|
|
</a>
|
|
|
|
<a href="/diagnosis"
|
|
class="flex items-center px-3 py-2 text-sm font-medium rounded-md transition-colors {{ request()->is('diagnosis*') ? 'bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-300' : 'text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800' }}"
|
|
wire:navigate>
|
|
<svg class="mr-3 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
</svg>
|
|
{{ __('Diagnostics') }}
|
|
</a>
|
|
|
|
<a href="/work-orders"
|
|
class="flex items-center px-3 py-2 text-sm font-medium rounded-md transition-colors {{ request()->is('work-orders*') ? 'bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-300' : 'text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800' }}"
|
|
wire:navigate>
|
|
<svg class="mr-3 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 100 4m0-4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 100 4m0-4v2m0-6V4"></path>
|
|
</svg>
|
|
{{ __('Work Orders') }}
|
|
</a>
|
|
<!-- Financial & Resources -->
|
|
<div class="border-t border-zinc-200 dark:border-zinc-700 pt-4 mt-4">
|
|
<a href="/estimates"
|
|
class="flex items-center px-3 py-2 text-sm font-medium rounded-md transition-colors {{ request()->is('estimates*') ? 'bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-300' : 'text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800' }}"
|
|
wire:navigate>
|
|
<svg class="mr-3 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
|
|
</svg>
|
|
{{ __('Estimates') }}
|
|
</a>
|
|
|
|
<a href="/invoices"
|
|
class="flex items-center px-3 py-2 text-sm font-medium rounded-md transition-colors {{ request()->is('invoices*') ? 'bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-300' : 'text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800' }}"
|
|
wire:navigate>
|
|
<svg class="mr-3 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
|
|
</svg>
|
|
{{ __('Invoices') }}
|
|
</a>
|
|
|
|
<a href="{{ route('inventory.dashboard') }}"
|
|
class="flex items-center px-3 py-2 text-sm font-medium rounded-md transition-colors {{ request()->is('inventory*') ? 'bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-300' : 'text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800' }}"
|
|
wire:navigate>
|
|
<svg class="mr-3 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"></path>
|
|
</svg>
|
|
{{ __('Inventory') }}
|
|
</a>
|
|
|
|
<a href="/service-items"
|
|
class="flex items-center px-3 py-2 text-sm font-medium rounded-md transition-colors {{ request()->is('service-items*') ? 'bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-300' : 'text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800' }}"
|
|
wire:navigate>
|
|
<svg class="mr-3 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
|
</svg>
|
|
{{ __('Service Items') }}
|
|
</a>
|
|
|
|
<a href="/technicians"
|
|
class="flex items-center px-3 py-2 text-sm font-medium rounded-md transition-colors {{ request()->is('technicians*') ? 'bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-300' : 'text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800' }}"
|
|
wire:navigate>
|
|
<svg class="mr-3 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
|
|
</svg>
|
|
{{ __('Technicians') }}
|
|
</a>
|
|
|
|
<a href="{{ route('reports.index') }}"
|
|
class="flex items-center px-3 py-2 text-sm font-medium rounded-md transition-colors {{ request()->is('reports*') ? 'bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-300' : 'text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800' }}"
|
|
wire:navigate>
|
|
<svg class="mr-3 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
|
|
</svg>
|
|
{{ __('Reports') }}
|
|
</a>
|
|
|
|
<!-- Administration -->
|
|
@can('manage-users')
|
|
<div class="border-t border-zinc-200 dark:border-zinc-700 pt-4 mt-4">
|
|
<a href="{{ route('users.index') }}"
|
|
class="flex items-center px-3 py-2 text-sm font-medium rounded-md transition-colors {{ request()->routeIs('users.*') ? 'bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-300' : 'text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800' }}"
|
|
wire:navigate>
|
|
<svg class="mr-3 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z"></path>
|
|
</svg>
|
|
{{ __('User Management') }}
|
|
</a>
|
|
</div>
|
|
@endcan
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<!-- Theme Switcher -->
|
|
@include('partials.theme')
|
|
|
|
<!-- User Menu (Desktop) -->
|
|
<div class="absolute bottom-0 left-0 right-0 p-4 border-t border-zinc-200 dark:border-zinc-700 hidden lg:block">
|
|
<div class="relative">
|
|
<button class="flex items-center w-full px-3 py-2 text-sm font-medium text-zinc-700 dark:text-zinc-300 rounded-md hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors" onclick="toggleUserMenu()">
|
|
<div class="flex-shrink-0 w-8 h-8 bg-zinc-200 dark:bg-zinc-700 rounded-lg flex items-center justify-center text-zinc-600 dark:text-zinc-300 font-semibold mr-3">
|
|
{{ auth()->user()->initials() }}
|
|
</div>
|
|
<div class="flex-1 text-left">
|
|
<div class="text-sm font-medium text-zinc-900 dark:text-white">{{ auth()->user()->name }}</div>
|
|
<div class="text-xs text-zinc-500 dark:text-zinc-400">{{ auth()->user()->email }}</div>
|
|
</div>
|
|
<svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
|
</svg>
|
|
</button>
|
|
|
|
<!-- User Dropdown Menu -->
|
|
<div id="userMenu" class="absolute bottom-full left-0 right-0 mb-2 bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-md shadow-lg py-1 hidden">
|
|
<a href="{{ route('settings.profile') }}" class="flex items-center px-4 py-2 text-sm text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-700" wire:navigate>
|
|
<svg class="mr-3 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
|
</svg>
|
|
{{ __('Settings') }}
|
|
</a>
|
|
|
|
<form method="POST" action="{{ route('logout') }}" class="w-full">
|
|
@csrf
|
|
<button type="submit" class="flex items-center w-full px-4 py-2 text-sm text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-700 text-left">
|
|
<svg class="mr-3 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path>
|
|
</svg>
|
|
{{ __('Log Out') }}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mobile Header -->
|
|
<div class="lg:hidden bg-white dark:bg-zinc-900 border-b border-zinc-200 dark:border-zinc-700 px-4 py-3 flex items-center justify-between">
|
|
<button class="p-2 rounded-md text-zinc-500 hover:text-zinc-600 hover:bg-zinc-100 dark:hover:bg-zinc-800" onclick="toggleSidebar()">
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
|
|
</svg>
|
|
</button>
|
|
|
|
<!-- Mobile User Menu -->
|
|
<div class="relative">
|
|
<button class="flex items-center p-2 rounded-md text-zinc-500 hover:text-zinc-600 hover:bg-zinc-100 dark:hover:bg-zinc-800" onclick="toggleMobileUserMenu()">
|
|
<div class="w-8 h-8 bg-zinc-200 dark:bg-zinc-700 rounded-lg flex items-center justify-center text-zinc-600 dark:text-zinc-300 font-semibold">
|
|
{{ auth()->user()->initials() }}
|
|
</div>
|
|
<svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
|
</svg>
|
|
</button>
|
|
|
|
<!-- Mobile User Dropdown -->
|
|
<div id="mobileUserMenu" class="absolute right-0 top-full mt-2 w-48 bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-md shadow-lg py-1 hidden z-50">
|
|
<div class="px-4 py-2 border-b border-zinc-200 dark:border-zinc-700">
|
|
<div class="text-sm font-medium text-zinc-900 dark:text-white">{{ auth()->user()->name }}</div>
|
|
<div class="text-xs text-zinc-500 dark:text-zinc-400">{{ auth()->user()->email }}</div>
|
|
</div>
|
|
|
|
<a href="{{ route('settings.profile') }}" class="flex items-center px-4 py-2 text-sm text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-700" wire:navigate>
|
|
<svg class="mr-3 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
|
</svg>
|
|
{{ __('Settings') }}
|
|
</a>
|
|
|
|
<form method="POST" action="{{ route('logout') }}" class="w-full">
|
|
@csrf
|
|
<button type="submit" class="flex items-center w-full px-4 py-2 text-sm text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-700 text-left">
|
|
<svg class="mr-3 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path>
|
|
</svg>
|
|
{{ __('Log Out') }}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mobile Sidebar Overlay -->
|
|
<div id="sidebarOverlay" class="fixed inset-0 bg-black bg-opacity-50 z-40 lg:hidden hidden" onclick="toggleSidebar()"></div>
|
|
|
|
<!-- Main Content -->
|
|
<div class="lg:pl-64">
|
|
{{ $slot }}
|
|
</div>
|
|
|
|
<script>
|
|
function toggleSidebar() {
|
|
const sidebar = document.getElementById('sidebar');
|
|
const overlay = document.getElementById('sidebarOverlay');
|
|
|
|
sidebar.classList.toggle('-translate-x-full');
|
|
overlay.classList.toggle('hidden');
|
|
}
|
|
|
|
function toggleUserMenu() {
|
|
const menu = document.getElementById('userMenu');
|
|
menu.classList.toggle('hidden');
|
|
}
|
|
|
|
function toggleMobileUserMenu() {
|
|
const menu = document.getElementById('mobileUserMenu');
|
|
menu.classList.toggle('hidden');
|
|
}
|
|
|
|
// Close menus when clicking outside
|
|
document.addEventListener('click', function(event) {
|
|
const userMenu = document.getElementById('userMenu');
|
|
const mobileUserMenu = document.getElementById('mobileUserMenu');
|
|
|
|
if (!event.target.closest('.relative')) {
|
|
userMenu?.classList.add('hidden');
|
|
mobileUserMenu?.classList.add('hidden');
|
|
}
|
|
});
|
|
</script>
|
|
|
|
@livewireScripts
|
|
@fluxScripts
|
|
</body>
|
|
</html>
|