Gabriel_Ferraz_Nogueira/vtex-cms-template-atualizado-gabriel-ferraz
1
0
Fork 0
forked from M3-Academy/vtex-cms-template-atualizado
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(header): criação do js nos headers

Browse Source
This commit is contained in:
Gabriel Ferraz Nogueira 2022-12-07 19:13:41 -03:00
parent 921f1bd2bb
commit a2e910555e
3 changed files with 191 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,38 +1,50 @@
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.oppenMenuButton = $(".menu__button");
this.mainMenu = $(".main-menu");
this.closeMenuButton = $(".menu-header__close-button");
this.departamentLink = $(".main-menu__department-link");
this.returnButton = $(".submenu__return-button");
}
toggleSubCategories() {
$(".m3-dropdown > button").on("click", function (event) {
event.preventDefault();
events() {
this.oppenMenuButton.click(this.openMenu.bind(this));
this.closeMenuButton.click(this.closeMenu.bind(this));
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");
}
if (isSmallerThen991) {
this.departamentLink.click(this.openSubmenu);
}
}
$(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) {
event.preventDefault();
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 {
@include mq(lg, min) {
display: none;
}
&__top-wrapper {
display: flex;
align-items: center;
@ -62,6 +66,11 @@
width: 100%;
height: 100%;
background: $white;
transition: transform 0.2s ease-in-out;
}
&.is-open {
transform: translateX(0);
}
&__departments {
@ -128,6 +137,12 @@
visibility: hidden;
}
}
i {
@include mq(lg, min) {
display: none;
}
}
}
&__accont-link {
@ -143,6 +158,10 @@
i {
margin-right: 16px;
}
@include mq(lg, min) {
display: none;
}
}
}
@ -157,6 +176,7 @@
overflow: auto;
padding-bottom: 34px;
background: $white;
transition: left 0.2s ease-in-out;
}
@include mq(lg, min) {
@ -171,6 +191,10 @@
transition: all 0.2s ease-in-out;
}
&.is-open {
left: 0;
}
& ::before {
content: "";
position: absolute;
@ -199,6 +223,10 @@
text-align: left;
background: transparent;
@include mq(lg, min) {
display: none;
}
i {
margin-right: 8px;
}

124
src/controles-customizados/menuPrincipal.html
View File

@ -90,12 +90,136 @@
>LOREM IPSUM
<i class="sprite sprite-menu-mobile-arrow-icon"></i>
</a>
<div class="submenu">
<button class="submenu__return-button">
<i class="sprite sprite-back-icon"></i>
VOLTAR
</button>
<div class="container">
<h2 class="submenu__title">LOREM IPSUM</h2>
<div class="submenu__categories-wrapper">
<ul class="submenu__categories">
<li class="submenu__category">
<a class="submenu__category-link" href="#"
>Lorem Ipsum</a
>
</li>
<li class="submenu__category">
<a class="submenu__category-link" href="#"
>Lorem Ipsum</a
>
</li>
<li class="submenu__category">
<a class="submenu__category-link" href="#"
>Lorem Ipsum</a
>
</li>
<li class="submenu__category">
<a class="submenu__category-link" href="#"
>Lorem Ipsum</a
>
</li>
</ul>
<ul class="submenu__categories">
<li class="submenu__category">
<a class="submenu__category-link" href="#"
>Lorem Ipsum</a
>
</li>
<li class="submenu__category">
<a class="submenu__category-link" href="#"
>Lorem Ipsum</a
>
</li>
<li class="submenu__category">
<a class="submenu__category-link" href="#"
>Lorem Ipsum</a
>
</li>
<li class="submenu__category">
<a class="submenu__category-link" href="#"
>Lorem Ipsum</a
>
</li>
</ul>
</div>
<a class="submenu__see-all" href="#"
>VER TODOS
<i class="sprite sprite-vector"></i>
</a>
</div>
</div>
</li>
<li class="main-menu__department">
<a class="main-menu__department-link" title="LOREM IPSUM" href="#"
>LOREM IPSUM
<i class="sprite sprite-menu-mobile-arrow-icon"></i>
</a>
<div class="submenu">
<button class="submenu__return-button">
<i class="sprite sprite-back-icon"></i>
VOLTAR
</button>
<div class="container">
<h2 class="submenu__title">LOREM IPSUM</h2>
<div class="submenu__categories-wrapper">
<ul class="submenu__categories">
<li class="submenu__category">
<a class="submenu__category-link" href="#"
>Lorem Ipsum</a
>
</li>
<li class="submenu__category">
<a class="submenu__category-link" href="#"
>Lorem Ipsum</a
>
</li>
<li class="submenu__category">
<a class="submenu__category-link" href="#"
>Lorem Ipsum</a
>
</li>
<li class="submenu__category">
<a class="submenu__category-link" href="#"
>Lorem Ipsum</a
>
</li>
</ul>
<ul class="submenu__categories">
<li class="submenu__category">
<a class="submenu__category-link" href="#"
>Lorem Ipsum</a
>
</li>
<li class="submenu__category">
<a class="submenu__category-link" href="#"
>Lorem Ipsum</a
>
</li>
<li class="submenu__category">
<a class="submenu__category-link" href="#"
>Lorem Ipsum</a
>
</li>
<li class="submenu__category">
<a class="submenu__category-link" href="#"
>Lorem Ipsum</a
>
</li>
</ul>
</div>
<a class="submenu__see-all" href="#"
>VER TODOS
<i class="sprite sprite-vector"></i>
</a>
</div>
</div>
</li>
</ul>