From d7a0477a0c8d4faba176690067f65991dc67b281 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cain=C3=A3=20Milech?= <cainamilech15@hotmail.com>
Date: Mon, 5 Dec 2022 22:35:44 -0300
Subject: [PATCH] feat: adiciona header mobile

---
 src/arquivos/sass/partials/_header.scss       | 161 +++++-
 src/arquivos/sass/partials/_menu.scss         | 512 +-----------------
 src/arquivos/sass/utils/_variaveis.scss       |   2 +
 src/arquivos/sprite/menu-icon.png             | Bin 0 -> 737 bytes
 src/arquivos/sprite/user-icon.png             | Bin 770 -> 822 bytes
 .../sub-templates/caina-header.html           |  24 +-
 6 files changed, 160 insertions(+), 539 deletions(-)
 create mode 100644 src/arquivos/sprite/menu-icon.png

diff --git a/src/arquivos/sass/partials/_header.scss b/src/arquivos/sass/partials/_header.scss
index fff2d11..15e4e96 100644
--- a/src/arquivos/sass/partials/_header.scss
+++ b/src/arquivos/sass/partials/_header.scss
@@ -1,15 +1,67 @@
 .page-header {
+	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;
+			background: transparent;
+			outline: 0;
+			color: $white-500;
+			font-size: 10px;
+			line-height: 12px;
+		}
+
+		.btn-buscar {
+			width: 23px;
+			height: 23px;
+			padding: 0;
+			border: 0;
+			outline: 0;
+			font-size: 0;
+			background-color: transparent;
+
+			/*quando ja tem estrutuura, e temos que substituir*/
+			@extend .sprite;
+			@extend .sprite-search-icon;
+		}
 	}
 
 	.user-items {
@@ -17,46 +69,95 @@
 		align-items: center;
 		justify-content: flex-end;
 
-		.busca {
+		&__search-box {
 			flex: 1; /*utilizar todo espaço empurrando os irmaos...*/
-			display: flex;
-			align-items: center;
 			max-width: 212px; /*...mas no max ate 212*/
-			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;
-				background: transparent;
-				outline: 0;
-				color: $white-500;
-				font-size: 10px;
-				line-height: 12px;
+			.busca {
+				padding: 8px 0;
+				border-bottom: 1px solid $white-500;
+			}
+		}
+
+		&__account-link {
+			display: flex;
+			align-items: center;
+
+			&::before,
+			&::after {
+				content: "";
+				width: 1px;
+				height: 19px;
+				margin: 0 24px;
+				background: $white-500;
+
+				@include mq(lg, max) {
+					margin: 16px;
+				}
 			}
 
-			.btn-buscar {
-				width: 23px;
-				height: 23px;
-				padding: 0;
-				border: 0;
-				outline: 0;
-				font-size: 0;
-				background-color: transparent;
+			&::before {
+				@include mq(lg, max) {
+					display: none;
+				}
+			}
+		}
 
-				/*quando ja tem estrutuura, e temos que substituir*/
-				@extend .sprite;
-				@extend .sprite-search-icon;
+		&__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%;
+				font-style: normal;
+				font-weight: 700;
+				font-size: 9px;
+				line-height: 11px;
+				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 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 06cce25..1992c4c 100644
--- a/src/arquivos/sass/utils/_variaveis.scss
+++ b/src/arquivos/sass/utils/_variaveis.scss
@@ -8,6 +8,8 @@ $font-height: 1.5;
 // colors
 $black-500: #000;
 $white-500: #fff;
+$blue-500: #00c8ff;
+$gray-500: #333;
 
 // universal
 
diff --git a/src/arquivos/sprite/menu-icon.png b/src/arquivos/sprite/menu-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..6a2898e722fb15bbac3dc01f14780a166a57b0fe
GIT binary patch
literal 737
zcmV<70v`Q|P)<h;3K|Lk000e1NJLTq002M$002A)1^@s6)``4i00009a7bBm000&x
z000&x0ZCFM@Bjb+0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0(MD6K~#7F?U{jb
z+b|48p<V~@2303$IziM4;!e<Zg1QqlnIO&tRwhU?ft3xifw@7nfdZJ&9V5|{C`*^q
z>AyRiZHfdbkRS*;sjBK15p7vkv@8tEb;1TX@RyX9N%@JEH}ft>1N<Yq9F|7Oazg+B
z0001Bp(Mx#kqsgnL^cQj000007Dz%PGo$R%kYs~2GBe9AkIB&3%qhE^!~k>2E|Coa
z00000ESk<_h?5&R+l!P*l9aJ^ow8H3>hf>X)rVV$%TfxAua8~|beL6^*B*6uT6gDZ
ze+swmwU%uHedL;Px@8AfkEhLV)tfb+eWw1bL;+i|2-L{}&vKS$Pr31w-Ev<A_w_;(
z6Jr43KTF|zAXcXEJ-{=+P)_}jrToA;zjwLaxx}Qy1xu#><U?+PWX24gkEGNoS%XhX
zi~;V*&P>ZcbrZ_8&KT@f*T(0!V-jNkdHH*mzn*6@Q>J5yr@A3F#k-<dml#@B)Gn~<
z&L;Lo=#lJZxULIyaPqt8Xe&nAd*mX}<|o+@I+-g(89*a|h`S2p<z<jv*GuBpUp?{?
z=+CI$jcfEViH!on6WK6Ths0xK=yAv>ha5z>&6fMRBI^pHhs7b6qB+_9V67WeN_KCU
zl0W*n3)Bg@QoV<?LTa=DG%m{vOV|@vFcI;65RNNkELWZ?GM)?lQ|28Sq3UtAR?rX^
z5FS<On)+WYU-Dpl<)-6wc|={|Qu}Pq<d*D&<hm-wATsOU$cAnC{)2|#oaM7d`CiM@
zM)@H!7uY*>>s;W=iLtCy|H1Pt)jXl4zY3fsM*nN<qtUP|`+=+yGxbp#fSL0Kr<AzT
T0{G(r00000NkvXXu0mjf7!6B>

literal 0
HcmV?d00001

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/caina-header.html b/src/template-pagina/sub-templates/caina-header.html
index 5a03a45..c5647ac 100644
--- a/src/template-pagina/sub-templates/caina-header.html
+++ b/src/template-pagina/sub-templates/caina-header.html
@@ -1,24 +1,40 @@
 <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-caina-logo.png" alt="Logo M3 Cainã" />
 			</a>
 
 			<div class="user-items">
-				<vtex.cmc:fullTextSearchBox />
+				<div class="user-items__search-box">
+					<vtex.cmc:fullTextSearchBox />
+				</div>
 
-				<a href="/account">
+
+				<a class="user-items__account-link" href="/account">
 					<i class="sprite sprite-user-icon"></i>
 				</a>
 
-				<button>
+				<button class="user-items__minicart-button">
 					<i class="sprite sprite-bag-icon"></i>
 					<vtex.cmc:AmountItemsInCart />
 				</button>
 			</div>
 		</div>
 	</div>
+	<div class="page-header__search-box">
+		<div class="container">
+			<vtex.cmc:fullTextSearchBox />
+		</div>
+	</div>
 </header>