diff --git a/src/arquivos/js/app/partials/Menu.js b/src/arquivos/js/app/partials/Menu.js
index 2bd95ec..426bd1f 100644
--- a/src/arquivos/js/app/partials/Menu.js
+++ b/src/arquivos/js/app/partials/Menu.js
@@ -1,38 +1,47 @@
+import { isSmallerThen991 } from "Helpers/MediasMatch";
+
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.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");
- }
+ if (isSmallerThen991) {
+ this.departmentLink.click(this.openSubMenu.bind(this));
+ }
+ }
- $(this).parents("ul.itens").toggleClass("has-sub-menu-open");
- });
+ openMenu() {
+ this.mainMenu.addClass("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");
- });
+ closeMenu() {
+ this.mainMenu.removeClass("is-open");
+ }
+
+ openSubMenu(event) {
+ event.preventDefault();
+ const link = $(event.target);
+
+ link.siblings(".submenu").addClass("is-open");
+ }
+
+ closeSubMenu(event) {
+ const button = $(event.target);
+
+ button.parents(".submenu").removeClass("is-open");
}
}
diff --git a/src/arquivos/sass/partials/_menu.scss b/src/arquivos/sass/partials/_menu.scss
index e02d145..03f1b6e 100644
--- a/src/arquivos/sass/partials/_menu.scss
+++ b/src/arquivos/sass/partials/_menu.scss
@@ -13,6 +13,10 @@
}
.menu-header {
+ @include mq(lg, min) {
+ display: none;
+ }
+
&__top-wrapper {
display: flex;
align-items: center;
@@ -62,6 +66,11 @@
transform: translateX(-100%);
z-index: map-get($z-index, Level-5);
background: $color-white;
+ transition: transform 0.2s ease-in-out;
+ }
+
+ &.is-open {
+ transform: translateX(0);
}
&__departments {
@@ -131,6 +140,12 @@
display: block;
}
}
+
+ i {
+ @include mq(lg, min) {
+ display: none;
+ }
+ }
}
&__account-link {
@@ -143,6 +158,10 @@
color: $color-white;
background: $color-black;
+ @include mq(lg, min) {
+ display: none;
+ }
+
i {
margin-right: 16px;
}
@@ -160,6 +179,7 @@
overflow: auto;
padding-bottom: 34px;
background: $color-white;
+ transition: left 0.2s ease-in-out;
}
@include mq(lg, min) {
@@ -175,6 +195,10 @@
transition: all 0.2s ease-in-out;
}
+ &.is-open {
+ left: 0;
+ }
+
&::before {
content: "";
position: absolute;
@@ -204,6 +228,10 @@
text-align: left;
background: transparent;
+ @include mq(lg, min) {
+ display: none;
+ }
+
i {
margin-right: 8px;
}
diff --git a/src/controles-customizados/menuPrincipal.html b/src/controles-customizados/menuPrincipal.html
index 5fcf872..df8ba16 100644
--- a/src/controles-customizados/menuPrincipal.html
+++ b/src/controles-customizados/menuPrincipal.html
@@ -83,6 +83,59 @@
LOREM IPSUM
+
+
@@ -90,48 +143,58 @@
LOREM IPSUM
-
+