From d92f680d7493ab0abfa3fddf12694028c85caeae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cain=C3=A3=20Milech?= <cainamilech15@hotmail.com>
Date: Tue, 6 Dec 2022 21:49:09 -0300
Subject: [PATCH] feat: adiciona submenu mobile

---
 src/arquivos/sass/partials/_menu.scss         |  81 +++++++++++++++---
 src/arquivos/sprite/menu-left-arrow-icon.png  | Bin 0 -> 264 bytes
 src/controles-customizados/menuPrincipal.html |   6 ++
 3 files changed, 74 insertions(+), 13 deletions(-)
 create mode 100644 src/arquivos/sprite/menu-left-arrow-icon.png

diff --git a/src/arquivos/sass/partials/_menu.scss b/src/arquivos/sass/partials/_menu.scss
index 7d5014d..e4a2f55 100644
--- a/src/arquivos/sass/partials/_menu.scss
+++ b/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 {
diff --git a/src/arquivos/sprite/menu-left-arrow-icon.png b/src/arquivos/sprite/menu-left-arrow-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..b3ec0c88541751a3aa8d85d55ae494cf3ef193ac
GIT binary patch
literal 264
zcmeAS@N?(olHy`uVBq!ia0vp^Ahr+(8<0%e?(YqxI14-?iy0WiR6&^0Gf3qFP>``W
z$lZxy-8q?;Kn_c~qpu?a!^VE@KZ&eB{#;KN$B+uf-b>lMEe1U7AGVb<d7L|-a^{fc
z&dE$%8yL7IFmQ43IWVY5JlOcLE@$z7|L9MrZ{@lc91#xM)9AES=R#|o!%8Nn_Y<2#
zn4T=yb*lEsg5XT?TMvY1DX_m3VD}9Ok27cfq8i~O`{h34g1OSmUMN2~&vO0riKVRh
zmOt-@xYjhw)YKMeo7FB9yxsPwEjGFA$Xd~N62ey#&6qm&`Nz(0+nfe;D1)b~pUXO@
GgeCxAtz88G

literal 0
HcmV?d00001

diff --git a/src/controles-customizados/menuPrincipal.html b/src/controles-customizados/menuPrincipal.html
index 6e5bfab..913f3f0 100644
--- a/src/controles-customizados/menuPrincipal.html
+++ b/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">