From 234040b059dcd884804b748729b8fb1cc866e573 Mon Sep 17 00:00:00 2001
From: ManuelaLuanaSchumackerTavares <manuelaluana.dev@gmail.com>
Date: Mon, 5 Dec 2022 18:19:54 -0300
Subject: [PATCH] feat(home): Cria o header mobile

---
 src/arquivos/sass/partials/_header.scss       | 109 ++--
 src/arquivos/sass/partials/_menu.scss         | 512 +-----------------
 src/arquivos/sass/utils/_variaveis.scss       |   3 +-
 src/arquivos/sprite/user-icon.png             | Bin 772 -> 833 bytes
 .../sub-templates/manuelaluana-header.html    |  17 +-
 5 files changed, 101 insertions(+), 540 deletions(-)

diff --git a/src/arquivos/sass/partials/_header.scss b/src/arquivos/sass/partials/_header.scss
index 116411d..79ab416 100644
--- a/src/arquivos/sass/partials/_header.scss
+++ b/src/arquivos/sass/partials/_header.scss
@@ -2,15 +2,64 @@
 	padding: 28px 0;
 	background: $color-black;
 
+	@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;
+			color: $color-white;
+			font-size: 10px;
+			line-height: 12px;
+			outline: 0;
+		}
+
+		.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 $color-white;
 
-			legend,
-			label,
-			select {
+			@include mq(lg, max) {
 				display: none;
 			}
 
-			.fulltext-search-box {
-				flex: 1;
-				height: 23px;
-				padding: 0;
-				border: 0;
-				background: transparent;
-				color: $color-white;
-				font-size: 10px;
-				line-height: 12px;
-				outline: 0;
-			}
-
-			.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 {
+				padding: 8px 0;
+				border-bottom: 1px solid $color-white;
 			}
 		}
 
@@ -70,6 +92,16 @@
 				height: 19px;
 				margin: 0 24px;
 				background: $color-white;
+
+				@include mq(lg, max) {
+					margin: 0 16px;
+				}
+			}
+
+			&::before {
+				@include mq(lg, max) {
+					display: none;
+				}
 			}
 		}
 
@@ -113,4 +145,17 @@
 			}
 		}
 	}
