js tweaks

js/mobile_facets.js

@@ -1,13 +1,16 @@
 (function (Drupal) {
+  'use strict'; // Good practice for stricter JS parsing
 
-// Select the parent container
-const sidebar = document.querySelector('.region--sidebar');
+  document.addEventListener('DOMContentLoaded', function () {
+    // Select the parent container
+    const sidebar = document.querySelector('.region--sidebar');
 
-// Check if the element exists
-if (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');
@@ -17,19 +20,9 @@ if (sidebar) {
           wrapper.appendChild(child);
         });
 
-    // Append the wrapper back to the sidebar (replacing the original children)
+        // Append the wrapper back to the sidebar
         sidebar.appendChild(wrapper);
-}
-// Select the parent container
-//const sidebar = document.querySelector('.region--sidebar');
 
-// Check if the element exists
-if (sidebar) {
-    // Select the existing wrapper
-    const wrapper = sidebar.querySelector('.facet-wrapper');
-    
-    // Check if the wrapper exists
-    if (wrapper) {
         // Create the button element
         const button = document.createElement('button');
         button.id = 'toggle-facets';
@@ -37,20 +30,17 @@ if (sidebar) {
 
         // Insert the button before the wrapper
         sidebar.insertBefore(button, wrapper);
-    }
-}
-  document.addEventListener("DOMContentLoaded", function () {
-    const toggleButton = document.getElementById("toggle-facets");
-    const facetWrapper = document.querySelector(
-      ".region--sidebar .facet-wrapper"
-    );
-
-    if (toggleButton && facetWrapper) {
-      toggleButton.addEventListener("click", function () {
-        const isHidden =
-          facetWrapper.style.display === "none" || !facetWrapper.style.display; // Accounts for CSS default
-        facetWrapper.style.display = isHidden ? "block" : "none";
+
+        // 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);

templates/region--sidebar--mobile-facets.html.twig

@@ -1,31 +0,0 @@
-{#
-/**
- * @file
- * Olivesbdh's theme override to display the sidebar region.
- *
- * Available variables:
- * - content: The content for this region, typically blocks.
- * - attributes: HTML attributes for the region <div>.
- * - region: The name of the region variable as defined in the theme's
- *   .info.yml file.
- *
- * @see template_preprocess_region()
- */
-#}
-{%
-  set classes = [
-    'region',
-    'region--' ~ region|clean_class,
-  ]
-%}
-
-{{ attach_library('olivesbdh/sidebar') }}
-
-{% if content %}
-  <aside{{ attributes.addClass(classes) }}>
-	{#<button id="toggle-facets">Search the Collection</button>#}
-    <div class="facet-wrapper">
-    {{ content }}
-    </div>
-  </aside>
-{% endif %}

templates/region--sidebar.html.twig

@@ -1,31 +0,0 @@
-{#
-/**
- * @file
- * Olivesbdh's theme override to display the sidebar region.
- *
- * Available variables:
- * - content: The content for this region, typically blocks.
- * - attributes: HTML attributes for the region <div>.
- * - region: The name of the region variable as defined in the theme's
- *   .info.yml file.
- *
- * @see template_preprocess_region()
- */
-#}
-{%
-  set classes = [
-    'region',
-    'region--' ~ region|clean_class,
-  ]
-%}
-
-{{ attach_library('olivesbdh/sidebar') }}
-
-{% if content %}
-  <aside{{ attributes.addClass(classes) }}>
-	{#<button id="toggle-facets">Search the Collection</button>#}
-    <div class="facet-wrapper">
-    {{ content }}
-    </div>
-  </aside>
-{% endif %}