facet hide

js/mobile_facets.js

@@ -1,4 +1,44 @@
 (function (Drupal) {
+
+// 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);
+    
+    // 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 (replacing the original children)
+    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';
+        button.textContent = 'Search the Collection';
+        
+        // Insert the button before the wrapper
+        sidebar.insertBefore(button, wrapper);
+    }
+}
   document.addEventListener("DOMContentLoaded", function () {
     const toggleButton = document.getElementById("toggle-facets");
     const facetWrapper = document.querySelector(

mobile_facets.module

@@ -8,22 +8,3 @@ use Drupal\Core\Render\AttachmentsTrait;
 function mobile_facets_page_attachments(array &$attachments) {
   $attachments['#attached']['library'][] = 'mobile_facets/mobile_facets';
 }
-
-/**
- * Implements hook_theme_registry_alter().
- */
-function mobile_facets_theme_registry_alter(array &$theme_registry) {
-  // Get the active theme name (optional: to target a specific theme).
-  $active_theme = \Drupal::service('theme.manager')->getActiveTheme()->getName();
-  
-  // Optional: Restrict to a specific theme (e.g., 'my_custom_theme') to avoid affecting admin themes.
-  // if ($active_theme !== 'my_custom_theme') {
-  //   return;
-  // }
-  
-  // Set the path for the 'region' theme hook to your module's templates directory.
-  if (isset($theme_registry['region']['path'])) {
-    $module_path = \Drupal::service('extension.list.module')->getPath('mobile_facets');
-    $theme_registry['region']['path'] = $module_path . '/templates';
-  }
-}

templates/region--sidebar.html.twig

@@ -0,0 +1,31 @@
+{#
+/**
+ * @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 %}