From 93d69b5d988cbb65008a44897666c5e72a5d3115 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cain=C3=A3=20Milech?= <cainamilech15@hotmail.com>
Date: Tue, 6 Dec 2022 22:37:15 -0300
Subject: [PATCH] feat: adiciona js no menu mobile

---
 src/arquivos/js/app/partials/Menu.js  | 58 ++++++++++++++-------------
 src/arquivos/sass/partials/_menu.scss | 31 +++++++++++++-
 2 files changed, 61 insertions(+), 28 deletions(-)

diff --git a/src/arquivos/js/app/partials/Menu.js b/src/arquivos/js/app/partials/Menu.js
index 2bd95ec..74d8e04 100644
--- a/src/arquivos/js/app/partials/Menu.js
+++ b/src/arquivos/js/app/partials/Menu.js
@@ -1,38 +1,42 @@
 export default class Menu {
 	constructor() {
-		this.toggleMenuMobile();
-		this.toggleSubCategories();
+		this.selectors();
+		this.events();
 	}
 
-	toggleMenuMobile() {
-		$("#open-menu-button, .show-menu .option").on("click", function () {
-			$(".menu-principal").addClass("mobile-open");
-			$("header.header").addClass("menu-mobile-open");
-		});
-
-		$("#close-menu-button").on("click", function () {
-			$(".menu-principal").removeClass("mobile-open");
-			$("header.header").removeClass("menu-mobile-open");
-		});
+	selectors() {
+		this.openMenuButton = $(".menu__button");
+		this.mainMenu = $(".main-menu");
+		this.closeMenuButton = $(".menu-header__close-button");
+		this.departmentLink = $(".main-menu__department-link");
+		this.returnButton = $(".submenu__return-button");
 	}
 
-	toggleSubCategories() {
-		$(".m3-dropdown > button").on("click", function (event) {
-			event.preventDefault();
+	events() {
+		this.openMenuButton.click(this.openMenu.bind(this));
+		this.closeMenuButton.click(this.closeMenu.bind(this));
+		this.departmentLink.click(this.openSubmenu.bind(this));
+		this.returnButton.click(this.closeSubmenu.bind(this));
+	}
 
-			if ($(this).parent().hasClass("sub-menu-open")) {
-				$(this).parent().removeClass("sub-menu-open");
-			} else {
-				$(this).parent().siblings().removeClass("sub-menu-open");
-				$(this).parent().addClass("sub-menu-open");
-			}
+	openMenu() {
+		this.mainMenu.addClass("is-open");
+	}
 
-			$(this).parents("ul.itens").toggleClass("has-sub-menu-open");
-		});
+	closeMenu() {
+		this.mainMenu.removeClass("is-open");
+	}
 
-		$(".m3-dropdown .btn-voltar").on("click", function () {
-			$(this).parents(".m3-dropdown").removeClass("sub-menu-open");
-			$(this).parents("ul.itens").removeClass("has-sub-menu-open");
-		});
+	openSubmenu(event) {
+		event.preventDefault(); //nao adicionar nada na url por ex #
+		const link = $(event.target); //para saber qual link foi clicado
+
+		link.siblings(".submenu").addClass("is-open"); //pegar o irmao
+	}
+
+	closeSubmenu(event) {
+		const button = $(event.target);
+
+		button.parents(".submenu").removeClass("is-open"); //pegar o pai submenu
 	}
 }
diff --git a/src/arquivos/sass/partials/_menu.scss b/src/arquivos/sass/partials/_menu.scss
index e4a2f55..1e76a0b 100644
--- a/src/arquivos/sass/partials/_menu.scss
+++ b/src/arquivos/sass/partials/_menu.scss
@@ -12,6 +12,10 @@
 	}
 
 	.menu-header {
+		@include mq(lg, min) {
+			display: none;
+		}
+
 		&__top-wrapper {
 			display: flex;
 			align-items: center;
@@ -63,6 +67,12 @@
 			width: 100%;
 			height: 100%;
 			background: $white-500;
+			transition: transform 0.2s ease-in-out;
+		}
+
+		&.is-open {
+			/*quando o proprio main menu tiver essa classe, que vem no js, aplica.*/
+			transform: translateX(0); /*volta pra tela*/
 		}
 
 		&__departments {
@@ -133,6 +143,12 @@
 					visibility: hidden;
 				}
 			}
+
+			i {
+				@include mq(lg, min) {
+					display: none;
+				}
+			}
 		}
 
 		&__account-link {
@@ -145,6 +161,10 @@
 			line-height: 12px;
 			color: $white-500;
 
+			@include mq(lg, min) {
+				display: none;
+			}
+
 			i {
 				margin-right: 16px;
 			}
@@ -179,6 +199,12 @@
 			opacity: 0; /*oculto parece q nao ta ali*/
 			pointer-events: none; /*mouse nao pode passar por ele*/
 			transition: all 0.2s ease-in-out;
+			transition: left 0.2s ease-in-out;
+		}
+
+		&.is-open {
+			/*quando o proprio main menu tiver essa classe, que vem no js, aplica.*/
+			left: 0; /*volta pra tela*/
 		}
 
 		&::before {
@@ -208,9 +234,12 @@
 			border-width: 0 0 1px 0;
 			outline: 0;
 			text-align: left;
-
 			background: transparent;
 
+			@include mq(lg, min) {
+				display: none;
+			}
+
 			i {
 				margin-right: 8px;
 			}