diff --git a/src/arquivos/js/app/partials/Menu.js b/src/arquivos/js/app/partials/Menu.js index 2bd95ec..b5c2c59 100644 --- a/src/arquivos/js/app/partials/Menu.js +++ b/src/arquivos/js/app/partials/Menu.js @@ -1,38 +1,48 @@ +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 c2ec9f2..29f64f5 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; @@ -58,10 +62,15 @@ top: 0; left: 0; z-index: map-get($z-index, level-5); - transform: translateX(-100%); width: 100%; height: 100%; background: $white-500; + transform: translateX(-100%); + 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 { @@ -142,6 +157,14 @@ line-height: 12px; color: $white-500; background: $black-500; + + @include mq(lg, min) { + display: none; + } + + i { + margin-right: 16px; + } } } @@ -156,10 +179,10 @@ overflow: auto; padding-bottom: 34px; background: $white-500; + transition: left 0.2s ease-in-out; } @include mq(lg, min) { - position: absolute; top: calc(100% + 32px); left: 0; padding: 30px 0 43px; @@ -171,6 +194,10 @@ transition: all 0.2s ease-in-out; } + &.is-open { + left: 0; + } + &::before { content: ''; position: absolute; @@ -199,6 +226,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 874f999..9731731 100644 --- a/src/controles-customizados/menuPrincipal.html +++ b/src/controles-customizados/menuPrincipal.html @@ -30,7 +30,7 @@
-

LOREM IPSUM

+

LOREM IPSUM 01