SauloKleinNery/vtex-cms-template-atualizado-saulo-klein-nery
1
0
Fork 0
forked from M3-Academy/vtex-cms-template-atualizado
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: Cria funcionamento do menu mobile

Browse Source
This commit is contained in:
Saulo Klein Nery 2022-12-08 14:06:31 -03:00
parent e29ce47aab
commit 28055c9867
2 changed files with 61 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,38 +1,44 @@
import { isSmallerThen991 } from "Helpers/MediasMatch";
export default class Menu { export default class Menu {
constructor() { constructor() {
this.toggleMenuMobile(); this.selectors();
this.toggleSubCategories(); this.events();
} }
toggleMenuMobile() { selectors() {
$("#open-menu-button, .show-menu .option").on("click", function () { this.openMenuButton = $(".menu__button");
$(".menu-principal").addClass("mobile-open"); this.mainMenu = $(".main-menu");
$("header.header").addClass("menu-mobile-open"); this.closeMenuButton = $(".menu-header__close-button");
}); this.departmentLink = $(".main-menu__department-link");
this.returnButton = $(".submenu__return-button");
$("#close-menu-button").on("click", function () {
$(".menu-principal").removeClass("mobile-open");
$("header.header").removeClass("menu-mobile-open");
});
} }
toggleSubCategories() { events() {
$(".m3-dropdown > button").on("click", function (event) { this.openMenuButton.click(this.openMenu.bind(this));
event.preventDefault(); 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")) { openMenu() {
$(this).parent().removeClass("sub-menu-open"); this.mainMenu.addClass("is-open");
} else { }
$(this).parent().siblings().removeClass("sub-menu-open");
$(this).parent().addClass("sub-menu-open");
}
$(this).parents("ul.itens").toggleClass("has-sub-menu-open"); closeMenu() {
}); this.mainMenu.removeClass("is-open");
}
$(".m3-dropdown .btn-voltar").on("click", function () { openSubmenu(event) {
$(this).parents(".m3-dropdown").removeClass("sub-menu-open"); event.preventDefault();
$(this).parents("ul.itens").removeClass("has-sub-menu-open"); 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");
} }
} }

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

@ -13,6 +13,10 @@
} }
.menu-header { .menu-header {
@include mq(lg, min) {
display: none;
}
&__top-wrapper { &__top-wrapper {
display: flex; display: flex;
align-items: center; align-items: center;
@ -62,6 +66,11 @@
transform: translateX(-100%); transform: translateX(-100%);
z-index: map-get($z-index, level-5); z-index: map-get($z-index, level-5);
background-color: $white-500; background-color: $white-500;
transition: transform 0.2s ease-in-out;
}
&.is-open {
transform: translateX(0);
} }
&__departments { &__departments {
@ -131,6 +140,12 @@
visibility: hidden; visibility: hidden;
} }
} }
i {
@include mq(lg, min) {
display: none;
}
}
} }
&__account-link { &__account-link {
@ -143,6 +158,10 @@
font-size: 10px; font-size: 10px;
color: $white-500; color: $white-500;
@include mq(lg, min) {
display: none;
}
i { i {
margin-right: 16px; margin-right: 16px;
} }
@ -160,6 +179,7 @@
top: 0; top: 0;
background-color: $white-500; background-color: $white-500;
height: 100%; height: 100%;
transition: left 0.2s ease-in-out;
} }
@include mq(lg, min) { @include mq(lg, min) {
@ -174,6 +194,10 @@
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
} }
&.is-open {
left: 0;
}
&::before { &::before {
content: ""; content: "";
position: absolute; position: absolute;
@ -204,6 +228,10 @@
margin-bottom: 34px; margin-bottom: 34px;
background-color: transparent; background-color: transparent;
@include mq(lg, min) {
display: none;
}
i { i {
margin-right: 8px; margin-right: 8px;
} }