feat(Header): creado componente para la cabecera

src/components/Header.vue

+<template> 
+  <nav class="navbar navbar-expand-lg nav-style"> 
+    <div class="container-fluid"> 
+      <!-- Logo --> 
+      <a class="navbar-brand ms-2"> 
+        <img src="/src/assets/nombre.jpg" alt="Logo" width="180" height="28"> 
+      </a> 
+        
+      <!-- Perfil --> 
+      <div class="d-flex align-items-center order-lg-2"> 
+        <ul class="navbar-nav ms-auto"> 
+          <li class="nav-item dropdown"> 
+            <button class="btn btn-profile dropdown-toggle" id="navbarDropdown" type="button" data-bs-toggle="dropdown" aria-expanded="false"> 
+              <i class="bi bi-person-circle fs-4"></i> 
+            </button> 
+            <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown"> 
+              <li><a class="dropdown-item" href="#!">Gestión</a></li> 
+              <li><a class="dropdown-item" href="#!">Mis datos</a></li> 
+              <li><hr class="dropdown-divider" /></li> 
+              <li><a class="dropdown-item" href="#!">Cerrar sesión</a></li> 
+            </ul> 
+          </li> 
+        </ul> 
+            
+            <!-- Botón despliegue enlaces --> 
+            <button class="navbar-toggler ms-2" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" > 
+              <span class="navbar-toggler-icon"></span> 
+            </button> 
+      </div> 
+            
+      <!-- Contenido desplegable --> 
+      <div class="collapse navbar-collapse justify-content-center order-lg-1" id="navbarSupportedContent"> 
+        <ul class="navbar-nav mx-auto mb-2 mb-lg-0 nav nav-pills nav-fill"> 
+          <li class="nav-item"><a class="nav-link active" href="#">Home</a></li> 
+          <li class="nav-item"><a class="nav-link" href="#">Crear receta</a></li> 
+          <li class="nav-item"><a class="nav-link" href="/recipes">Mis recetas</a></li> 
+          <li class="nav-item"><a class="nav-link" href="/recipes/search">Búsqueda avanzada</a></li> 
+        </ul> 
+        <form class="d-flex my-2 my-lg-0"> 
+          <input class="form-control me-2" type="search" placeholder="Buscar" aria-label="Search"/> 
+          <button class="btn btn-search" type="submit"> 
+            <i class="bi bi-search"></i> 
+          </button> 
+        </form> 
+      </div> 
+    </div> 
+  </nav> 
+</template>
+
+<style scoped>
+
+.nav-style {
+    background-color: #ECE1EA;
+    border-bottom: 1px solid lightgray;
+    height: 70px;
+    z-index: 1050;
+}
+
+.btn-search {
+    border-color: #793E6C;
+    color: #793E6C;
+}
+
+.btn-search:hover {
+    background-color: #793E6C;
+    color: white;
+}
+
+.form-control:focus {
+    border-color: #793E6C;
+    box-shadow: 0 0 0 0.25rem rgba(121, 62, 108, 0.25); 
+}
+
+.nav-link {
+    color: #000;
+    font-weight: 500;
+}
+
+.nav-link.active {
+    background-color: #793e6c !important;
+    color: #fff !important;
+}
+
+.nav-link:hover {
+    color: #793E6C;
+}
+
+.btn-profile {
+    color: #793E6C;
+    background-color: transparent;
+    border: none;
+    font-size: 1.5rem;
+}
+
+.btn-profile:hover {
+    color: #5e3054;
+}
+
+/* Evita que el dropdown del perfil empuje el layout */
+.navbar .dropdown-menu {
+  position: absolute;
+}
+
+.navbar-toggler {
+  border: none;
+}
+
+.navbar-toggler-icon {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(121,62,108,1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
+}
+
+.collapse {
+  background-color: #ECE1EA;
+  border-color: #ccc;
+  border-radius: 1rem;
+  padding: 10px;
+}
+
+</style> 
\ No newline at end of file