diff --git a/src/app/core/layout/store-layout/store-header/immersive-store-header.component.html b/src/app/core/layout/store-layout/store-header/immersive-store-header.component.html
index 809cb17..51e8d0b 100644
--- a/src/app/core/layout/store-layout/store-header/immersive-store-header.component.html
+++ b/src/app/core/layout/store-layout/store-header/immersive-store-header.component.html
@@ -31,7 +31,13 @@
@@ -118,7 +144,6 @@
ariaLabel="Imágenes del evento"
/>
}
-
}
diff --git a/src/app/core/layout/store-layout/store-header/immersive-store-header.component.scss b/src/app/core/layout/store-layout/store-header/immersive-store-header.component.scss
index 4c18f43..08fa76b 100644
--- a/src/app/core/layout/store-layout/store-header/immersive-store-header.component.scss
+++ b/src/app/core/layout/store-layout/store-header/immersive-store-header.component.scss
@@ -159,10 +159,104 @@
}
.immersive-header--compact {
- min-height: 0;
- padding-bottom: 1.5rem;
+ min-height: 115px;
color: #666666;
background: transparent;
+
+ .immersive-header__content {
+ padding: 35px 0 36px;
+ }
+
+ .immersive-header__nav {
+ flex-wrap: nowrap;
+ gap: 0.75rem;
+ padding-inline: 8vw !important;
+ min-height: 44px;
+ }
+
+ .immersive-header__brand img {
+ width: clamp(92px, 24vw, 145px);
+ }
+
+ .immersive-header__actions {
+ flex: 0 1 auto;
+ gap: 0.375rem;
+ }
+
+ .immersive-header__search {
+ position: absolute;
+ top: calc(100% + 0.5rem);
+ right: 8vw;
+ width: min(320px, 84vw);
+ padding: 0.75rem;
+ border-radius: 6px;
+ background: #f5f5f5;
+ box-shadow: 0 4px 16px #0002;
+ }
+
+ .immersive-header__search-error {
+ position: static;
+ display: block;
+ margin-top: 0.25rem;
+ }
+}
+
+.immersive-header__search-toggle {
+ display: inline-flex;
+ flex: none;
+ align-items: center;
+ justify-content: center;
+ width: 32px;
+ height: 44px;
+ padding: 0;
+ border: 0;
+ border-radius: 4px;
+ background: transparent;
+ color: #888;
+ font-size: 20px;
+
+ &:focus-visible {
+ outline: 2px solid var(--tenant-primary);
+ outline-offset: 2px;
+ }
+}
+
+.immersive-header__guest-menu {
+ position: absolute;
+ top: calc(100% + 0.5rem);
+ right: 0;
+ min-width: 180px;
+ padding: 0.5rem;
+ border-radius: 6px;
+ background: #fff;
+ box-shadow: 0 4px 16px #0002;
+
+ button {
+ width: 100%;
+ padding: 0.75rem;
+ border: 0;
+ background: transparent;
+ color: #666;
+ text-align: left;
+ }
+}
+
+:host ::ng-deep .immersive-header--compact {
+ .immersive-header__tickets {
+ flex: none;
+ width: auto;
+
+ .btn {
+ min-width: 120px;
+ white-space: nowrap;
+ }
+ }
+
+ .immersive-header__account .icon-btn {
+ width: 32px;
+ height: 44px;
+ color: #888;
+ }
}
.immersive-header--compact .immersive-header__backdrop {
display: none;
@@ -170,7 +264,18 @@
:host ::ng-deep .immersive-header--compact .immersive-header__actions .icon-btn,
:host ::ng-deep .immersive-header--compact .immersive-header__actions .cart-icon {
- color: #666666;
+ color: #888;
+}
+
+@media (max-width: 359.98px) {
+ .immersive-header--compact .immersive-header__nav {
+ padding-inline: 1rem !important;
+ gap: 0.375rem;
+ }
+
+ .immersive-header--compact .immersive-header__actions {
+ gap: 0.125rem;
+ }
}
@media (max-width: 600px) {
diff --git a/src/app/core/layout/store-layout/store-header/immersive-store-header.component.ts b/src/app/core/layout/store-layout/store-header/immersive-store-header.component.ts
index d5e757e..ea5e032 100644
--- a/src/app/core/layout/store-layout/store-header/immersive-store-header.component.ts
+++ b/src/app/core/layout/store-layout/store-header/immersive-store-header.component.ts
@@ -7,6 +7,8 @@ import {
input,
output,
signal,
+ afterRenderEffect,
+ viewChild,
} from '@angular/core';
import { RouterLink } from '@angular/router';
import { AuthUser } from '../../../services/auth/auth.interfaces';
@@ -59,6 +61,20 @@ export class ImmersiveStoreHeaderComponent {
protected searchTerm = '';
protected readonly showSearchError = signal(false);
protected readonly isUserDropdownOpen = signal(false);
+ protected readonly isSearchOpen = signal(false);
+ private readonly searchInput = viewChild(InputComponent);
+ private readonly searchToggle = viewChild>('searchToggle');
+
+ constructor() {
+ afterRenderEffect(() => {
+ if (this.isSearchOpen()) this.searchInput()?.focus();
+ });
+ }
+
+ protected toggleSearch(): void {
+ this.isUserDropdownOpen.set(false);
+ this.isSearchOpen.update((open) => !open);
+ }
protected readonly checkoutRemainingTime = computed(() => {
const seconds = this.checkoutRemainingSeconds();
if (seconds === null) return null;
@@ -76,11 +92,13 @@ export class ImmersiveStoreHeaderComponent {
return;
}
this.showSearchError.set(false);
+ this.isSearchOpen.set(false);
this.searchSubmit.emit(term);
}
protected toggleUserDropdown(): void {
- if (!this.isAuthenticated()) {
+ this.isSearchOpen.set(false);
+ if (this.showHero() && !this.isAuthenticated()) {
this.loginClick.emit();
return;
}
@@ -100,11 +118,14 @@ export class ImmersiveStoreHeaderComponent {
protected onDocumentClick(event: MouseEvent): void {
if (event.target instanceof Node && !this.host.nativeElement.contains(event.target)) {
this.isUserDropdownOpen.set(false);
+ this.isSearchOpen.set(false);
}
}
@HostListener('document:keydown.escape')
protected onEscapeKey(): void {
+ if (this.isSearchOpen()) this.searchToggle()?.nativeElement.focus();
+ this.isSearchOpen.set(false);
this.isUserDropdownOpen.set(false);
}
}
diff --git a/src/app/core/layout/store-layout/store-header/store-header.component.html b/src/app/core/layout/store-layout/store-header/store-header.component.html
index 3446530..26b42a1 100644
--- a/src/app/core/layout/store-layout/store-header/store-header.component.html
+++ b/src/app/core/layout/store-layout/store-header/store-header.component.html
@@ -21,7 +21,7 @@
(logoutClick)="logoutClick.emit()"
(searchSubmit)="searchSubmit.emit($event)"
>
- @if (displayCategories() && categories().length) {
+ @if (showHero() && displayCategories() && categories().length) {