From 9760f1c9efda942496d5489db1d2879b542fd274 Mon Sep 17 00:00:00 2001
From: Douglas Nobrega <dougrete2014@outlook.com>
Date: Wed, 7 Dec 2022 21:00:14 -0300
Subject: [PATCH] Cria o header mobile

---
 src/arquivos/sass/partials/_header.scss       | 147 +++++++++++-------
 src/arquivos/sass/partials/_menu.scss         |  17 +-
 src/arquivos/sass/utils/_variaveis.scss       |   1 +
 src/arquivos/sprite/user-icon.png             | Bin 770 -> 822 bytes
 .../sub-templates/douglas-header.html         |  16 +-
 5 files changed, 121 insertions(+), 60 deletions(-)

diff --git a/src/arquivos/sass/partials/_header.scss b/src/arquivos/sass/partials/_header.scss
index 650d0b2..3f03f2c 100644
--- a/src/arquivos/sass/partials/_header.scss
+++ b/src/arquivos/sass/partials/_header.scss
@@ -2,28 +2,26 @@
 	padding: 28px 0;
 	background-color: $black-500;
 
+	@include mq(lg, max) {
+		padding: 18px 0 0;
+	}
+
 	&__wrapper {
 		display: grid;
 		grid-template-columns: 2fr 1fr 2fr;
 		align-items: center;
+
+		@include mq(lg, max) {
+			grid-template-columns: repeat(3, 1fr);
+		}
 	}
 
 	&__logo {
 		display: block;
 		margin: 0 auto;
-	}
 
-	.user-items {
-		display: flex;
-		align-items: center;
-		justify-content: flex-end;
-
-		&__search-box {
-			flex: 1;
-			max-width: 212px;
-			@include mq(md, max) {
-				display: none;
-			}
+		@include mq(lg, max) {
+			max-width: 66px;
 		}
 	}
 
@@ -31,8 +29,6 @@
 		display: flex;
 		align-items: center;
 		margin: 0;
-		padding: 8px 0;
-		border-bottom: 1px solid $white-500;
 
 		legend,
 		label,
@@ -66,55 +62,98 @@
 		}
 	}
 
