From 9d8a19228dd61450b757295726f6878da51b3e05 Mon Sep 17 00:00:00 2001
From: Sabrina Miranda <sabrina.miranda1@bol.com.br>
Date: Sat, 10 Dec 2022 00:14:46 -0300
Subject: [PATCH] feat: Cria o header mobile

---
 src/arquivos/sass/partials/_header.scss       | 107 ++--
 src/arquivos/sass/partials/_menu.scss         | 512 +-----------------
 src/arquivos/sass/utils/_variaveis.scss       |   1 +
 src/arquivos/sprite/user-icon.png             | Bin 762 -> 829 bytes
 .../sub-templates/sabrinamiranda-header.html  |  19 +-
 5 files changed, 100 insertions(+), 539 deletions(-)

diff --git a/src/arquivos/sass/partials/_header.scss b/src/arquivos/sass/partials/_header.scss
index ca73ee0..798a37b 100644
--- a/src/arquivos/sass/partials/_header.scss
+++ b/src/arquivos/sass/partials/_header.scss
@@ -2,15 +2,64 @@
 	padding: 28px 0;
 	background: $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;
+
+		@include  mq(lg, max) {
+			max-width: 66px;
+		}
+	}
+
+	.busca {
+		display: flex;
+		align-items: center;
+		margin: 0;
+
+		legend,
+		label,
+		select {
+			display: none;
+		}
+
+		.fulltext-search-box {
+			flex: 1;
+			height: 23px;
+			padding: 0;
+			border: 0;
+			outline: 0;
+			font-size: 10px;
+			line-height: 12px;
+			color: $white-500;
+			background: transparent;
+		}
+
+		.btn-buscar {
+			width: 23px;
+			height: 23px;
+			padding: 0;
+			border: 0;
+			outline: 0;
+			font-size: 0;
+			background-color: transparent;
+
+			@extend .sprite;
+			@extend .sprite-search-icon;
+		}
 	}
 
 	.user-items {
@@ -18,44 +67,17 @@
 		align-items: center;
 		justify-content: flex-end;
 
-		.busca {
+		&__search-box {
 			flex: 1;
-			display: flex;
-			align-items: center;
 			max-width: 212px;
-			margin: 0;
-			padding: 8px 0;
-			border-bottom: 1px solid $white-500;
 
-			legend,
-			label,
-			select {
+			@include  mq(lg, max) {
 				display: none;
 			}
 
-			.fulltext-search-box {
-				flex: 1;
-				height: 23px;
-				padding: 0;
-				border: 0;
-				outline: 0;
-				font-size: 10px;
-				line-height: 12px;
-				color: $white-500;
-				background: transparent;
-			}
-
-			.btn-buscar {
-				width: 23px;
-				height: 23px;
-				padding: 0;
-				border: 0;
-				outline: 0;
-				font-size: 0;
-				background-color: transparent;
-
-				@extend .sprite;
-				@extend .sprite-search-icon;
+			.busca {
+				border-bottom: 1px solid $white-500;
+				padding: 8px 0;
 			}
 		}
 
@@ -70,6 +92,16 @@
 				height: 19px;
 				margin: 0 24px;
 				background: $white-500;
+
+				@include  mq(lg, max) {
+					margin: 0 16px;
+				}
+			}
+
+			&::before {
+				@include  mq(lg, max) {
+					display: none;
+				}
 			}
 		}
 
@@ -112,6 +144,17 @@
 				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 2d9c88c..577cd86 100644
--- a/src/arquivos/sass/partials/_menu.scss
+++ b/src/arquivos/sass/partials/_menu.scss
@@ -1,514 +1,16 @@
-/***************************************************************/
-/**-- Menu    ------------------------------********************/
-/*-------------------------------------------------------------*/
-
-.menu-principal {
-	position: initial;
-
-	@include mq(lg, max) {
-		background-color: #fff;
-		box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05);
-		bottom: 0;
-		left: 0;
-		margin-left: -100%;
-		max-width: 375px;
-		overflow: hidden;
-		opacity: 0;
+.menu {
+	&__button {
 		padding: 0;
-		position: fixed;
-		top: 0;
-		transition: all 0.45s ease-in-out;
-		visibility: hidden;
-		width: 100%;
-		z-index: map-get($z-index, menu);
-	}
-
-	@include mq_range(lg, xl) {
-		padding-right: 0;
-	}
-
-	&.mobile-open {
-		margin-left: 0;
-		opacity: 1;
-		visibility: visible;
-	}
-
-	.header-menu-mobile {
-		display: none;
-		border-bottom: 1px solid #eee;
-		padding: 22px 15px 0;
-		margin: 0 -15px;
-
-		@include mq(lg, max) {
-			display: block;
-		}
-
-		p {
-			display: inline-block;
-			font-size: 12px;
-			letter-spacing: 0.5px;
-			margin: 0;
-			text-transform: uppercase;
-			padding: 0 16px;
-		}
-
-		#close-menu-button {
-			background: transparent;
-			border: none;
-			cursor: pointer;
-			display: inline-block;
-			right: 16px;
-			outline: none;
-			position: absolute;
-			top: 17px;
-
-			&::before {
-				border-left: 1px solid #eee;
-				content: "";
-				display: block;
-				height: 36px;
-				position: absolute;
-				left: -20px;
-				top: -6px;
-			}
-
-			span {
-				display: block;
-				padding: 12px;
-				position: relative;
-
-				&::before,
-				&::after {
-					border: 1px solid #142032;
-					content: "";
-					display: block;
-					left: 0;
-					position: absolute;
-					top: 12px;
-					width: 24px;
-				}
-
-				&::before {
-					transform: rotate(45deg);
-				}
-
-				&::after {
-					transform: rotate(-45deg);
-				}
-			}
-		}
-
-		.busca {
-			background-color: #eee;
-			border-top: 1px solid #e5e5e5;
-			border-bottom: none;
-			max-width: 100%;
-			margin-top: 22px;
-			padding: 10px 0;
-		}
-	}
-
-	.itens {
-		font-size: 14px;
-		margin: 0;
-
-		@include mq(lg, max) {
-			bottom: 64px;
-			left: 0;
-			overflow-y: auto;
-			overflow-x: hidden;
-			position: absolute;
-			top: 117px;
-			width: 100%;
-		}
-
-		&::-webkit-scrollbar {
-			width: 6px;
-		}
-
-		&::-webkit-scrollbar-track {
-			background-color: hsla(0, 0%, 90%, 1);
-		}
-
-		&::-webkit-scrollbar-thumb {
-			background-color: hsl(0, 0%, 77%);
-		}
-
-		&::-webkit-scrollbar-thumb:hover {
-			background-color: darken(hsl(0, 0%, 77%), 10);
-		}
-
-		> li {
-			display: inline-block;
-			line-height: 18px;
-			text-align: left;
-			vertical-align: top;
-
-			@include mq(lg, max) {
-				align-items: center;
-				display: flex;
-				justify-content: space-between;
-				padding: 0 24px;
-				border-bottom: 1px solid #eee;
-
-				a {
-					font-size: 16px;
-					padding: 17px 0px;
-					width: 100%;
-				}
-			}
-
-			&:hover {
-				> a::after {
-					@include mq(lg, min) {
-						border-bottom-color: #f71963;
-						border-width: 4px;
-					}
-				}
-			}
-
-			&:not(:last-child) {
-				@include mq(lg, min) {
-					border-right: 1px solid #000;
-					margin-right: 24px;
-					padding-right: 24px;
-				}
-
-				@include mq_range(lg, xl) {
-					margin-right: 16px;
-					padding-right: 16px;
-				}
-			}
-
-			> a {
-				display: inline-block;
-				position: relative;
-
-				&:after {
-					@include mq(lg, min) {
-						bottom: 0;
-						border-bottom: 1px solid transparent;
-						content: "";
-						left: 0;
-						position: absolute;
-						right: 0;
-						transition: all 0.15s ease-in-out;
-						width: 100%;
-					}
-				}
-			}
-
-			.ver-departamento {
-				background-color: transparent;
-				border: none;
-				cursor: pointer;
-				display: inline-block;
-				text-indent: -9999px;
-				overflow: hidden;
-				font-size: 0;
-				outline: none;
-				opacity: 0.75;
-
-				&:before {
-					@include pseudo(block, relative);
-					@extend .sprite;
-					@extend .sprite-arrow-right-gray;
-				}
-
-				@include mq(lg, min) {
-					display: none;
-				}
-			}
-		}
-
-		a {
-			color: #142032;
-			display: inline-block;
-		}
-
-		.highlight {
-			color: #f71963;
-			font-weight: 700;
-
-			&::before {
-				content: "";
-				left: -20.5px;
-				position: absolute;
-				top: -2px;
-				@extend .sprite;
-				@extend .sprite-pinrinpinpin;
-
-				@include mq(lg, max) {
-					top: 13px;
-				}
-			}
-		}
-	}
-
-	.footer-menu-mobile {
-		background-color: #f71963;
-		bottom: 0;
-		left: 0;
-		padding: 17.5px 15px;
-		position: absolute;
-		right: 0;
-		text-align: center;
+		border: 0;
+		outline: 0;
+		background: transparent;
 
 		@include mq(lg, min) {
 			display: none;
 		}
-
-		a {
-			color: #fff;
-			font-size: 12px;
-			text-transform: uppercase;
-
-			i {
-				margin-right: 18px;
-			}
-		}
 	}
 
-	.m3-dropdown {
-		&:hover {
-			.m3-dropdown-menu {
-				@include mq(lg, min) {
-					max-height: 1000px;
-					opacity: 1;
-					top: 100%;
-					visibility: visible;
-				}
-
-				&::before {
-					visibility: visible;
-				}
-			}
-		}
-
-		.m3-dropdown-menu {
-			background-color: #fff;
-			max-height: 0;
-			opacity: 0;
-			transition: all 0.4s ease-in-out;
-			visibility: hidden;
-			z-index: map-get($z-index, menu);
-			position: absolute;
-			left: 0;
-			right: 0;
-			width: 100%;
-
-			@include mq(lg, max) {
-				border-bottom: 1px solid #eee;
-				bottom: 64px;
-				margin-left: 100%;
-				max-height: initial;
-				overflow-y: auto;
-				top: 0px;
-				transition: all 0.4s ease-in-out, top 0s ease-in-out;
-			}
-
-			@include mq(lg, min) {
-				background: rgba(255, 255, 255, 0.95);
-				border-top: 1px solid hsla(0, 0%, 90%, 1);
-				box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.02);
-				padding: 45px 0px 37px;
-				top: 70%;
-				transition: all 0.2s ease-in-out;
-			}
-
-			&::before {
-				content: "";
-				position: absolute;
-				left: 0;
-				right: 0;
-				top: -44px;
-				padding: 22px;
-				visibility: hidden;
-
-				@include mq(lg, max) {
-					display: none;
-				}
-			}
-
-			&::-webkit-scrollbar {
-				width: 6px;
-			}
-
-			&::-webkit-scrollbar-track {
-				background-color: hsla(0, 0%, 90%, 1);
-			}
-
-			&::-webkit-scrollbar-thumb {
-				background-color: hsl(0, 0%, 77%);
-			}
-
-			&::-webkit-scrollbar-thumb:hover {
-				background-color: darken(hsl(0, 0%, 77%), 10);
-			}
-
-			.btn-voltar {
-				border-bottom: 1px solid #eee;
-				padding: 7px 24px;
-
-				@include mq(lg, min) {
-					display: none;
-				}
-
-				button {
-					background-color: transparent;
-					border: none;
-					cursor: pointer;
-					font-size: 14px;
-					font-weight: 700;
-					outline: none;
-					padding: 0;
-					text-transform: uppercase;
-
-					i {
-						transform: scale(0.5);
-					}
-
-					span {
-						display: inline-block;
-						margin-left: 4px;
-						padding-top: 3px;
-					}
-				}
-			}
-
-			> div {
-				@include mq(lg, min) {
-					align-items: center;
-					display: flex;
-					justify-content: flex-start;
-				}
-
-				.links-menu {
-					min-width: 38%;
-
-					@include mq(lg, max) {
-						padding: 0px 9px 36px;
-					}
-
-					@include mq(lg, min) {
-						border-left: 1px solid #000;
-						padding-left: 16px;
-					}
-
-					.link-departamento {
-						@include mq(lg, max) {
-							padding-top: 36px;
-						}
-					}
-				}
-
-				.elementos-menu {
-					max-width: 438px;
-					width: 100%;
-
-					@include mq(lg, max) {
-						display: none;
-					}
-
-					img {
-						border-bottom: 5px solid #151728;
-					}
-				}
-			}
-
-			ul {
-				display: inline-block;
-
-				&:hover li {
-					opacity: 0.75;
-				}
-
-				li:hover {
-					opacity: 1;
-				}
-			}
-
-			li {
-				transition: all 0.1s ease-in-out;
-
-				&:not(:last-child) {
-					@include mq(lg, min) {
-						margin-bottom: 16px;
-					}
-				}
-
-				@include mq(lg, max) {
-					margin: 0;
-				}
-
-				&.link-departamento {
-					font-size: 24px;
-					font-weight: 700;
-					margin-bottom: 24px;
-
-					@include mq(lg, max) {
-						margin-bottom: 16px;
-						text-transform: lowercase;
-
-						a {
-							border-bottom: 4px solid #f71963;
-							font-size: 18px;
-							padding: 0;
-						}
-					}
-				}
-
-				&.ver-todos {
-					a {
-						color: #f71963;
-						font-weight: 700;
-
-						@include mq(lg, max) {
-							font-size: 16px;
-						}
-					}
-
-					i {
-						transform: scale(0.325);
-					}
-				}
-			}
-
-			@include mq(lg, max) {
-				a {
-					font-size: 14px;
-					padding: 8px 0;
-					width: auto;
-				}
-			}
-		}
-	}
-
-	.has-sub-menu-open {
-		@include mq(lg, max) {
-			position: initial;
-			transition: position 0.2s ease-in-out;
-		}
-
-		.m3-dropdown-menu {
-			@include mq(lg, max) {
-				top: 117px;
-			}
-		}
-	}
-
-	.sub-menu-open {
-		.m3-dropdown-menu {
-			@include mq(lg, max) {
-				margin-left: 0;
-				opacity: 1;
-				visibility: visible;
-			}
-		}
-
-		> a:before {
-			opacity: 1;
-			transform: rotate(90deg) scale(0.5);
-		}
+	.main-menu {
+		display: none;
 	}
 }
diff --git a/src/arquivos/sass/utils/_variaveis.scss b/src/arquivos/sass/utils/_variaveis.scss
index ba6a8df..022f6a2 100644
--- a/src/arquivos/sass/utils/_variaveis.scss
+++ b/src/arquivos/sass/utils/_variaveis.scss
@@ -8,6 +8,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 013c596408c4c9a28bdfdea7f14c71ed48807125..98089add85c5a605f1351906d6c220f0dc567986 100644
GIT binary patch
delta 790
zcmV+x1L^$w1-%9#iBL{Q4GJ0x0000DNk~Le0000e0000m2nGNE0AqVNn~@<kf6_@r
zK~#7F?U{jfn=lZDk4``*s77!n2%VtWplr}=5O3gg0%rra6W~tZbOOi(W`nEFoWel`
zk%UD2`trS}hrv4WbCQme09XJb=DOVJQt47-PtDg#T@<Vh3%l3ljBeaRAQ^bV9y#c;
z5tmzCo^)yWoaz)KQ~K{qmSqj3f5g(21$op`FXt|n^-quz?$(!^*@Rha6xTIuAq9LR
z={e<TYsTx@<-tM(mO@|&o{;B+{T;*xyRdNq0^l)e_zAHQT~t9JVl39KHXpzpGj19P
z=MNv1tAUfi(S&%0aN3DBC-L!M3|i0ns|)nzzY!?AW=W7$=7;M$*-4;oe~bjS<C_HV
ziH{A$Mg;0J1QHTUea7H#KGGYZ08iM)43A%~c0K}+;`c51^KGK7c*t%>|7_+ZO@mZm
zmz?_MgE<b9))G=8vl<quX6lZU)jfC;vL+#~Q8y`ZnbIekM6@o+`M<9)T$ePueCCjq
z7WRzv<ZD!zB8zqqTD~HbfBq|AP4o@F^Nly++9fvXa?7GO(qnvnAX`WU3kVwUy6&T}
ztL4MR5>}16j^dzmu;w=EQ5*Z<?#JPt3tAfX9`M*rtVc_GCv@Gz;fg1;Q(=SwkMj}W
zBGzV<PZ&{GK45~GC_HN0fI19%NuTU&qHu-Sh5a7RxchhVNenf<f5m=YFIM4jG8Mqy
z>My)8I7~>kQ8MM&pvb%_VKqVX39bjDMUlW5TN<%3yBF$x;l30SXcEYea6Opyb4vmn
zKDoJ;Fav$I-i+fQa@Z+hWze2A?dP(L8keL*?xJ>Re;-$aw;Fa?uT3a&17xtpz;`q|
zf--KC#!Y>ts-#mgY+FP6K)dj?DpND}q{-FrQEo0t6qg+4cg4u|hb|A}Rp0Eg6T8%$
zGUprk_tVxA%%?M2svfnd<5Wejbuqi1L@Ve*0Ugac*hT}rr=MBW<(u9r>*F=}3;dt!
UhZTNm8~^|S07*qoM6N<$g0-1;y8r+H

delta 723
zcmV;^0xbQ#2KogdiBL{Q4GJ0x0000DNk~Le0000a0000h2nGNE01#FxO_3ore~(E-
zK~#7F%~*|f8Zivkb%Gng8<Y)togi#bM#u)24N50~4cZN8CLo#MoC#n9#foJjjKS8O
zFUj|wpTWr1XW7;d03(2it!wwL{dH}?cMLqXf{%hz_RF;c<}u7p%qi$2r90Qwq?j9h
z-bXS$%mG#?ci-KR?eP34JE#qze}H;ZAa9~ME!09}olY^Y6Z4i(3+P|Y+noU=_?{6q
zCGy{(42Jth(Bql=u0*($(1QCX&?C$-CBj)k(FHz&9>*(djU!Y6s!e<ZAr(pp$sJDh
zC0T1_2{lb~6bp?Zw20Q4Mu=hK#T78z7roF@Lc#z106p%wALBC8h(bW8f0(zJD|Apo
zcF=|o3Kt=`LT$K3AH;6&3*>ttzk)e{=gC)}N-5ZyzlEI2I*mq{T|XU};URj)bXhHb
zr*V3TfhdjtbkE(wT;RlOi+QYZL{g@;5GiPB$80TnIphk0VzL;yh%GrmdSx_L-9mgX
zda?WL&e@Wu`vx^2h{&>Mf55Vwy2Z<yZ3Sb1-Vw$`2pi44xN_eHUT2Y;9IP?mC3ZNW
zlwo4K#JYi;Nll1}kagBrv8EChJ0yr1DL6#O(qYXyDot*Q=f}AZKdi)HHYChIOzL0C
znrjcA1aZGMln)smA5(MH!l`y6LgD#Y_&iwdTbVJAskv(5l(T=ye==xFMNtc<;4BH<
zVL^<l4b~Y70SoMnF?NhFGuZj=V%_1#2fPd&Lrt%ZK339Nl-|an<G>u+Moci^|HGl&
z#U$4J4?bOef%h8Af=|GXK`HqA(DEA8zJqryspwAg{<yZjS=I7RwwR9mQ*kqBXH!`8
zc}r+vx1~o&ySCshDN5e>UoM?h<<x>?IFf6`EQq7j;1wt3KRjG&Q$GLz002ovPDHLk
FV1hGiP8|RM

diff --git a/src/template-pagina/sub-templates/sabrinamiranda-header.html b/src/template-pagina/sub-templates/sabrinamiranda-header.html
index 3c1528e..e9dd432 100644
--- a/src/template-pagina/sub-templates/sabrinamiranda-header.html
+++ b/src/template-pagina/sub-templates/sabrinamiranda-header.html
@@ -1,14 +1,23 @@
 <header class="page-header">
 	<div class="container">
 		<div class="page-header__wrapper">
-			<nav></nav>
+			<div class="menu">
+				<button class="menu__button">
+					<i class="sprite sprite-menu-icon"></i>
+				</button>
+				
+				<nav class="main-menu"></nav>
+			</div>
+
 
 			<a href="/">
 				<img class="page-header__logo" src="/arquivos/m3-sabrinamiranda-logo.png" alt="Logo M3 Sabrina Miranda" />
 			</a>
 
 			<div class="user-items">
-				<vtex.cmc:fullTextSearchBox />
+				<div class="user-items__search-box">
+					<vtex.cmc:fullTextSearchBox />
+				</div>
 
 				<a class="user-items__account-link" href="/account">
 					<i class="sprite sprite-user-icon"></i>
@@ -21,4 +30,10 @@
 			</div>
 		</div>
 	</div>
+
+	<div class="page-header__search-box">
+		<div class="container">
+			<vtex.cmc:fullTextSearchBox />
+		</div>
+	</div>
 </header>