99 lines
2.3 KiB
HTML
99 lines
2.3 KiB
HTML
<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>
|
|
|
|
<app-button
|
|
label="Subir Foto"
|
|
icon="assets/icons/add-svgrepo-com.svg"
|
|
class="add-button"
|
|
(click)="openUploadForm()"
|
|
tooltip="Subir Foto"
|
|
></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">
|
|
@if (showUploadForm) {
|
|
<upload-image-form (close)="closeUploadForm()"></upload-image-form>
|
|
} @else {
|
|
<gallery></gallery>
|
|
}
|
|
</main>
|