132 lines
6.6 KiB
PHP
132 lines
6.6 KiB
PHP
@php
|
|
$user = auth()->user();
|
|
$userName = $user?->name ?? '';
|
|
$initials = collect(explode(' ', trim($userName)))->map(fn($w) => strtoupper(substr($w, 0, 1)))->take(2)->implode('');
|
|
if (!$initials && $user) {
|
|
$initials = strtoupper(substr($user->email, 0, 2));
|
|
}
|
|
@endphp
|
|
|
|
<header class="h-14 flex-shrink-0 bg-s1 border-b border-white/[.06] flex items-center justify-between px-4 gap-4">
|
|
<!-- Left: Hamburger (mobile) + Title -->
|
|
<div class="flex items-center gap-3 min-w-0">
|
|
<!-- Mobile hamburger -->
|
|
<button
|
|
class="md:hidden text-t2 hover:text-t1 transition-colors p-1 -ml-1"
|
|
@click="$store.sidebar.open = !$store.sidebar.open"
|
|
aria-label="Toggle sidebar"
|
|
>
|
|
<svg class="w-5 h-5" fill="none" viewBox="0 0 20 20" stroke="currentColor" stroke-width="1.5">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M3 6h14M3 10h14M3 14h14"/>
|
|
</svg>
|
|
</button>
|
|
|
|
<!-- Page title -->
|
|
@if(!empty($title))
|
|
<h1 class="text-sm font-medium text-t1 truncate">{{ $title }}</h1>
|
|
@endif
|
|
</div>
|
|
|
|
<!-- Right: Actions -->
|
|
<div class="flex items-center gap-1 flex-shrink-0">
|
|
<!-- Theme Toggle -->
|
|
<button
|
|
@click="$store.theme.cycle()"
|
|
class="w-8 h-8 flex items-center justify-center rounded-lg text-t2 hover:text-t1 hover:bg-s2 transition-colors"
|
|
:title="'Theme: ' + $store.theme.current"
|
|
aria-label="Toggle theme"
|
|
>
|
|
<template x-if="$store.theme.current === 'dark'">
|
|
<svg class="w-4 h-4" fill="none" viewBox="0 0 16 16" stroke="currentColor" stroke-width="1.5">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M8 1v1.5M8 13.5V15M1 8h1.5M13.5 8H15M3.5 3.5l1 1M11.5 11.5l1 1M11.5 4.5l1-1M3.5 12.5l1-1"/>
|
|
<circle cx="8" cy="8" r="3"/>
|
|
</svg>
|
|
</template>
|
|
<template x-if="$store.theme.current === 'light'">
|
|
<svg class="w-4 h-4" fill="none" viewBox="0 0 16 16" stroke="currentColor" stroke-width="1.5">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M8 3a5 5 0 100 10A5 5 0 008 3z" clip-rule="evenodd"/>
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M11.5 4.5a5 5 0 01-7 7A5 5 0 0111.5 4.5z"/>
|
|
</svg>
|
|
</template>
|
|
<template x-if="$store.theme.current === 'system'">
|
|
<svg class="w-4 h-4" fill="none" viewBox="0 0 16 16" stroke="currentColor" stroke-width="1.5">
|
|
<rect x="2" y="2" width="12" height="9" rx="1.5"/><path stroke-linecap="round" stroke-linejoin="round" d="M5.5 14.5h5M8 11.5v3"/>
|
|
</svg>
|
|
</template>
|
|
</button>
|
|
|
|
<!-- Notifications Bell -->
|
|
<div class="relative">
|
|
<button
|
|
class="w-8 h-8 flex items-center justify-center rounded-lg text-t2 hover:text-t1 hover:bg-s2 transition-colors"
|
|
aria-label="Notifications"
|
|
>
|
|
<svg class="w-4 h-4" fill="none" viewBox="0 0 16 16" stroke="currentColor" stroke-width="1.5">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M8 1.5a5 5 0 00-5 5v2.5l-1 1.5h12l-1-1.5V6.5a5 5 0 00-5-5zM6.5 13.5a1.5 1.5 0 003 0"/>
|
|
</svg>
|
|
</button>
|
|
<span class="absolute top-1 right-1 w-3.5 h-3.5 bg-blue rounded-full text-white text-[9px] font-medium flex items-center justify-center leading-none pointer-events-none">3</span>
|
|
</div>
|
|
|
|
<!-- User Dropdown -->
|
|
<div class="relative ml-1" x-data="{ userOpen: false }">
|
|
<button
|
|
@click="userOpen = !userOpen"
|
|
class="w-8 h-8 rounded-full bg-blue flex items-center justify-center text-white text-xs font-semibold hover:opacity-90 transition-opacity"
|
|
aria-label="User menu"
|
|
>
|
|
{{ $initials }}
|
|
</button>
|
|
|
|
<!-- Dropdown -->
|
|
<div
|
|
x-show="userOpen"
|
|
@click.outside="userOpen = false"
|
|
x-transition:enter="transition ease-out duration-100"
|
|
x-transition:enter-start="opacity-0 scale-95 translate-y-1"
|
|
x-transition:enter-end="opacity-100 scale-100 translate-y-0"
|
|
x-transition:leave="transition ease-in duration-75"
|
|
x-transition:leave-start="opacity-100 scale-100 translate-y-0"
|
|
x-transition:leave-end="opacity-0 scale-95 translate-y-1"
|
|
class="absolute right-0 top-10 w-52 bg-s2 border border-white/[.06] rounded-xl shadow-xl py-1 z-50"
|
|
>
|
|
<!-- User info -->
|
|
<div class="px-4 py-2.5 border-b border-white/[.06]">
|
|
<div class="text-sm font-medium text-t1 truncate">{{ $userName }}</div>
|
|
<div class="text-xs text-t3 truncate">{{ $user?->email }}</div>
|
|
</div>
|
|
|
|
<!-- Links -->
|
|
<div class="py-1">
|
|
<a
|
|
href="{{ route('profile.personal') }}"
|
|
wire:navigate
|
|
@click="userOpen = false"
|
|
class="flex items-center gap-2.5 px-4 py-2 text-sm text-t2 hover:text-t1 hover:bg-s3 transition-colors"
|
|
>
|
|
<svg class="w-4 h-4" fill="none" viewBox="0 0 16 16" stroke="currentColor" stroke-width="1.5">
|
|
<circle cx="8" cy="5" r="2.5"/><path stroke-linecap="round" stroke-linejoin="round" d="M2.5 14c0-3 2.5-5 5.5-5s5.5 2 5.5 5"/>
|
|
</svg>
|
|
Profile
|
|
</a>
|
|
</div>
|
|
|
|
<div class="border-t border-white/[.06] py-1">
|
|
<form method="POST" action="{{ route('logout') }}">
|
|
@csrf
|
|
<button
|
|
type="submit"
|
|
class="w-full flex items-center gap-2.5 px-4 py-2 text-sm text-red hover:bg-s3 transition-colors"
|
|
>
|
|
<svg class="w-4 h-4" fill="none" viewBox="0 0 16 16" stroke="currentColor" stroke-width="1.5">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 11.5l3-3.5-3-3.5M13.5 8H6M6 2.5H3a1 1 0 00-1 1v9a1 1 0 001 1h3"/>
|
|
</svg>
|
|
Sign out
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|