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; }