1st

css/mobile_facets.css

@@ -0,0 +1,58 @@
+/*mobile search facets*/
+.region--sidebar {
+  .block {
+    /*display: none;*/
+    margin-bottom: 2em;
+  }
+  .block.hidden {
+    /*display: none !important;*/
+  }
+}
+
+@media (max-width: 1000px) {
+  .facet-wrapper {
+    display: none;
+  }
+  #toggle-facets {
+    background-color: var(--color--bdh-red);
+  transition: filter 0.2s ease; /* Optional: smooth transition */
+  font-size:1em;
+    color: white;
+    border: none;
+    padding: 10px 15px;
+    border-radius: 4px;
+    cursor: pointer;
+    /*temp*/
+    display: block;
+    width: 100%;
+    &:hover {
+      filter: brightness(1.5); /* Lightens by 10% */
+    }
+  }
+  .sidebar-grid {
+    display: grid;
+    grid-template-columns: 1fr; /* Single column for vertical stacking */
+    gap: 1rem; /* Optional: adds space between items */
+  }
+  .sidebar-grid .region--sidebar {
+    grid-column: 1 / 15;
+  }
+
+  main {
+    order: 2; /* Places main after aside visually */
+  }
+
+  aside {
+    order: 1; /* Places aside before main visually */
+  }
+  .sidebar-grid > .site-main {
+    grid-column: 1 / 15;
+    align-self: flex-start;
+  }
+}
+
+@media (min-width: 1001px) {
+  #toggle-facets {
+    display: none;
+  }
+}

js/mobile_facets.js

@@ -0,0 +1,16 @@
+(function (Drupal) {
+  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";
+      });
+    }
+  });
+})(Drupal);

mobile_facets.info.yml

@@ -0,0 +1,5 @@
+name: 'Mobile Facets'
+type: module
+description: 'Attaches mobile facets CSS/JS and overrides the sidebar region template.'
+core_version_requirement: ^10
+package: Custom

mobile_facets.libraries.yml

@@ -0,0 +1,8 @@
+mobile_facets:
+  css:
+    theme:
+      css/mobile_facets.css: {}
+  js:
+    js/mobile_facets.js: {}
+  dependencies:
+    - core/drupal

mobile_facets.module

@@ -0,0 +1,29 @@
+<?php
+
+use Drupal\Core\Render\AttachmentsTrait;
+
+/**
+ * Implements hook_page_attachments().
+ */
+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.new

@@ -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 %}