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 | } |
---|