header

front/src/app/app.html

@@ -1 +1,86 @@
-<gallery></gallery>
+<header class="main-header">
+	<div class="header-container">
+		<!-- Logo/Marca -->
+		<div class="logo">
+			<h1>{{ brandName }}</h1>
+		</div>
+
+		<!-- Buscador -->
+		<div class="search-container">
+			<div class="search-box">
+				<input
+					type="text"
+					placeholder="Buscar fotos..."
+					[(ngModel)]="searchQuery"
+					(input)="onSearch($event)"
+					class="search-input"
+				/>
+				<app-button
+					label="Search"
+					icon="assets/icons/search-alt-1-svgrepo-com.svg"
+					class="search-button"
+					(click)="performSearch()"
+					tooltip="Buscar"
+				></app-button>
+			</div>
+		</div>
+
+		<!-- Iconos de navegación -->
+		<div class="nav-icons">
+			<!-- Icono de perfil -->
+			<app-button
+				label="Profile"
+				icon="assets/icons/user-svgrepo-com.svg"
+				class="profile-button"
+				(click)="openProfile()"
+				tooltip="Mi perfil"
+			></app-button>
+
+			<!-- Menú hamburguesa -->
+			<app-button
+				label="Menu"
+				icon="assets/icons/menu-svgrepo-com.svg"
+				class="menu-button"
+				(click)="toggleMenu()"
+				tooltip="Menú"
+				[class.active]="isMenuOpen"
+			></app-button>
+		</div>
+	</div>
+
+	<!-- Menú desplegable -->
+	@if(isMenuOpen) {
+	<div class="dropdown-menu" (click)="$event.stopPropagation()">
+		<nav class="menu-nav">
+			<a href="#" class="menu-item" (click)="navigateTo('gallery')">
+				<svg-loader
+					src="assets/icons/browsers-svgrepo-com.svg"
+				></svg-loader>
+				Galería
+			</a>
+			<a href="#" class="menu-item" (click)="navigateTo('about')">
+				<svg-loader
+					src="assets/icons/bubble-square-svgrepo-com.svg"
+				></svg-loader>
+				Acerca de
+			</a>
+			<a href="#" class="menu-item" (click)="navigateTo('contact')">
+				<svg-loader
+					src="assets/icons/bell-svgrepo-com.svg"
+				></svg-loader>
+				Contacto
+			</a>
+			<a href="#" class="menu-item" (click)="navigateTo('services')">
+				<svg-loader
+					src="assets/icons/cart-shopping-fast-svgrepo-com.svg"
+				></svg-loader>
+				Servicios
+			</a>
+		</nav>
+	</div>
+	}
+</header>
+
+<main class="main-content">
+	<gallery></gallery>
+</main>