feat(menu-mobile): Adiciona menu mobilea pagina

src/arquivos/sass/main.scss

@@ -24,3 +24,4 @@
 @import "./partials/prateleira";
 @import "./partials/ajustes";
 @import "./partials/flags";
+@import "./partials/search";

src/arquivos/sass/partials/_header.scss

@@ -28,43 +28,6 @@
 		}
 	}
 
-	.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;
-			background: transparent;
-
-			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;
-			@extend .sprite;
-			@extend .sprite-search-icon;
-		}
-	}
 
 	.user-items {
 		display: flex;

src/arquivos/sass/partials/_menu.scss

@@ -12,21 +12,90 @@
 		}
 	}
 
+	.menu-header {
+		&__top-wrapper {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			padding: 16px;
+		}
+
+		&__text {
+			display: flex;
+			align-items: center;
+			gap: 10px;
+			font-size: 12px;
+			line-height: 15px;
+			color: $gray-200;
+
+			&::after {
+				content: '';
+				width: 1px;
+				height: 36px;
+				margin-left: 128px;
+				background: $gray-100;
+			}
+		}
+
+		&__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);
+			width: 100%;
+			height: 100%;
+			background: $white-500;
+		}
+
 		&__departments {
 			display: flex;
 			margin: 0;
-			height: 100%;
+
+			@include mq(lg, max) {
+				flex: 1;
+				flex-direction: column;
+			}
+
+			@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 {
 						font-weight: 700;
@@ -51,9 +120,24 @@
 
 			text-transform: uppercase;
 
-			color: #FFFFFF;
+			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) {
+				i {
+					display: none;
+				}
+
 				&::after {
 					content: attr(title);
 					font-weight: bold;
@@ -64,6 +148,18 @@
 				}
 			}
 		}
+
+		&__account-link {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			gap: 16px;
+			height: 64px;
+			font-size: 10px;
+			line-height: 12px;
+			color: $white-500;
+			background: $black-500;
+		}
 	}
 
 	.submenu {
@@ -79,6 +175,7 @@
 		pointer-events: none;
 		transition: all 0.4s ease-in-out;
 
+
 		&::before {
 			content: "";
 			position: absolute;

src/arquivos/sass/partials/_search.scss

@@ -0,0 +1,37 @@
+.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;
+		background: transparent;
+
+		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;
+		@extend .sprite;
+		@extend .sprite-search-icon;
+	}
+}

src/arquivos/sass/utils/_variaveis.scss

@@ -11,6 +11,9 @@ $black-500: #000;
 $white-500: #fff;
 $blue-500: #00C8FF;
 $gray-500: #333333;
+$gray-200: #828282;
+$gray-100: #E0E0E0;
+
 
 // universal
 

src/controles-customizados/menuPrincipal.html

@@ -1,9 +1,25 @@
 <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" aria-label="Close">
+				<i class="sprite sprite-close-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"
+			<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">
 				<div class="container">
@@ -11,44 +27,44 @@
 					<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>
 						</ul>
 						<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>
@@ -64,15 +80,22 @@
 		</li>
 
 		<li class="main-menu__department">
-			<a class="main-menu__department-link" href="#" title="LOREM IPSUM"
+			<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"
+			<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>