added notes for menu actions
This commit is contained in:
parent
217d7bccd3
commit
284132043a
@ -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");
|
||||
|
@ -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");
|
||||
|
Loading…
x
Reference in New Issue
Block a user