107 lines
3.2 KiB
Svelte
107 lines
3.2 KiB
Svelte
<script lang="ts">
|
|
import { auth } from '$lib/stores/auth.js';
|
|
;
|
|
|
|
export let toggleSidebar: () => void;
|
|
|
|
function handleLogout() {
|
|
auth.logout();
|
|
}
|
|
|
|
let isMenuOpen = false;
|
|
|
|
function toggleMenu() {
|
|
isMenuOpen = !isMenuOpen;
|
|
}
|
|
</script>
|
|
|
|
<header class="bg-white shadow-sm border-b border-gray-200">
|
|
<div class="flex justify-between items-center px-4 py-3">
|
|
<!-- Left side -->
|
|
<div class="flex items-center space-x-4">
|
|
<button
|
|
on:click={toggleSidebar}
|
|
class="p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-primary-500 lg:hidden"
|
|
>
|
|
<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="M4 6h16M4 12h16M4 18h16"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
|
|
<div class="hidden lg:block">
|
|
<h1 class="text-lg font-semibold text-gray-900">ServiceManager Internal</h1>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right side -->
|
|
<div class="flex items-center space-x-4">
|
|
<!-- User menu -->
|
|
<div class="relative">
|
|
<button
|
|
on:click={toggleMenu}
|
|
class="flex items-center space-x-2 text-gray-700 hover:text-primary-600 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 rounded-md p-2"
|
|
>
|
|
<div class="w-8 h-8 bg-primary-100 rounded-full flex items-center justify-center">
|
|
<span class="text-primary-600 text-sm font-medium">
|
|
{$auth.user?.first_name?.[0]}{$auth.user?.last_name?.[0]}
|
|
</span>
|
|
</div>
|
|
<span class="hidden sm:block text-sm">
|
|
{$auth.user?.first_name}
|
|
{$auth.user?.last_name}
|
|
</span>
|
|
<svg class="w-4 h-4" 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"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
|
|
{#if isMenuOpen}
|
|
<div
|
|
class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg border border-gray-200 z-50"
|
|
>
|
|
<div class="py-1">
|
|
<div class="px-4 py-2 text-xs text-gray-500 border-b border-gray-200">
|
|
{$auth.user?.email}
|
|
</div>
|
|
<a
|
|
href="/profile"
|
|
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
|
|
on:click={() => (isMenuOpen = false)}
|
|
>
|
|
Mi Perfil
|
|
</a>
|
|
<button
|
|
on:click={handleLogout}
|
|
class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
|
|
>
|
|
Cerrar Sesión
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Backdrop for mobile menu -->
|
|
{#if isMenuOpen}
|
|
<div
|
|
class="fixed inset-0 z-40 lg:hidden"
|
|
role="dialog"
|
|
tabindex="0"
|
|
on:click={() => (isMenuOpen = false)}
|
|
on:keydown={e => e.key === 'Escape' && (isMenuOpen = false)}
|
|
/>
|
|
{/if}
|