Initial commit

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

@@ -0,0 +1,89 @@
+<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" 
+    on:click={() => isMenuOpen = false}
+  ></div>
+{/if}