toggle search filers display

web/modules/custom/materio_sapi/materio_sapi.module

@@ -8,6 +8,8 @@
 use Drupal\Core\Routing\RouteMatchInterface;
 use Solarium\QueryType\Select\Query\Query;
 use Drupal\search_api\Query\QueryInterface;
+use Drupal\Core\Template\Attribute;
+
 /**
  * Implements hook_help().
  */
@@ -48,3 +50,20 @@ function materio_sapi_search_api_solr_query_alter(Query $solarium_query,  QueryI
   }
 
 }
+
+/**
+ * Prepares variables for fieldset element templates.
+ *
+ * Default template: fieldset.html.twig.
+ *
+ * @param array $variables
+ *   An associative array containing:
+ *   - element: An associative array containing the properties of the element.
+ *     Properties used: #attributes, #children, #description, #id, #title,
+ *     #value.
+ */
+function materio_sapi_preprocess_fieldset(&$variables) {
+  if (isset($variables['element']['#legend_attributes'])) {
+    $variables['legend']['attributes'] = new Attribute($variables['element']['#legend_attributes']);
+  }
+}

web/modules/custom/materio_sapi/src/Form/MaterioSapiSearchForm.php

@@ -47,9 +47,18 @@ class MaterioSapiSearchForm extends FormBase {
     ];
 
     $form['filters'] = [
-      '#type' => 'container'
+      '#type' => 'fieldset',
+      '#title' => t('Assisted Search'),
+      '#legend_attributes' => [
+        "class" => ["test-attribute"],
+        '@click.prevent' => "onClickFilters",
+      ]
     ];
 
+    // $form['filters']['switch'] = [
+    //   '#type' => "label",
+    //
+    // ]
     $query = \Drupal::entityQuery('taxonomy_term');
     $query->condition('vid', "assisted_research");
     $tids = $query->execute();

web/themes/custom/materiotheme/assets/styles/main.scss

@@ -595,9 +595,30 @@ header[role="banner"]{
         color:#666;
       }
 
-			#edit-filters{
+			fieldset#edit-filters{
 				grid-row: 2 / 2;
 				grid-column: 1 / span 2;
+				border: none;
+				padding: 0;
+				>legend{
+					line-height: 0.6;
+					padding-bottom: 0.2em;
+					width: 100%;
+					text-align: right;
+					span{
+						cursor: pointer;
+						font-size: 0.756em;
+						color: #8f8f8f;
+					}
+				}
+				> div.fieldset-wrapper{
+					height: 0;
+					overflow: hidden;
+				}
+				&.open >div.fieldset-wrapper{
+					height: auto;
+					overflow: visible;
+				}
 				.ss-main{
 					font-size: 0.756em;
 					.ss-single-selected{

web/themes/custom/materiotheme/vuejs/components/Form/SearchForm.vue

@@ -71,6 +71,11 @@ export default {
     onSelectFiltersChange(index, info){
       console.log('onSelectFiltersChange', index, info, this.filters)
       this.slimFilters[index] = info.value
+    },
+    onClickFilters(e){
+      console.log('onClickFilters legend', e)
+      e.target.closest('fieldset').classList.toggle('open')
+      // TODO: reset the filters oon close
     }
   },
   directives: {