feat: adiciona submenu mobile

src/arquivos/sass/partials/_menu.scss

@@ -57,6 +57,9 @@
 			top: 0;
 			left: 0;
 			z-index: map-get($z-index, level-5);
+			transform: translateX(
+				-100%
+			); /*deslocar/esconder elemento no eixo x*/
 			width: 100%;
 			height: 100%;
 			background: $white-500;
@@ -69,6 +72,8 @@
 			@include mq(lg, max) {
 				flex: 1; /*para empurrar o account para baixo*/
 				flex-direction: column;
+				position: relative;
+				overflow: hidden auto; /*hidden horizontal, auto vertical*/
 			}
 
 			@include mq(lg, min) {
@@ -148,18 +153,33 @@
 
 	.submenu {
 		position: absolute;
-		top: calc(
-			100% + 32px
-		); /*100% ficar no final do pai (header) // +32 pra ter efeito vindo de baixo, no hover nao tem*/
-		left: 0;
-		z-index: map-get($z-index, level-4);
+
 		width: 100%;
-		padding: 30px 0 43px;
-		background: rgba($white-500, 0.95);
-		box-shadow: 0px 4px 4px rgba($black-500, 0.02);
-		opacity: 0; /*oculto parece q nao ta ali*/
-		pointer-events: none; /*mouse nao pode passar por ele*/
-		transition: all 0.2s ease-in-out;
+
+		@include mq(lg, max) {
+			top: 0;
+			left: 100%; /*para ficar no escondido, no final do pai a direita*/
+			height: 100%;
+			overflow: auto;
+			padding-bottom: 34px;
+			background: $white-500;
+		}
+
+		@include mq(lg, min) {
+			top: calc(
+				100% + 32px
+			); /*100% ficar no final do pai (header) // +32 pra ter efeito vindo de baixo, no hover nao tem*/
+
+			z-index: map-get($z-index, level-4);
+			left: 0;
+
+			padding: 30px 0 43px;
+			background: rgba($white-500, 0.95);
+			box-shadow: 0px 4px 4px rgba($black-500, 0.02);
+			opacity: 0; /*oculto parece q nao ta ali*/
+			pointer-events: none; /*mouse nao pode passar por ele*/
+			transition: all 0.2s ease-in-out;
+		}
 
 		&::before {
 			/*criar uma barra para ocupar o espaço do padding, para o submenu nao sumir, pois ainda estara com o mouse no submenu*/
@@ -172,15 +192,50 @@
 			background: transparent;
 		}
 
+		.container {
+			@include mq(lg, max) {
+				padding: 0 16px;
+			}
+		}
+
+		&__return-button {
+			display: flex;
+			align-items: center;
+			width: 100%;
+			padding: 16px;
+			margin-bottom: 34px;
+			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) {
+				text-decoration-line: underline;
+				line-height: 14px;
+				font-size: 12px;
+				color: $blue-500;
+			}
 		}
 
 		&__categories-wrapper {
-			display: flex;
-			margin-bottom: 8px;
+			margin-bottom: 16px;
+
+			@include mq(lg, min) {
+				display: flex;
+				margin-bottom: 8px;
+			}
 		}
 
 		&__categories {

src/controles-customizados/menuPrincipal.html

@@ -21,7 +21,13 @@
 			</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">