added notes for menu actions

This commit is contained in:
Burak Civan 2022-06-20 13:54:12 +03:00
parent 217d7bccd3
commit 284132043a
2 changed files with 31 additions and 11 deletions

View File

@ -31,39 +31,43 @@
const menuBackground = document.querySelector(".js-menu-background");
const menuClose = document.querySelector("[data-menu-close]");
//animation for notification icon
if (document.querySelector('[data-menu="notifications-menu"]')) {
setTimeout(function() {
document.querySelector('[data-menu="notifications-menu"]').classList.remove("animate-vibrate");
}, 6000);
}
//chevron active class action
Array.from(detailsEL).forEach((el) => {
el.addEventListener("toggle", function(e) {
if (e.target.querySelector(".material-icons-outlined")) {
e.target.querySelector(".material-icons").classList.toggle("rotate-180");
el.addEventListener("toggle", function(e) {
if (e.target.querySelector(".material-icons-outlined")) {
e.target.querySelector(".material-icons").classList.toggle("rotate-180");
} else {
if (e.target.querySelectorAll(".material-icons")[1]) {
e.target.querySelectorAll(".material-icons")[1].classList.toggle("rotate-180");
} else {
if (e.target.querySelectorAll(".material-icons")[1]) {
e.target.querySelectorAll(".material-icons")[1].classList.toggle("rotate-180");
} else {
e.target.querySelectorAll(".material-icons")[0].classList.toggle("rotate-180");
}
e.target.querySelectorAll(".material-icons")[0].classList.toggle("rotate-180");
}
})
}
);
}
})
});
//container animation when left menu shrinking
function contentTransitionLeft() {
sectionContent.classList.add("xl:ltr:ml-0", "xl:rtl:mr-0");
sectionContent.classList.remove("xl:ltr:ml-64", "xl:rtl:mr-64");
toggleButton.querySelector("span").classList.add("ltr:-rotate-90", "rtl:rotate-90");
}
//container animation when left menu unshrinking
function contentTransitionRight() {
sectionContent.classList.remove("xl:ltr:ml-0", "xl:rtl:mr-0");
sectionContent.classList.add("xl:ltr:ml-64", "xl:rtl:mr-64");
toggleButton.querySelector("span").classList.remove("ltr:-rotate-90", "rtl:rotate-90");
}
//if there are notifications, remove count badge
function notificationCount(action) {
let notification_count = document.querySelector('[data-notification-count]');
@ -72,6 +76,7 @@
}
}
//slide menu actions together responsive version
function slideMenu() {
if (document.body.clientWidth <= 1280) {
mobileMenuHidden();
@ -99,6 +104,8 @@
slideMenu();
});
//general left menu actions (show settings menu etc..)
function toggleMenu(iconButton, event) {
const menuRef = iconButton.getAttribute("data-menu");
const icon = iconButton.children[0].getAttribute("name");
@ -165,6 +172,7 @@
}
if (document.body.clientWidth >= 1280) {
//if url have profile menu, profile menu show
if (is_profile_menu == 1) {
let profile_menu_html = document.querySelector(".profile-menu");
let profile_icon_html = document.querySelector("[data-menu='profile-menu']");
@ -180,6 +188,7 @@
toggleButton.classList.add("invisible");
}
//if url have settings menu, settings menu show
if (is_settings_menu == 1) {
let settings_menu_html = document.querySelector(".settings-menu");
let settings_icon_html = document.querySelector("[data-menu='settings-menu']");
@ -193,6 +202,7 @@
}
}
//if mobile menu, menu is active
function mobileMenuActive() {
navbarMenu.classList.add("ltr:left-0", "rtl:right-0");
navbarMenu.classList.remove("ltr:-left-80", "rtl:-right-80");
@ -201,6 +211,7 @@
menuBackground.classList.remove("invisible");
}
//if mobile menu, menu is hidden
function mobileMenuHidden() {
navbarMenu.classList.remove("ltr:left-0", "rtl:right-0");
navbarMenu.classList.add("ltr:-left-80", "rtl:-right:80");

View File

@ -31,12 +31,14 @@
const menuBackground = document.querySelector(".js-menu-background");
const menuClose = document.querySelector("[data-menu-close]");
//animation for notification icon
if (document.querySelector('[data-menu="notifications-menu"]')) {
setTimeout(function() {
document.querySelector('[data-menu="notifications-menu"]').classList.remove("animate-vibrate");
}, 6000);
}
//chevron active class action
Array.from(detailsEL).forEach((el) => {
el.addEventListener("toggle", function(e) {
if(e.target.querySelector(".material-icons-outlined")) {
@ -48,18 +50,21 @@
}
);
//container animation when left menu shrinking
function contentTransitionLeft() {
sectionContent.classList.add("xl:ltr:ml-0", "xl:rtl:mr-0");
sectionContent.classList.remove("xl:ltr:ml-64", "xl:rtl:mr-64");
toggleButton.querySelector("span").classList.add("ltr:-rotate-90", "rtl:rotate-90");
}
//container animation when left menu unshrinking
function contentTransitionRight() {
sectionContent.classList.remove("xl:ltr:ml-0", "xl:rtl:mr-0");
sectionContent.classList.add("xl:ltr:ml-64", "xl:rtl:mr-64");
toggleButton.querySelector("span").classList.remove("ltr:-rotate-90", "rtl:rotate-90");
}
//slide menu actions together responsive version
function slideMenu() {
if (document.body.clientWidth <= 1280) {
mobileMenuHidden();
@ -87,6 +92,7 @@
slideMenu();
});
//general left menu actions (show settings menu etc..)
function toggleMenu(iconButton, event) {
const menuRef = iconButton.getAttribute("data-menu");
const icon = iconButton.children[0].getAttribute("name");
@ -147,6 +153,7 @@
}
if (document.body.clientWidth >= 1280) {
//if url have profile menu, profile menu show
if (is_profile_menu == 1) {
let profile_menu_html = document.querySelector(".profile-menu");
let profile_icon_html = document.querySelector("[data-menu='profile-menu']");
@ -164,6 +171,7 @@
}
}
//if mobile menu, menu is active
function mobileMenuActive() {
navbarMenu.classList.add("ltr:left-0", "rtl:right-0");
navbarMenu.classList.remove("ltr:-left-80", "rtl:-right-80");
@ -172,6 +180,7 @@
menuBackground.classList.remove("invisible");
}
//if mobile menu, menu is hidden
function mobileMenuHidden() {
navbarMenu.classList.remove("ltr:left-0", "rtl:right-0");
navbarMenu.classList.add("ltr:-left-80", "rtl:-right:80");