Amandaalmeida/vtex-cms-template-atualizado-amanda-almeida
1
0
Fork 0
forked from M3-Academy/vtex-cms-template-atualizado
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(js): Adiciona javascript do menu e submenu mobile

Browse Source
This commit is contained in:
amanda almeida 2022-12-08 17:43:17 -03:00
parent 263a3bb80d
commit 3d694c3243
2 changed files with 50 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
src/arquivos/js/app/partials/Menu.js
View File

@ -1,38 +1,49 @@
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.closeSubmenuButton = $(".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 ($(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");
}
this.closeSubmenuButton.click(this.closeSubmenu);
$(this).parents("ul.itens").toggleClass("has-sub-menu-open");
});
if (isSmallerThen991) {
this.departmentLink.click(this.openSubmenu);
}
}
$(".m3-dropdown .btn-voltar").on("click", function () {
$(this).parents(".m3-dropdown").removeClass("sub-menu-open");
$(this).parents("ul.itens").removeClass("has-sub-menu-open");
});
openMenu() {
this.mainMenu.addClass("is-open");
}
closeMenu() {
this.mainMenu.removeClass("is-open");
}
openSubmenu(e) {
e.preventDefault();
const link = $(e.target);
link.siblings(".submenu").addClass("is-open");
}
closeSubmenu(e) {
e.preventDefault();
const button = $(e.target);
button.parents(".submenu").removeClass("is-open");
}
}

13
src/arquivos/sass/partials/_menu.scss
View File

@ -33,10 +33,11 @@
color: $gray-200;
&::after {
position: absolute;
content: '';
width: 1px;
height: 36px;
margin-left: 128px;
left: 85%;
background: $gray-100;
}
}
@ -74,6 +75,11 @@
width: 100%;
height: 100%;
background: $white-500;
transition: transform .2s ease-in-out;
}
&.is-open {
transform: translateX(0);
}
&__departments {
@ -186,6 +192,7 @@
overflow: auto;
padding-bottom: 34px;
background: $white-500;
transition: left .2s ease-in-out;
}
@include mq(lg, min) {
@ -200,6 +207,10 @@
transition: all 0.4s ease-in-out;
}
&.is-open {
left: 0;
}
&::before {
content: "";
position: absolute;