[75f74d9] | 1 | // Set the default content to "Dashboard" on page load
|
---|
| 2 | document.addEventListener('DOMContentLoaded', () => {
|
---|
| 3 | showContent('dashboard');
|
---|
| 4 | });
|
---|
| 5 |
|
---|
| 6 | let sidebar = document.querySelector(".sidebar");
|
---|
| 7 | let closeBtn = document.querySelector("#btn");
|
---|
| 8 |
|
---|
| 9 | closeBtn.addEventListener("click", () => {
|
---|
| 10 | sidebar.classList.toggle("open");
|
---|
| 11 | menuBtnChange();
|
---|
| 12 | });
|
---|
| 13 |
|
---|
| 14 | function menuBtnChange() {
|
---|
| 15 | if (sidebar.classList.contains("open")) {
|
---|
| 16 | closeBtn.classList.replace("bx-menu", "bx-menu-alt-right");
|
---|
| 17 | } else {
|
---|
| 18 | closeBtn.classList.replace("bx-menu-alt-right", "bx-menu");
|
---|
| 19 | }
|
---|
| 20 | }
|
---|
| 21 |
|
---|
| 22 | menuBtnChange();
|
---|
| 23 |
|
---|
| 24 |
|
---|
| 25 | function toggleMode() {
|
---|
| 26 | const body = document.body;
|
---|
| 27 | const toggleIcon = document.querySelector('.bx-moon, .bx-sun'); // Select either moon or sun icon
|
---|
| 28 |
|
---|
| 29 | // Toggle light mode class on the body
|
---|
| 30 | body.classList.toggle('light-mode');
|
---|
| 31 |
|
---|
| 32 | // Update the icon based on the current mode
|
---|
| 33 | if (body.classList.contains('light-mode')) {
|
---|
| 34 | toggleIcon.classList.remove('bx-moon');
|
---|
| 35 | toggleIcon.classList.add('bx-sun');
|
---|
| 36 | } else {
|
---|
| 37 | toggleIcon.classList.remove('bx-sun');
|
---|
| 38 | toggleIcon.classList.add('bx-moon');
|
---|
| 39 | }
|
---|
| 40 | }
|
---|
| 41 |
|
---|
| 42 | function toggleSubmenu(submenuId) {
|
---|
| 43 | const submenu = document.getElementById(submenuId);
|
---|
| 44 | const allSubmenus = document.querySelectorAll('.submenu');
|
---|
| 45 |
|
---|
| 46 | // Close all other submenus
|
---|
| 47 | allSubmenus.forEach(menu => {
|
---|
| 48 | if (menu.id !== submenuId) {
|
---|
| 49 | menu.classList.remove('active');
|
---|
| 50 | }
|
---|
| 51 | });
|
---|
| 52 |
|
---|
| 53 | // Toggle the clicked submenu
|
---|
| 54 | submenu.classList.toggle('active');
|
---|
| 55 | } |
---|