Initial commit

frontend-client/src/lib/components/Header.svelte

@@ -0,0 +1,130 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { auth } from '$lib/stores/auth.js';
+  import Icon from './Icon.svelte';
+  
+  export let showLogo = true;
+  export let showNavigation = true;
+  
+  let isMenuOpen = false;
+  
+  onMount(() => {
+    auth.init();
+  });
+  
+  function toggleMenu() {
+    isMenuOpen = !isMenuOpen;
+  }
+  
+  function handleLogout() {
+    auth.logout();
+    isMenuOpen = false;
+  }
+</script>
+
+<header class="bg-white shadow-sm border-b border-gray-200">
+  <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 -->
+      {#if showLogo}
+        <div class="flex items-center">
+          <a href="/" class="flex items-center space-x-2">
+            <div class="w-8 h-8 bg-primary-600 rounded-lg flex items-center justify-center">
+              <Icon name="ticket" size="w-5 h-5" className="text-white" />
+            </div>
+            <div class="hidden sm:block">
+              <h1 class="text-xl font-semibold text-gray-900">ServiceManager</h1>
+              <p class="text-xs text-gray-500">Mesa de Ayuda</p>
+            </div>
+          </a>
+        </div>
+      {/if}
+
+      <!-- Navigation -->
+      {#if showNavigation && $auth.isAuthenticated}
+        <nav class="hidden md:flex space-x-8">
+          <a href="/tickets" class="text-gray-700 hover:text-primary-600 px-3 py-2 text-sm font-medium">
+            Mis Tickets
+          </a>
+          <a href="/tickets/new" class="text-gray-700 hover:text-primary-600 px-3 py-2 text-sm font-medium">
+            Crear Ticket
+          </a>
+        </nav>
+      {/if}
+
+      <!-- User menu -->
+      <div class="flex items-center space-x-4">
+        {#if $auth.isAuthenticated}
+          <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>
+              <Icon name="chevronDown" size="w-4 h-4" />
+            </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>
+        {:else}
+          <a
+            href="/login"
+            class="text-gray-700 hover:text-primary-600 text-sm font-medium"
+          >
+            Iniciar Sesión
+          </a>
+        {/if}
+      </div>
+    </div>
+
+    <!-- Mobile navigation -->
+    {#if showNavigation && $auth.isAuthenticated}
+      <div class="md:hidden border-t border-gray-200 py-2">
+        <nav class="flex space-x-4">
+          <a href="/tickets" class="text-gray-700 hover:text-primary-600 px-3 py-2 text-sm font-medium">
+            Mis Tickets
+          </a>
+          <a href="/tickets/new" class="text-gray-700 hover:text-primary-600 px-3 py-2 text-sm font-medium">
+            Crear Ticket
+          </a>
+        </nav>
+      </div>
+    {/if}
+  </div>
+</header>
+
+<!-- Backdrop for mobile menu -->
+{#if isMenuOpen}
+  <div 
+    class="fixed inset-0 z-40 md:hidden" 
+    on:click={() => isMenuOpen = false}
+  ></div>
+{/if}