diff --git a/src/arquivos/js/app/partials/Menu.js b/src/arquivos/js/app/partials/Menu.js index 2bd95ec..fb7fa34 100644 --- a/src/arquivos/js/app/partials/Menu.js +++ b/src/arquivos/js/app/partials/Menu.js @@ -1,38 +1,44 @@ +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)); + if (isSmallerThen991) this.departmentLink.click(this.openSubmenu); + this.returnButton.click(this.closeSubmenu); + } - 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(); + const link = $(event.target); + console.log(link); + 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 93034c6..d714c9c 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-500; + transition: transform 0.2s ease-in-out; + } + + &.is-open { + transform: translateX(0); } &__departments { @@ -131,6 +140,12 @@ visibility: hidden; } } + + i { + @include mq(lg, min) { + display: none; + } + } } &__account-link { @@ -143,6 +158,10 @@ font-size: 10px; color: $white-500; + @include mq(lg, min) { + display: none; + } + i { margin-right: 16px; } @@ -160,6 +179,7 @@ top: 0; background-color: $white-500; height: 100%; + transition: left 0.2s ease-in-out; } @include mq(lg, min) { @@ -174,6 +194,10 @@ transition: all 0.2s ease-in-out; } + &.is-open { + left: 0; + } + &::before { content: ""; position: absolute; @@ -204,6 +228,10 @@ margin-bottom: 34px; background-color: transparent; + @include mq(lg, min) { + display: none; + } + i { margin-right: 8px; }