-	&__account-link {
+	.user-items {
 		display: flex;
 		align-items: center;
-		&::before,
-		&::after {
-			content: "";
-			width: 1px;
-			height: 19px;
-			margin: 0 24px;
-			background: $white-500;
-		}
-	}
+		justify-content: flex-end;
 
-	&__minicart-button {
-		position: relative;
-		padding: 0;
-		border: 0;
-		outline: 0;
-		background: transparent;
-		.portal-totalizers-ref {
-			.title,
-			.amount-products,
-			.amount-items strong,
-			.amount-kits,
-			.total-cart {
+		&__search-box {
+			flex: 1;
+			max-width: 212px;
+
+			@include mq(lg, max) {
 				display: none;
 			}
+
+			.busca {
+				padding: 8px 0;
+				border-bottom: 1px solid $white-500;
+			}
 		}
 
-		.cart-info {
-			margin: 0;
-		}
-
-		.amount-items-em {
+		&__account-link {
 			display: flex;
 			align-items: center;
-			justify-content: center;
-			position: absolute;
-			top: 4px;
-			right: -4px;
-			width: 15px;
-			height: 15px;
-			border-radius: 50%;
-			line-height: 11px;
-			font-size: 9px;
-			font-weight: bold;
-			font-style: normal;
-			color: $white-500;
-			background: $blue-500;
+			&::before,
+			&::after {
+				content: "";
+				width: 1px;
+				height: 19px;
+				margin: 0 24px;
+				background: $white-500;
+
+				@include mq(lg, max) {
+					margin: 0 16px;
+				}
+			}
+
+			&::before {
+				@include mq(lg, max) {
+					display: none;
+				}
+			}
+		}
+
+		&__minicart-button {
+			position: relative;
+			padding: 0;
+			border: 0;
+			outline: 0;
+			background: transparent;
+			.portal-totalizers-ref {
+				.title,
+				.amount-products,
+				.amount-items strong,
+				.amount-kits,
+				.total-cart {
+					display: none;
+				}
+			}
+
+			.cart-info {
+				margin: 0;
+			}
+
+			.amount-items-em {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				position: absolute;
+				top: 4px;
+				right: -4px;
+				width: 15px;
+				height: 15px;
+				border-radius: 50%;
+				line-height: 11px;
+				font-size: 9px;
+				font-weight: bold;
+				font-style: normal;
+				color: $white-500;
+				background: $blue-500;
+			}
 		}
 	}
+
+	&__search-box {
+		margin-top: 18px;
+		border-top: 1px solid $gray-500;
+
+		@include mq(lg, min) {
+			display: none;
+		}
+	}
+
+	.busca {
+		padding: 13px 0;
+	}
 }
diff --git a/src/arquivos/sass/partials/_menu.scss b/src/arquivos/sass/partials/_menu.scss
index 24e0e10..577cd86 100644
--- a/src/arquivos/sass/partials/_menu.scss
+++ b/src/arquivos/sass/partials/_menu.scss
@@ -1,3 +1,16 @@
-.main-menu {
-	display: none;
+.menu {
+	&__button {
+		padding: 0;
+		border: 0;
+		outline: 0;
+		background: transparent;
+
+		@include mq(lg, min) {
+			display: none;
+		}
+	}
+
+	.main-menu {
+		display: none;
+	}
 }
diff --git a/src/arquivos/sass/utils/_variaveis.scss b/src/arquivos/sass/utils/_variaveis.scss
index 9c09345..c99c340 100644
--- a/src/arquivos/sass/utils/_variaveis.scss
+++ b/src/arquivos/sass/utils/_variaveis.scss
@@ -12,6 +12,7 @@ $font-height: 1.5;
 $black-500: #000000;
 $white-500: #ffffff;
 $blue-500: #00c8ff;
+$gray-500: #333333;
 
 // Grid breakpoints
 
diff --git a/src/arquivos/sprite/user-icon.png b/src/arquivos/sprite/user-icon.png
index 15dc1816171fc082d08d5eac7d5fa2aa42e7790f..f0e96d9d076b8325e1941cfcd6156b737e2f40e0 100644
GIT binary patch
delta 783
zcmV+q1MvKU2DSzviBL{Q4GJ0x0000DNk~Le0000e0000m2nGNE0AqVNn~@<kf6GZk
zK~#7F?OB19n=lMjIsu)a9)V6!Izh8R*`T+<WrN%XTqmHNfOLYU6TnRnHc+jL+z6i`
zwu3od-~IRWNWii`k}XRH;07RKrsYmcqou_QTE16mQLr?a*u9n$`r#fTv4KFaMQSa%
zxZP{%v>df$EQO^?&p&TAn+{UKf8k1UW9Dd=@iW=}H>3o+_1|DFVh$a}Z4Gvi0z8nk
zoC?%6^Y!HOVlf0uL9m2CkmZE_9n1|phmB`I1b9vwEB=7FAv$j$5@Ig4zB=!~A7<YC
zfp{2Q<*VRD&{_~Z#G@B|e(+HUvEUpCez~Oy2IIdWC|%<<cSfMh54|TpfB7hQ5!9U#
z!QLJu0_Np9Uxg4CANiU?JdAGVs}Mr)7hh>dC?F85V`Aw~U%e252l0Cg;rKez*L)EB
z@d?ATne;g!xhWza%y5{rmXH!Mt6`FAqOF~*RuG7onuM%IZc^elrBAeoOie=1zQC|9
z>9l<0kd+o}8EMIDXfQ<<f9*lEyh4<o6|f}qfZurFT-<w(jas%$I+qq>i`PjP2oq>x
zCcJL@DD>J{t?D2~pg8CqthtZY>Z6V(io-J(8x=-Ocy{xnqrVn?&v0;h(l<DRYj8RO
zP|Pe{O4*1Kx$*%MtVCf^*8x;L@RI(sw@6iZo;S&37aM1bFWtYFe{W*Y;%l7eUC1gN
zE~XsVg$4z@GH{rX>;@?mtOO`dF(_eGeE$gRf#ISg!4B2~Q}L;{!u?hdL6bnfhxNeJ
z&pi?B_|K=cgc*?Q!is~)VW)(Jf$prSx|U^BDXq$+_UPV^o58L&K@_<IQrKbS9?kvJ
zo=a(5jpJXb8flb`Wve57DdBt)peDvNUzd6zHWZ8b`ZR`4%XcjgcGWjocH+72DBxuY
zc`Jwn?G{w39yF=LSi_*Y7%wY~h*KyqHLw~{>EL4NCniPGEm9vZfxq2T)-WLY#Pk3F
N002ovPDHLkV1hMtX6OI_

delta 731
zcmV<10wn#m27(45iBL{Q4GJ0x0000DNk~Le0000a0000h2nGNE01#FxO_3orf0s!_
zK~#7F%~*kP+b|4-I)OF_H>fr!J3%~xM#u(sCull>y+ONy+X?JUAZ=iE0+gr#2WAwL
zkf|hphodC}<P#)8Kmap<h;@*MAU}h2_>2R;YvHXB23rL=VH({WVwFWX46qK(M!otS
z<SEFJpPL|`gLtL0sjBK5lm^W<f116&qU-T;DLs^i8i3k5L*Ho|D2d2B&S2-2-3m&9
zPYz)ZMvx8LZgccMK^{D}f548XsE@12B_w<12zH2#%TZ1eiuTL^b_}YoyOeUShi-vs
z5^q7s1S_Fr{7K+%N+C%og#BJU&LPyOzLLwA>!CjG+yKXI)(OoeB=P49f7o%)?VOM?
zjpz#S2D@gdtAi4<llA(b>td11l{??4**;|Gua$laO900dRj{5)L)e?&m7d8v){N1G
zhL+6nD>}xsS$lpaf*zj31HJzmg^se|#A}CXY%wE|i(&N;4N%jJ*;_4Kh63^!r5iie
zp|~{^_Ym)kwVHiy3VYsfe^3I7h%S3N%t&L|wu|gqm;)RGVNArlFJ9Si9rx3ujKv!r
zzQi7HC}o(~exhF?=cWu|BIKP%ELc-1kDVrnIjz`5%i?jyku{QA;pK83<d0UpOkN2K
z5YywYbj@{ucY@kqTgrzVzn@ccmBP7pBSLcgdU!ub@>c7NaZb%ue;W0NEQ7=|iyrd?
zWbA<m_55&;hEFY}z+*}w(8sCiIWWS);NZKD$Cf`g`10!LN=9uQ?@H>6(%bmzI5CI1
zQU(sj^pkQIH__*jg<?hz<KFw<N=3@VMH~x#1Z`lt$RxWTK_0JGwLFs@PT%~u;_9WH
zOkr`%TS$D6JN})!F@)kp@$9cuI%~?Q6-ikVAtuYz^E0(W&c}rq{{YAm4y4pUWJv%3
N002ovPDHLkV1n`yQ)K`E

diff --git a/src/template-pagina/sub-templates/douglas-header.html b/src/template-pagina/sub-templates/douglas-header.html
index c85a597..35943d0 100644
--- a/src/template-pagina/sub-templates/douglas-header.html
+++ b/src/template-pagina/sub-templates/douglas-header.html
@@ -1,11 +1,13 @@
 <header class="page-header">
 	<div class="container">
 		<div class="page-header__wrapper">
-			<button class="page-header__menu-button">
-				<i class="sprite sprite-menu-icon"></i>
-			</button>
+			<div class="menu">
+				<button class="menu__button">
+					<i class="sprite sprite-menu-icon"></i>
+				</button>
 
-			<nav class="main-menu"></nav>
+				<nav class="main-menu"></nav>
+			</div>
 
 			<a href="/">
 				<img
@@ -31,4 +33,10 @@
 			</div>
 		</div>
 	</div>
+
+	<div class="page-header__search-box">
+		<div class="container">
+			<vtex.cmc:fullTextSearchBox />
+		</div>
+	</div>
 </header>