feat: criação do menu no mobile

src/arquivos/sass/main.scss

@@ -18,6 +18,7 @@
 
 @import "./partials/header";
 @import "./partials/menu";
+@import "./partials/search";
 @import "./partials/barraDeVantagens";
 @import "./partials/footer";
 @import "./partials/breadcrumb";

src/arquivos/sass/partials/_header.scss

@@ -25,41 +25,6 @@
 		}
 	}
 
-	.busca {
-		display: flex;
-		align-items: center;
-		margin: 0;
-
-		legend,
-		label,
-		select {
-			display: none;
-		}
-		.fulltext-search-box {
-			flex: 1;
-			height: 23px;
-			outline: 0;
-			border: 0;
-			padding: 0;
-			line-height: 12px;
-			font-size: 10px;
-			color: $white;
-			background-color: 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 {
 		display: flex;
 		align-items: center;

src/arquivos/sass/partials/_menu.scss

@@ -12,20 +12,84 @@
 		}
 	}
 
+	.menu-header {
+		&__top-wrapper {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			padding: 16px;
+		}
+
+		&__text {
+			display: flex;
+			align-items: center;
+			line-height: 15px;
+			font-size: 12px;
+			color: $gray-200;
+
+			i {
+				margin-right: 10px;
+			}
+		}
+
+		&__close-button {
+			padding: 0;
+			border: 0;
+			outline: 0;
+			background: transparent;
+		}
+
+		&__search-box {
+			background: $black;
+
+			.busca {
+				padding: 16px;
+			}
+		}
+	}
+
 	.main-menu {
 		height: 100%;
 
+		@include mq(lg, max) {
+			display: flex;
+			flex-direction: column;
+			position: fixed;
+			top: 0;
+			left: 0;
+			z-index: map-get($z-index, menu);
+			transform: translateX(-100%);
+			width: 100%;
+			height: 100%;
+			background: $white;
+		}
+
 		&__departments {
 			display: flex;
-			height: 100%;
 			margin: 0;
+
+			@include mq(lg, max) {
+				flex: 1;
+				flex-direction: column;
+				position: relative;
+				overflow: hidden auto;
+			}
+
+			@include mq(lg, min) {
+				height: 100%;
+			}
 		}
 		&__department {
 			display: flex;
 			align-items: center;
-			margin-right: 40px;
+
+			@include mq(lg, max) {
+				border-bottom: 1px solid $gray-100;
+			}
 
 			@include mq(lg, min) {
+				margin-right: 40px;
+
 				&:hover {
 					.main-menu__department-link {
 						text-decoration: underline;
@@ -45,7 +109,16 @@
 			font-size: 12px;
 			color: $white;
 
-			&:hover {
+			@include mq(lg, max) {
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				width: 100%;
+				padding: 20px 16px;
+				color: $black;
+			}
+
+			@include mq(lg, min) {
 				&::after {
 					content: attr(title);
 					display: block;
@@ -56,20 +129,47 @@
 				}
 			}
 		}
+
+		&__accont-link {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			height: 64px;
+			line-height: 12px;
+			font-size: 10px;
+			color: $white;
+			background: $black;
+
+			i {
+				margin-right: 16px;
+			}
+		}
 	}
 
 	.submenu {
 		position: absolute;
+		width: 100%;
+
+		@include mq(lg, max) {
+			top: 0;
+			left: 100%;
+			height: 100%;
+			overflow: auto;
+			padding-bottom: 34px;
+			background: $white;
+		}
+
+		@include mq(lg, min) {
 			top: calc(100% + 32px);
 			left: 0;
 			z-index: map-get($z-index, menu);
-		width: 100%;
 			padding: 30px 0 43px;
 			background: rgba($white, 0.95);
 			box-shadow: 0px 4px 4px rgba($black, 0.02);
 			opacity: 0;
 			pointer-events: none;
 			transition: all 0.2s ease-in-out;
+		}
 
 		& ::before {
 			content: "";
@@ -81,16 +181,50 @@
 			background: transparent;
 		}
 
+		.container {
+			@include mq(lg, max) {
+				padding: 0 16px;
+			}
+		}
+
+		&__return-button {
+			display: flex;
+			align-items: center;
+			width: 100%;
+			margin-bottom: 34px;
+			padding: 16px;
+			border: solid $gray-100;
+			border-width: 0 0 1px 0;
+			outline: 0;
+			text-align: left;
+			background: transparent;
+
+			i {
+				margin-right: 8px;
+			}
+		}
+
 		&__title {
 			margin: 0 0 8px;
 			line-height: 24px;
 			font-size: 20px;
+
+			@include mq(lg, max) {
+				line-height: 14px;
+				font-size: 12px;
+				text-decoration-line: underline;
+				color: $blue;
+			}
 		}
 
 		&__categories-wrapper {
+			margin-bottom: 16px;
+
+			@include mq(lg, min) {
 				display: flex;
 				margin-bottom: 8px;
 			}
+		}
 
 		&__categories {
 			margin-right: 30px;

src/arquivos/sass/partials/_search.scss

@@ -0,0 +1,34 @@
+.busca {
+	display: flex;
+	align-items: center;
+	margin: 0;
+
+	legend,
+	label,
+	select {
+		display: none;
+	}
+	.fulltext-search-box {
+		flex: 1;
+		height: 23px;
+		outline: 0;
+		border: 0;
+		padding: 0;
+		line-height: 12px;
+		font-size: 10px;
+		color: $white;
+		background-color: 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;
+	}
+}

src/arquivos/sass/utils/_variaveis.scss

@@ -7,8 +7,12 @@ $font-height: 1.5;
 // colors
 $black: #000;
 $white: #fff;
-$blue: #00c8ff;
+
 $gray: #333;
+$gray-100: #e0e0e0;
+$gray-200: #828282;
+
+$blue: #00c8ff;
 
 // Grid breakpoints
 

src/controles-customizados/menuPrincipal.html

@@ -1,33 +1,54 @@
 <nav class="main-menu">
+	<div class="menu-header">
+		<div class="menu-header__top-wrapper">
+			<div class="menu-header__text">
+				<i class="sprite sprite-lock-icon"></i>
+				COMPRA 100% SEGURA
+			</div>
+
+			<button class="menu-header__close-button">
+				<i class="sprite sprite-close-menu-icon"></i>
+			</button>
+		</div>
+
+		<div class="menu-header__search-box">
+			<vtex.cmc:fulltextSearchBox />
+		</div>
+	</div>
+
 	<ul class="main-menu__departments">
 		<li class="main-menu__department">
 			<a class="main-menu__department-link" title="LOREM IPSUM" href="#"
-				>LOREM IPSUM</a
+				>LOREM IPSUM
-			>
+				<i class="sprite sprite-menu-mobile-arrow-icon"></i>
-
+			</a>
 			<div class="submenu">
+				<button class="submenu__return-button">
+					<i class="sprite sprite-back-icon"></i>
+					VOLTAR
+				</button>
 				<div class="container">
 					<h2 class="submenu__title">LOREM IPSUM</h2>
 
 					<div class="submenu__categories-wrapper">
 						<ul class="submenu__categories">
 							<li class="submenu__category">
-								<a class="submenu__category-link" href=""
+								<a class="submenu__category-link" href="#"
 									>Lorem Ipsum</a
 								>
 							</li>
 							<li class="submenu__category">
-								<a class="submenu__category-link" href=""
+								<a class="submenu__category-link" href="#"
 									>Lorem Ipsum</a
 								>
 							</li>
 							<li class="submenu__category">
-								<a class="submenu__category-link" href=""
+								<a class="submenu__category-link" href="#"
 									>Lorem Ipsum</a
 								>
 							</li>
 							<li class="submenu__category">
-								<a class="submenu__category-link" href=""
+								<a class="submenu__category-link" href="#"
 									>Lorem Ipsum</a
 								>
 							</li>
@@ -35,22 +56,22 @@
 
 						<ul class="submenu__categories">
 							<li class="submenu__category">
-								<a class="submenu__category-link" href=""
+								<a class="submenu__category-link" href="#"
 									>Lorem Ipsum</a
 								>
 							</li>
 							<li class="submenu__category">
-								<a class="submenu__category-link" href=""
+								<a class="submenu__category-link" href="#"
 									>Lorem Ipsum</a
 								>
 							</li>
 							<li class="submenu__category">
-								<a class="submenu__category-link" href=""
+								<a class="submenu__category-link" href="#"
 									>Lorem Ipsum</a
 								>
 							</li>
 							<li class="submenu__category">
-								<a class="submenu__category-link" href=""
+								<a class="submenu__category-link" href="#"
 									>Lorem Ipsum</a
 								>
 							</li>
@@ -66,13 +87,20 @@
 		</li>
 		<li class="main-menu__department">
 			<a class="main-menu__department-link" title="LOREM IPSUM" href="#"
-				>LOREM IPSUM</a
+				>LOREM IPSUM
-			>
+				<i class="sprite sprite-menu-mobile-arrow-icon"></i>
+			</a>
 		</li>
 		<li class="main-menu__department">
 			<a class="main-menu__department-link" title="LOREM IPSUM" href="#"
-				>LOREM IPSUM</a
+				>LOREM IPSUM
-			>
+				<i class="sprite sprite-menu-mobile-arrow-icon"></i>
+			</a>
 		</li>
 	</ul>
+
+	<a class="main-menu__accont-link" href="/accont">
+		<i class="sprite sprite-user-icon"></i>
+		ENTRAR / MEUS PEDIDOS
+	</a>
 </nav>