tbianchini/shopit-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(store-header): enhance immersive header with compact mode and dynamic background

Browse Source
This commit is contained in:
ncoronel
2026-09-21 11:18:24 -03:00
parent f6ff91ff3b
commit c876b2b171
3 changed files with 34 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/app/core/layout/store-layout/store-header/immersive-store-header.component.scss
View File

@@ -149,14 +149,16 @@
.immersive-header--compact { .immersive-header--compact {
min-height: 0; min-height: 0;
padding-bottom: 1.5rem; padding-bottom: 1.5rem;
background: #171717; color: #666666;
background: transparent;
} }
.immersive-header--compact .immersive-header__backdrop { .immersive-header--compact .immersive-header__backdrop {
position: absolute; display: none;
inset: 0;
} }
.immersive-header--compact .immersive-header__backdrop::after {
background: rgba(0, 0, 0, 0.65); :host ::ng-deep .immersive-header--compact .immersive-header__actions .icon-btn,
:host ::ng-deep .immersive-header--compact .immersive-header__actions .cart-icon {
color: #666666;
} }
@media (max-width: 600px) { @media (max-width: 600px) {

11
src/app/core/layout/store-layout/store-header/store-header.component.scss
View File

@@ -2,6 +2,17 @@
display: block; display: block;
} }
:host(.immersive-shell--compact) {
background-color: #f5f5f5;
background-position: center 42%;
background-size: cover;
}
:host(.immersive-shell--compact) .immersive-categories {
border-top: 1px solid rgba(255, 255, 255, 0.6);
background: transparent;
}
.immersive-categories { .immersive-categories {
width: 100%; width: 100%;
overflow-x: auto; overflow-x: auto;

17
src/app/core/layout/store-layout/store-header/store-header.component.ts
View File

@@ -1,5 +1,5 @@
import { NgTemplateOutlet, UpperCasePipe } from '@angular/common'; import { NgTemplateOutlet, UpperCasePipe } from '@angular/common';
import { Component, input, output } from '@angular/core'; import { Component, computed, input, output } from '@angular/core';
import { AuthUser } from '../../../services/auth/auth.interfaces'; import { AuthUser } from '../../../services/auth/auth.interfaces';
import { Category, Menu, WebsiteExtras } from '../../../services/tenant.interface'; import { Category, Menu, WebsiteExtras } from '../../../services/tenant.interface';
import { ImmersiveStoreHeaderComponent } from './immersive-store-header.component'; import { ImmersiveStoreHeaderComponent } from './immersive-store-header.component';
@@ -12,6 +12,10 @@ export type StoreHeaderType = 'standard' | 'immersive';
imports: [NgTemplateOutlet, UpperCasePipe, StandardStoreHeaderComponent, ImmersiveStoreHeaderComponent], imports: [NgTemplateOutlet, UpperCasePipe, StandardStoreHeaderComponent, ImmersiveStoreHeaderComponent],
templateUrl: './store-header.component.html', templateUrl: './store-header.component.html',
styleUrl: './store-header.component.scss', styleUrl: './store-header.component.scss',
host: {
'[class.immersive-shell--compact]': 'isCompactImmersive()',
'[style.background-image]': 'compactBackground()',
},
}) })
export class StoreHeaderComponent { export class StoreHeaderComponent {
readonly headerType = input<StoreHeaderType>('standard'); readonly headerType = input<StoreHeaderType>('standard');
@@ -20,6 +24,17 @@ export class StoreHeaderComponent {
readonly heroContent = input<WebsiteExtras['immersiveHero']>(undefined); readonly heroContent = input<WebsiteExtras['immersiveHero']>(undefined);
readonly carouselImages = input<readonly string[]>([]); readonly carouselImages = input<readonly string[]>([]);
readonly showHero = input(true); readonly showHero = input(true);
protected readonly isCompactImmersive = computed(
() => this.headerType() === 'immersive' && !this.showHero(),
);
protected readonly compactBackground = computed(() => {
if (!this.isCompactImmersive()) return null;
const gradient =
'linear-gradient(180deg, rgba(245, 245, 245, 0.72) 0%, rgba(245, 245, 245, 0.88) 58%, #f5f5f5 100%)';
const image = this.backgroundImageUrl();
return image ? `${gradient}, url(${JSON.stringify(image)})` : gradient;
});
readonly cartQuantity = input<number>(0); readonly cartQuantity = input<number>(0);
readonly user = input<AuthUser | null>(null); readonly user = input<AuthUser | null>(null);
readonly isAuthenticated = input<boolean>(false); readonly isAuthenticated = input<boolean>(false);