From cdb526203d05fbbfcc248df951d51415cc955862 Mon Sep 17 00:00:00 2001 From: ManuelaLuanaSchumackerTavares Date: Mon, 5 Dec 2022 22:24:45 -0300 Subject: [PATCH] feat(home): Cria a logica de funcionamento do menu mobile --- src/arquivos/js/app/partials/Menu.js | 63 ++++---- src/arquivos/sass/partials/_menu.scss | 28 ++++ src/controles-customizados/menuPrincipal.html | 135 +++++++++++++----- 3 files changed, 163 insertions(+), 63 deletions(-) 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 + +
+ +
+

LOREM IPSUM

+ +
+ + + +
+ + + VER TODOS + + +
+
  • @@ -90,48 +143,58 @@ LOREM IPSUM -
    • +
    + +
    +

    LOREM IPSUM

    -
  • - - LOREM IPSUM - - -
    • +
    + -
  • - - LOREM IPSUM - - -
    • + +
    + + + VER TODOS + + +
    +