+
+	&__search-box {
+		margin-top: 18px;
+		border-top: 1px solid $color-grey;
+
+		@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 965c94c..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: $color-white;
-		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 $color-black;
-					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: $color-white;
-			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: $color-white;
-			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 $color-black;
-						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 6aab6e7..91c2fd8 100644
--- a/src/arquivos/sass/utils/_variaveis.scss
+++ b/src/arquivos/sass/utils/_variaveis.scss
@@ -13,6 +13,7 @@ $font-height: 1.5;
 $color-black: #000;
 $color-white: #fff;
 $color-blue: #00c8ff;
+$color-grey: #333333;
 
 // Grid breakpoints
 
@@ -38,5 +39,5 @@ $z-index: (
 	// avise-me: 5,
 	// scroll-top: 7,
 	// header-fixo: 10,
-	// popup-user: 15,,,,,
+	// popup-user: 15,,,,,,
 ) !default;
diff --git a/src/arquivos/sprite/user-icon.png b/src/arquivos/sprite/user-icon.png
index 554cfbdf33b2914a4dd4117222ddd454d7380fe6..95ee471510ab492de0cd5a1bc726912100372c19 100644
GIT binary patch
delta 794
zcmV+#1LgdL2Ehg)iBL{Q4GJ0x0000DNk~Le0000e0000m2nGNE0AqVNn~@<kf7VGv
zK~#7F?OB19n=lMjIzcw5J3;9LNhe4)ARAma$Ze2z0=fa+fOLXhC%~N`Y@k|2PJ|DL
zZ7_GQ@BVvw1P9q4$(AJpFae0THu7MkGE(CWHMiwP6f6xU_GsjSet3jPtRN6<k<v&e
znj0h9$di#Z%hpk)|39x*D-9{pf8)xWEZXxNS^3~R{|i!r-Fh9Yk64e6;%6<6kODlA
zw44gmwe$7j^I|as4}xG0fgsBX{RfyE*oKXNfC%uMv{o!(Zivn+h=iDnwXe=Q@Q0l@
zPY@5Qt9%u_2s#U*fp|2c&-XqGAr_ni!7sNo!C?G11f^>f#6#I1W>5a(f1}_<&~!!w
z8+VWhD86c6g%B6p5RpMVtgiM|2qAdpEA0qd2n6fcSo*_PFNEMv@p}j1$OrnG4`M&Q
zV0bo@J|`qMMdX8P>?W<jnNTRn$|0#no^_Me0s;|JlaSTOO-eM=q(2+^4edgpeRdDs
zx<niK#33s!*fP?R_fTPqe=ORA=;01g`fmeE!VLI@2hKzrErgAc9kx|oCN0JmFOx11
zY*%m<GvVo3p;u!>pbsHNpg6b>?4x%2D5HsD_sqpbfe{m)-CXqaSEKJ44vtTHYM(se
zaXbQ0%*^|g)&ol9$`dA7iNd0N2T*0lOXlXQLy8nPxIpY;<LvOcfBR4JO)P4BiSxW0
zS%uxjlmWZYV%ebDPf{i%$4&|buLLMgF(_eG+&<;RU~XJbAS6KzuLqj1>aB2}3L<C|
z$mR33VJN;fL{Re$E$=P7FqnhlTkXa{<gk;ruo)nR&$rv+UY1d$v?`N2VgG(yq1@F*
zh$44D3P<iVHr?7|aGS=JIQ*50#<}ijtG<q)Jq0+x_(75Vy3`19p;+wKry*z~-;I28
ztG>~)6Wh9j-o`B<r-De(ZgD0tqy~>dg6d*6{Rbl-;bs{H!<N=?v$SSXR6FZM>f<Hw
Y7e7VT5HeXAg#Z8m07*qoM6N<$f{s&X8~^|S

delta 733
zcmV<30wVpv280G7iBL{Q4GJ0x0000DNk~Le0000a0000h2nGNE01#FxO_3orf0;={
zK~#7F%~*kz+aL^;yFk4`*`VGabb@4q-UinVl1|X;1nvgy2FV6VC$MjV<R(zjL)<CE
zXOM%F{`Yu##u9uBfrJ4j01<1~9$owGT8D4gbKh6E72ISi*N&J*H-%WGQFaq-oLGyl
zoofefgoc|HI^V0R+CXVIG7r($e=kOK7kIvu7D_`*K(fxzH_`@5BJz$=*jZt>gi_$0
zL)d~6WW%;?j{XP8gJrn`Jr2<rqsS#xM}uqdm!-*3P7;b@<^+12#8{tF%DEo82C9#^
z1tAr*gp%h^0xv0rBq4X~_u_F1q0eHh<nrZusAt)L9)@Ms4$URBV`)K;e-+CqN5(Ls
z6krv0&0ML23bLa%eNeiXCAsq8Yw@+;GW0h>f1U~weTf>d87f2An@>Vd<sEIsXq=!W
zGu%bnn1Z$EXCi3f?RcR6FVWFa7F>9>m_~~kg<K4+hiHPDzL>p5v0;Tu@YpY>^Gv&p
z`igsq<3a{$ZVCGuZ%_h)e~7&HbeK`bvTYaHP1|kg55ky;IxgOcw~qUolyUGzhnLvm
z$h9Yv*mhvtK+X&q#6-wDKdvG24zU(5J>Q*?ipY?`0w-))CAlS@FXukIco3bBaAQRC
zFXf$U4|jryua@c|!~HwBA71ZnL?~>(9`1*5cdKQ^IOWb&8ufp9e+>$rnRS~d@R8+-
z2=)B1LdCC^Qs6nmMWByM({M0am>KBv<u;x>yj<gD>gWQw5~nu$TuEb5I*L=rkvY_r
zFfibYE&8cx2F5&y_6$Dudhi9<DNG7J7Hb}Z{&qB?#UQ&U*M5%PYB`s+IGp*f#c0w_
zmaypS7HSLr>IU+6Gi2~$@a!KdZO05$HMJlamLzP~uuMHalYGhfxe((Y+>8#7mob}a
P00000NkvXXu0mjfu_Rab

diff --git a/src/template-pagina/sub-templates/manuelaluana-header.html b/src/template-pagina/sub-templates/manuelaluana-header.html
index 1805d8f..f65dbd6 100644
--- a/src/template-pagina/sub-templates/manuelaluana-header.html
+++ b/src/template-pagina/sub-templates/manuelaluana-header.html
@@ -1,14 +1,22 @@
 <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-logo-manuelaluana.png" alt="Logo M3 Manuela Luana"/>
 			</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 +29,9 @@
 			</div>
 		</div>
 	</div>
+	<div class="page-header__search-box">
+		<div class="container">
+			<vtex.cmc:fullTextSearchBox/>
+		</div>
+	</div>
 </header>