strated to displaying falgcollection on the left of results

web/themes/custom/materiotheme/assets/scripts/main.js

@@ -26,6 +26,7 @@ import router from 'vuejs/route'
 import VUserBlock from 'vuejs/components/Block/UserBlock'
 import VMainContent from 'vuejs/components/Content/MainContent'
 import VSearchBlock from 'vuejs/components/Block/SearchBlock'
+import VLeftContent from 'vuejs/components/Content/LeftContent'
 
 import { mapState } from 'vuex'
 
@@ -36,7 +37,7 @@ import 'theme/assets/styles/main.scss'
   const MaterioTheme = function () {
     let _v_sitebranding_block, _v_user_block, _v_header_menu,
       _v_pagetitle_block, _v_search_block,
-      _v_main_content
+      _v_main_content, _v_left_content
     const _is_front = drupalSettings.path.isFront
 
     console.log('drupalSettings', drupalSettings)
@@ -71,6 +72,7 @@ import 'theme/assets/styles/main.scss'
         initVHeaderMenu()
         initVMainContent()
         initVSearchBlock()
+        initVLeftContent()
       }
       initVUserBlock()
     }
@@ -268,7 +270,15 @@ import 'theme/assets/styles/main.scss'
         render: h => h(VSearchBlock, { props: { blockid: id, formhtml: formhtml } })
       }).$mount('#' + id)
     }
-
+    function initVLeftContent () {
+      const id = 'content-left'
+      const $leftContent = document.getElementById(id)
+      // in any case create the vue
+      _v_left_content = new Vue({
+        store,
+        render: h => h(VLeftContent, { props: { id: id } })
+      }).$mount('#' + id)
+    }
     init()
   } // end MaterioTheme()
 

web/themes/custom/materiotheme/assets/styles/base/_layout.scss

@@ -93,10 +93,22 @@ main[role="main"]{
   flex:1 1 auto;
   overflow-y: auto;
   overflow-x: hidden;
-  &>.wrapper{
+  >.scroller{
     width:100vw;
-    &>*{
+    >.wrapper{
       @extend %grided-width;
+      display: flex;
+      flex-direction: row-reverse;
+      #content-left{
+        flex-basis: $column_width*2+$column_goutiere;
+        // width:$column_width*2+$column_goutiere;
+        >*{
+          width:$column_width*2+$column_goutiere;
+        }
+      }
+      #content-center{
+        flex-basis: $column_width*10+$column_goutiere*9;
+      }
     }
   }
 }

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

@@ -390,6 +390,20 @@ aside.messages{
 // }
 
 
+//   ___         _           _       _         __ _
+//  / __|___ _ _| |_ ___ _ _| |_ ___| |   ___ / _| |_
+// | (__/ _ \ ' \  _/ -_) ' \  _|___| |__/ -_)  _|  _|
+//  \___\___/_||_\__\___|_||_\__|   |____\___|_|  \__|
+#content-left{
+  max-width:1px;
+  overflow-x: hidden;
+  transition: all 0.3s ease-in-out;
+  &.opened{
+    max-width: 500px;
+  }
+}
+
+
 //   __             _
 //  / _|_ _ ___ _ _| |_
 // |  _| '_/ _ \ ' \  _|