Cria a lógica de funcionamento do menu mobile
This commit is contained in:
parent
0afab6d8c8
commit
f7f5a421e6
@ -1,38 +1,48 @@
|
|||||||
|
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__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));
|
||||||
|
this.returnButton.click(this.closeSubmenu);
|
||||||
|
|
||||||
if ($(this).parent().hasClass("sub-menu-open")) {
|
if(isSmallerThen991) {
|
||||||
$(this).parent().removeClass("sub-menu-open");
|
this.departmentLink.click(this.openSubmenu);
|
||||||
} else {
|
}
|
||||||
$(this).parent().siblings().removeClass("sub-menu-open");
|
}
|
||||||
$(this).parent().addClass("sub-menu-open");
|
|
||||||
}
|
|
||||||
|
|
||||||
$(this).parents("ul.itens").toggleClass("has-sub-menu-open");
|
openMenu() {
|
||||||
});
|
this.mainMenu.addClass('is-open');
|
||||||
|
}
|
||||||
|
|
||||||
$(".m3-dropdown .btn-voltar").on("click", function () {
|
closeMenu() {
|
||||||
$(this).parents(".m3-dropdown").removeClass("sub-menu-open");
|
this.mainMenu.removeClass('is-open');
|
||||||
$(this).parents("ul.itens").removeClass("has-sub-menu-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');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -14,6 +14,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;
|
||||||
@ -63,6 +67,11 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background: $white-500;
|
background: $white-500;
|
||||||
|
transition: transform .2s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.is-open {
|
||||||
|
transform: translateX(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
&__departments {
|
&__departments {
|
||||||
@ -133,6 +142,12 @@
|
|||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
i {
|
||||||
|
@include mq(lg, min) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&__account-link {
|
&__account-link {
|
||||||
@ -145,6 +160,10 @@
|
|||||||
color: $white-500;
|
color: $white-500;
|
||||||
background: $black-500;
|
background: $black-500;
|
||||||
|
|
||||||
|
@include mq(lg, min) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
i {
|
i {
|
||||||
margin-right: 16px;
|
margin-right: 16px;
|
||||||
}
|
}
|
||||||
@ -162,6 +181,7 @@
|
|||||||
overflow: auto;
|
overflow: auto;
|
||||||
padding-bottom: 34px;
|
padding-bottom: 34px;
|
||||||
background: $white-500;
|
background: $white-500;
|
||||||
|
transition: left 0.2s ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
@include mq(lg, min) {
|
@include mq(lg, min) {
|
||||||
@ -176,6 +196,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;
|
||||||
@ -206,6 +230,10 @@
|
|||||||
text-align: left;
|
text-align: left;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
|
|
||||||
|
@include mq(lg, min) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
i {
|
i {
|
||||||
margin-right: 8px;
|
margin-right: 8px;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -27,10 +27,10 @@
|
|||||||
<i class="sprite sprite-menu-left-arrow-icon"></i>
|
<i class="sprite sprite-menu-left-arrow-icon"></i>
|
||||||
VOLTAR
|
VOLTAR
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
|
|
||||||
<h2 class="submenu__title">LOREM IPSUM</h2>
|
<h2 class="submenu__title">LOREM IPSUM 01</h2>
|
||||||
|
|
||||||
<div class="submenu__categories-wrapper">
|
<div class="submenu__categories-wrapper">
|
||||||
<ul class="submenu__categories">
|
<ul class="submenu__categories">
|
||||||
@ -77,6 +77,55 @@
|
|||||||
LOREM IPSUM
|
LOREM IPSUM
|
||||||
<i class="sprite sprite-menu-mobile-arrow-icon"></i>
|
<i class="sprite sprite-menu-mobile-arrow-icon"></i>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
|
<div class="submenu">
|
||||||
|
<button class="submenu__return-button">
|
||||||
|
<i class="sprite sprite-menu-left-arrow-icon"></i>
|
||||||
|
VOLTAR
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
|
||||||
|
<h2 class="submenu__title">LOREM IPSUM 02</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-menu-arrow-icon"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li class="main-menu__department">
|
<li class="main-menu__department">
|
||||||
@ -84,6 +133,55 @@
|
|||||||
LOREM IPSUM
|
LOREM IPSUM
|
||||||
<i class="sprite sprite-menu-mobile-arrow-icon"></i>
|
<i class="sprite sprite-menu-mobile-arrow-icon"></i>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
|
<div class="submenu">
|
||||||
|
<button class="submenu__return-button">
|
||||||
|
<i class="sprite sprite-menu-left-arrow-icon"></i>
|
||||||
|
VOLTAR
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
|
||||||
|
<h2 class="submenu__title">LOREM IPSUM 03</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-menu-arrow-icon"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user