mobile_facets/js/mobile_facets.js

(function (Drupal) {
  'use strict'; // Good practice for stricter JS parsing

  document.addEventListener('DOMContentLoaded', function () {
    // Select the parent container
    const sidebar = document.querySelector('.region--sidebar');

    // Check if the element exists
    if (sidebar) {
      // Get all direct children
      const children = Array.from(sidebar.children);

      if (children.length > 0) { // Optional: Skip if no children
        // Create the wrapper div
        const wrapper = document.createElement('div');
        wrapper.classList.add('facet-wrapper');

        // Move each child into the wrapper
        children.forEach(child => {
          wrapper.appendChild(child);
        });

        // Append the wrapper back to the sidebar
        sidebar.appendChild(wrapper);

        // Create the button element
        const button = document.createElement('button');
        button.id = 'toggle-facets';
        button.textContent = 'Search the Collection';

        // Insert the button before the wrapper
        sidebar.insertBefore(button, wrapper);

        // Wire up the toggle (now after elements exist)
        const toggleButton = document.getElementById('toggle-facets');
        if (toggleButton) { // Extra safety, though it should exist
          toggleButton.addEventListener('click', function () {
            const computedStyle = window.getComputedStyle(facetWrapper);
            const isHidden = computedStyle.display === 'none';
            facetWrapper.style.display = isHidden ? 'block' : 'none';
          });
        }
      }
    }
  });
})(Drupal);