give more control over options display

src/pages/_partials/MainHeader.vue

@@ -67,8 +67,16 @@ export default {
         { to: 'kit', variant: 'kit' },
         { to: 'gallery', variant: 'creation' }
       ],
-      subRoutes: ['home', 'introduction', 'blog', 'contact'],
-      optionsVisible: window.innerWidth >= 768
+      subRoutes: ['home', 'introduction', 'blog', 'contact']
+    }
+  },
+
+  computed: {
+    optionsVisible: {
+      get () { return this.$store.state.optionsVisible },
+      set (value) {
+        this.$store.commit('UPDATE_OPTIONS_VISIBILITY', value)
+      }
     }
   }
 }
@@ -224,12 +232,12 @@ export default {
   }
 }
 
-#collapse-options {
-  @include media-breakpoint-down(sm) {
-    position: absolute;
-    z-index: 11;
-    width: 100%;
-    border-bottom: $line;
-  }
-}
+// #collapse-options {
+//   @include media-breakpoint-down(sm) {
+//     position: absolute;
+//     z-index: 11;
+//     width: 100%;
+//     border-bottom: $line;
+//   }
+// }
 </style>

src/pages/library/LibraryOptions.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="show" class="library-options">
+  <div class="library-options">
     <b-form-group
       class="mode-select-group"
       :label="$t('options.display.title')"
@@ -117,10 +117,6 @@ export default {
       'strangeness'
     ]),
 
-    show () {
-      return this.nodebook.length === 0
-    },
-
     activeNodeId: {
       get () { return this.nodeDepartId },
       set (value) {
@@ -231,7 +227,7 @@ export default {
     }
 
     .filters-group {
-      width: 100%;
+      flex-grow: 2;
 
       @include media-breakpoint-up($layout-bp) {
         max-width: 450px;