Cria o menu 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

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

src/arquivos/sass/partials/_menu.scss

@@ -11,20 +11,85 @@
 		}
 	}
 
+	.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-500;
+
+			.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, Level-5);
+			transform: translateX(-100%);
+			width: 100%;
+			height: 100%;
+			background: $white-500;
+		}
+
 		&__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;
@@ -46,6 +111,15 @@
 			font-size: 12px;
 			color: $white-500;
 
+			@include mq(lg, max) {
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				width: 100%;
+				padding: 20px 16px;
+				color: $black-500;
+			}
+
 			@include mq(lg, min) {
 				&::after {
 					content: attr(title);
@@ -57,20 +131,48 @@
 				}
 			}
 		}
+
+		&__account-link {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			height: 64px;
+			line-height: 12px;
+			font-size: 10px;
+			color: $white-500;
+			background: $black-500;
+
+			i {
+				padding: 0 16px;
+			}
+		}
 	}
 
 	.submenu {
 		position: absolute;
-		top: calc(100% + 32px);
+
-		left: 0;
-		z-index: map-get($z-index, Level-4);
 		width: 100%;
-		padding: 30px 0 43px;
+
-		background: rgba($white-500, 0.95);
+		@include mq(lg, max) {
-		box-shadow: 0px 4px 4px rgba($black-500, 0.02);
+			top: 0;
-		opacity: 0;
+			left: 100%;
-		pointer-events: none;
+			height: 100%;
-		transition: all 0.2s ease-in-out;
+			overflow: auto;
+			padding-bottom: 34px;
+			background: $white-500;
+		}
+
+		@include mq(lg, min) {
+			top: calc(100% + 32px);
+			left: 0;
+			z-index: map-get($z-index, Level-4);
+			padding: 30px 0 43px;
+			background: rgba($white-500, 0.95);
+			box-shadow: 0px 4px 4px rgba($black-500, 0.02);
+			opacity: 0;
+			pointer-events: none;
+			transition: all 0.2s ease-in-out;
+		}
 
 		&::before {
 			content: "";
@@ -82,15 +184,49 @@
 			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: 0;
+			border-bottom: 1px solid $gray-100;
+			outline: 0;
+			text-align: left;
+			background: transparent;
+
+			i {
+				margin-right: 8px;
+			}
+		}
+
 		&__title {
 			margin: 0 0 8px;
 			font-size: 20px;
 			line-height: 24px;
+
+			@include mq(lg, max) {
+				text-decoration: underline;
+				font-size: 12px;
+				line-height: 14px;
+				color: $blue-500;
+			}
 		}
 
 		&__categories-wrapper {
-			display: flex;
+			margin-bottom: 16px;
-			margin-bottom: 8px;
+
+			@include mq(lg, min) {
+				margin-bottom: 8px;
+				display: flex;
+			}
 		}
 
 		&__categories {

src/arquivos/sass/partials/_search.scss

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

src/arquivos/sass/utils/_variaveis.scss

@@ -8,6 +8,9 @@ $font-height: 1.5;
 $black-500: #000000;
 $white-500: #ffffff;
 $blue-500: #00c8ff;
+
+$gray-100: #e0e0e0;
+$gray-200: #828282;
 $gray-500: #333333;
 
 // Grid breakpoints

src/controles-customizados/menuPrincipal.html

@@ -1,10 +1,31 @@
 <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" href="#" title="LOREM IPSUM"
-				>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-menu-left-arrow-icon"></i>
+					VOLTAR
+				</button>
 				<div class="container">
 					<h2 class="submenu__title">LOREM IPSUM</h2>
 					<div class="submenu__categories-wrapper">
@@ -61,13 +82,18 @@
 		</li>
 		<li class="main-menu__department">
 			<a class="main-menu__department-link" href="#" title="LOREM IPSUM"
-				>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" href="#" title="LOREM IPSUM"
-				>LOREM IPSUM</a
+				>LOREM IPSUM <i class="sprite sprite-menu-mobile-arrow-icon"></i
-			>
+			></a>
 		</li>
 	</ul>
+
+	<a class="main-menu__account-link" href="/account">
+		<i class="sprite sprite-user-icon"></i>
+		ENTRAR/MEUS PEDIDOS
+	</a>
 </nav>