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

feat(store-header): enhance search functionality with responsive styles and improved visibility

Browse Source
This commit is contained in:
ncoronel
2026-09-23 12:16:18 -03:00
parent 92cc1c0275
commit 2162ae3963
2 changed files with 32 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/core/layout/store-layout/store-header/immersive-store-header.component.html
View File

@@ -34,7 +34,7 @@
<form <form
id="immersive-search" id="immersive-search"
class="immersive-header__search" class="immersive-header__search"
[hidden]="!showHero() && !isSearchOpen()" [class.immersive-header__search--open]="isSearchOpen()"
role="search" role="search"
(submit)="submitSearch($event)" (submit)="submitSearch($event)"
> >
@@ -95,8 +95,8 @@
<div class="immersive-header__account"> <div class="immersive-header__account">
<app-icon-button <app-icon-button
[variant]="showHero() ? 'user' : 'bars'" variant="user"
[ariaLabel]="showHero() ? 'Mi cuenta' : 'Abrir menú'" ariaLabel="Mi cuenta"
ariaControls="immersive-user-dropdown" ariaControls="immersive-user-dropdown"
[ariaExpanded]="isUserDropdownOpen()" [ariaExpanded]="isUserDropdownOpen()"
(clicked)="toggleUserDropdown()" (clicked)="toggleUserDropdown()"

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

@@ -170,7 +170,6 @@
.immersive-header__nav { .immersive-header__nav {
flex-wrap: nowrap; flex-wrap: nowrap;
gap: 0.75rem; gap: 0.75rem;
padding-inline: 8vw !important;
min-height: 44px; min-height: 44px;
} }
@@ -182,27 +181,10 @@
flex: 0 1 auto; flex: 0 1 auto;
gap: 0.375rem; 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 { .immersive-header__search-toggle {
display: inline-flex; display: none;
flex: none; flex: none;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -302,6 +284,34 @@
} }
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
.immersive-header--compact {
.immersive-header__search {
position: absolute;
top: calc(100% + 0.5rem);
right: 8vw;
display: none;
width: min(320px, 84vw);
padding: 0.75rem;
border-radius: 6px;
background: #f5f5f5;
box-shadow: 0 4px 16px #0002;
}
.immersive-header__search--open {
display: block;
}
.immersive-header__search-error {
position: static;
display: block;
margin-top: 0.25rem;
}
.immersive-header__search-toggle {
display: inline-flex;
}
}
.immersive-header:not(.immersive-header--compact) { .immersive-header:not(.immersive-header--compact) {
min-height: 0; min-height: 0;