// /**********************************
//  *  MENU SIDEBAR
//  * This script enables the toggle functionality for a sidebar menu,
//  * allowing it to be shown or hidden in response to user clicks on designated buttons.
//  **********************************/

// // Select all elements with the class '.sidebar-button' to attach click event listeners.
// let sidebarButtons = document.querySelectorAll(".sidebar-button");

// // Define a function to toggle the sidebar's visibility.
// const toggleSidebar = () => {
//   // Select the sidebar element by its class '.sidebar'.
//   const sidebar = document.querySelector(".sidebar");

//   // Toggle the 'active' class on the sidebar. When 'active', the sidebar is meant to be visible.
//   sidebar.classList.toggle("active");

//   // Ensure the sidebar has the 'open' class added whenever toggleSidebar is called.
//   // This line seems to always add 'open', which might be redundant or could be intended for initial opening animation.
//   // If the 'open' class is meant to always indicate an opened state, consider toggling it similarly to 'active'
//   // or managing its presence based on specific conditions for clarity and consistency.
//   sidebar.classList.add("open");
// };

// // Attach the toggleSidebar function as an event listener for click events on each sidebar button.
// // This allows the sidebar to be toggled whenever any of the designated buttons is clicked.
// sidebarButtons.forEach((button) =>
//   button.addEventListener("click", toggleSidebar)
// );


//-------------------


/**********************************
 *  MENU SIDEBAR
 * This script enables the toggle functionality for a sidebar menu,
 * allowing it to be shown or hidden in response to user clicks on designated buttons.
 **********************************/

// Select required elements
const sidebar = document.querySelector(".sidebar");
const sidebarButton = document.querySelectorAll(".sidebar-button");
const sidebarClose = document.querySelector(".sidebar-close");
const sidebarShadow = document.querySelector(".sidebar-shadow");
const sidebarWrapper = document.querySelector(".wrapper");

// Define a function to toggle the sidebar's visibility
const toggleSidebar = () => {
  if (!sidebar || !sidebarWrapper || !sidebarShadow) return;

  // Toggle the 'active' class on the elements
  sidebar.classList.toggle("active");
  sidebarWrapper.classList.toggle("active");
  sidebarShadow.classList.toggle("active");

  // Add the 'open' class to the sidebar if not already present
  if (!sidebar.classList.contains("open")) {
    sidebar.classList.add("open");
  }
};

// Add click event listeners to all sidebar buttons
if (sidebarButton) {
  sidebarButton.forEach((button) =>
    button.addEventListener("click", toggleSidebar)
  );
}

// Function to close the sidebar
const closeSidebar = () => {
  if (!sidebar || !sidebarWrapper || !sidebarShadow) return;

  // Remove the 'active' class from the elements
  sidebar.classList.remove("active");
  sidebarWrapper.classList.remove("active");
  sidebarShadow.classList.remove("active");
};

// Add a listener to close the sidebar when clicking on the sidebarShadow
if (sidebarShadow) {
  sidebarShadow.addEventListener("click", closeSidebar);
}

// Add a listener to close the sidebar when clicking on the sidebarClose
if (sidebarClose) {
  sidebarClose.addEventListener("click", closeSidebar);
}