Drawers

				
					
document.addEventListener("DOMContentLoaded", function () {
  // Set initial tabindex to -1 for all drawer links and close buttons
  const drawerLinks = document.querySelectorAll(".drawer-content a");
  drawerLinks.forEach((link) => {
    link.tabIndex = -1;
  });

  const closeButtons = document.querySelectorAll(".close-button");
  closeButtons.forEach((button) => {
    button.tabIndex = -1;
  });

  // Logic for opening/closing drawers
  const buttons = document.querySelectorAll(".drawer-button");
  const closeButton = document.querySelectorAll(".close-button");

  // Function to close all drawers
  function closeAllDrawers() {
    const allDrawers = document.querySelectorAll(".drawer");
    allDrawers.forEach((drawer) => {
      drawer.style.transform = "scale(0)";
      drawer.style.opacity = "0";
      drawer.setAttribute("aria-hidden", "true");
      drawer.style.pointerEvents = "none";
      drawer.style.userSelect = "none";
    });
  }

  // Function to close a specific drawer
  function closeDrawer(drawer) {
    drawer.style.transform = "scale(0)";
    drawer.style.opacity = "0";
    drawer.setAttribute("aria-hidden", "true");
    drawer.style.pointerEvents = "none";
    drawer.style.userSelect = "none";
  }

  // Event listeners for opening drawers
  buttons.forEach((button) => {
    button.addEventListener("click", function () {
      // Close all drawers before opening a new one
      closeAllDrawers();

      const direction = button.getAttribute("data-direction");
      const selectedDrawer = document.querySelector(`.drawer.${direction}`);

      // Open the selected drawer
      selectedDrawer.style.transform = "scale(1)";
      selectedDrawer.style.opacity = "1";
      selectedDrawer.setAttribute("aria-hidden", "false");

      // Move focus into the opened drawer
      selectedDrawer.querySelector("a").focus();

      // Enable links in the opened drawer for focus
      const drawerLinks = selectedDrawer.querySelectorAll(".drawer-content a");
      drawerLinks.forEach((link) => {
        link.tabIndex = 0;
      });

      // Enable close button for focus
      const closeBtn = selectedDrawer.querySelector(".close-button");
      closeBtn.tabIndex = 0;

      // Enable pointer events and user selection for the opened drawer
      selectedDrawer.style.pointerEvents = "auto";
      selectedDrawer.style.userSelect = "auto";

      // Add class to body to enable overlay and borders
      document.body.classList.add("drawer-open");

      // Trap focus inside the opened drawer
      selectedDrawer.addEventListener("keydown", trapFocus);
    });
  });

  // Event listeners for closing drawers
  closeButton.forEach((button) => {
    button.addEventListener("click", function () {
      const drawer = button.closest(".drawer");

      // Find the button that triggered the opening of this drawer
      const associatedButton = document.querySelector(
        `.drawer-button[data-direction="${drawer.classList[1]}"]`
      );

      // Close the drawer
      closeDrawer(drawer);

      // Disable links in the closed drawer for focus
      const drawerLinks = drawer.querySelectorAll(".drawer-content a");
      drawerLinks.forEach((link) => {
        link.tabIndex = -1;
      });

      // Disable close button for focus
      button.tabIndex = -1;

      // Move focus back to the associated button that triggered opening this drawer
      associatedButton.focus();

      // Remove class from body to disable overlay and borders
      document.body.classList.remove("drawer-open");

      // Remove focus trap when drawer is closed
      drawer.removeEventListener("keydown", trapFocus);
    });
  });

  // Log clicked element for debugging
  document.addEventListener("click", function (event) {
    console.log("Clicked Element:", event.target);
  });

  // Function to trap focus inside the opened drawer
  function trapFocus(event) {
    const focusableElements = event.currentTarget.querySelectorAll(
      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
    );
    const firstFocusable = focusableElements[0];
    const lastFocusable =
      focusableElements[focusableElements.length - 1];

    if (event.key === "Tab") {
      if (
        event.shiftKey &&
        document.activeElement === firstFocusable
      ) {
        lastFocusable.focus();
        event.preventDefault();
      } else if (
        !event.shiftKey &&
        document.activeElement === lastFocusable
      ) {
        firstFocusable.focus();
        event.preventDefault();
      }
    }
  }
});