160 lines
3.6 KiB
JavaScript
160 lines
3.6 KiB
JavaScript
// SIDEBAR DROPDOWN
|
|
const allDropdown = document.querySelectorAll('#sidebar .side-dropdown');
|
|
const sidebar = document.getElementById('sidebar');
|
|
|
|
|
|
allDropdown.forEach(item=> {
|
|
const a = item.parentElement.querySelector('a:first-child');
|
|
a.addEventListener('click', function (e) {
|
|
e.preventDefault();
|
|
|
|
if(!this.classList.contains('active')) {
|
|
allDropdown.forEach(i=> {
|
|
const aLink = i.parentElement.querySelector('a:first-child');
|
|
|
|
aLink.classList.remove('active');
|
|
i.classList.remove('show');
|
|
})
|
|
}
|
|
|
|
this.classList.toggle('active');
|
|
item.classList.toggle('show');
|
|
})
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
// SIDEBAR COLLAPSE
|
|
// const toggleSidebar = document.querySelector('nav .toggle-sidebar');
|
|
const allSideDivider = document.querySelectorAll('#sidebar .divider');
|
|
|
|
if(sidebar.classList.contains('hide')) {
|
|
allSideDivider.forEach(item=> {
|
|
item.textContent = '-'
|
|
})
|
|
allDropdown.forEach(item=> {
|
|
const a = item.parentElement.querySelector('a:first-child');
|
|
a.classList.remove('active');
|
|
item.classList.remove('show');
|
|
})
|
|
} else {
|
|
allSideDivider.forEach(item=> {
|
|
item.textContent = item.dataset.text;
|
|
})
|
|
}
|
|
|
|
// toggleSidebar.addEventListener('click', function () {
|
|
// sidebar.classList.toggle('hide');
|
|
//
|
|
// if(sidebar.classList.contains('hide')) {
|
|
// allSideDivider.forEach(item=> {
|
|
// item.textContent = '-'
|
|
// })
|
|
//
|
|
// allDropdown.forEach(item=> {
|
|
// const a = item.parentElement.querySelector('a:first-child');
|
|
// a.classList.remove('active');
|
|
// item.classList.remove('show');
|
|
// })
|
|
// } else {
|
|
// allSideDivider.forEach(item=> {
|
|
// item.textContent = item.dataset.text;
|
|
// })
|
|
// }
|
|
// })
|
|
|
|
|
|
|
|
|
|
sidebar.addEventListener('mouseleave', function () {
|
|
if(this.classList.contains('hide')) {
|
|
allDropdown.forEach(item=> {
|
|
const a = item.parentElement.querySelector('a:first-child');
|
|
a.classList.remove('active');
|
|
item.classList.remove('show');
|
|
})
|
|
allSideDivider.forEach(item=> {
|
|
item.textContent = '-'
|
|
})
|
|
}
|
|
})
|
|
|
|
|
|
|
|
sidebar.addEventListener('mouseenter', function () {
|
|
if(this.classList.contains('hide')) {
|
|
allDropdown.forEach(item=> {
|
|
const a = item.parentElement.querySelector('a:first-child');
|
|
a.classList.remove('active');
|
|
item.classList.remove('show');
|
|
})
|
|
allSideDivider.forEach(item=> {
|
|
item.textContent = item.dataset.text;
|
|
})
|
|
}
|
|
})
|
|
|
|
|
|
|
|
|
|
// PROFILE DROPDOWN
|
|
// const profile = document.querySelector('nav .profile');
|
|
// const imgProfile = profile.querySelector('img');
|
|
// const dropdownProfile = profile.querySelector('.profile-link');
|
|
//
|
|
// imgProfile.addEventListener('click', function () {
|
|
// dropdownProfile.classList.toggle('show');
|
|
// })
|
|
|
|
|
|
|
|
|
|
// MENU
|
|
const allMenu = document.querySelectorAll('main .content-data .head .menu');
|
|
|
|
allMenu.forEach(item=> {
|
|
const icon = item.querySelector('.icon');
|
|
const menuLink = item.querySelector('.menu-link');
|
|
|
|
icon.addEventListener('click', function () {
|
|
menuLink.classList.toggle('show');
|
|
})
|
|
})
|
|
|
|
|
|
|
|
// window.addEventListener('click', function (e) {
|
|
// if(e.target !== imgProfile) {
|
|
// if(e.target !== dropdownProfile) {
|
|
// if(dropdownProfile.classList.contains('show')) {
|
|
// dropdownProfile.classList.remove('show');
|
|
// }
|
|
// }
|
|
// }
|
|
//
|
|
// allMenu.forEach(item=> {
|
|
// const icon = item.querySelector('.icon');
|
|
// const menuLink = item.querySelector('.menu-link');
|
|
//
|
|
// if(e.target !== icon) {
|
|
// if(e.target !== menuLink) {
|
|
// if (menuLink.classList.contains('show')) {
|
|
// menuLink.classList.remove('show')
|
|
// }
|
|
// }
|
|
// }
|
|
// })
|
|
// })
|
|
|
|
|
|
|
|
|
|
|
|
// // PROGRESSBAR
|
|
// const allProgress = document.querySelectorAll('main .card .progress');
|
|
//
|
|
// allProgress.forEach(item=> {
|
|
// item.style.setProperty('--value', item.dataset.value)
|
|
// })
|