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'],
+      subRoutes: ['home', 'introduction', 'blog', 'contact']
-      optionsVisible: window.innerWidth >= 768
+    }
+  },
+
+  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 {
+// #collapse-options {
-  @include media-breakpoint-down(sm) {
+//   @include media-breakpoint-down(sm) {
-    position: absolute;
+//     position: absolute;
-    z-index: 11;
+//     z-index: 11;
-    width: 100%;
+//     width: 100%;
-    border-bottom: $line;
+//     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;

src/store/modules/library.js

@@ -105,6 +105,9 @@ export default {
       const departIds = await dispatch('GET_ALL_NODES_IDS', 'depart')
       await dispatch('GET_NODES', { ids: departIds, dataLevel: 'initial' })
       dispatch('GET_ALL_TAGS')
+      if (state.nodebook && state.nodebook.length) {
+        commit('UPDATE_OPTIONS_VISIBILITY', false)
+      }
       return departIds
     },
 
@@ -147,6 +150,9 @@ export default {
     },
 
     async 'OPEN_NODE' ({ state, commit, dispatch }, { parentId, childId }) {
+      if (state.nodebook === undefined || !state.nodebook.length) {
+        commit('UPDATE_OPTIONS_VISIBILITY', false)
+      }
       const stack = state.nodebook.find(stack => stack[0] === parentId)
       commit('ADD_NODEBOOK_NODE', [stack, parentId, childId])
       dispatch('UPDATE_QUERY_NODES')
@@ -155,6 +161,9 @@ export default {
     'CLOSE_NODE' ({ state, commit, dispatch }, { parentId, childId }) {
       const stack = state.nodebook.find(stack => stack.includes(parentId) && (childId ? stack.includes(childId) : true))
       commit('REMOVE_NODEBOOK_NODE', [stack, childId || parentId])
+      if (!state.nodebook.length) {
+        commit('UPDATE_OPTIONS_VISIBILITY', true)
+      }
       dispatch('UPDATE_QUERY_NODES')
     },
 

src/store/nodes.js

@@ -14,9 +14,8 @@ import {
 export default {
   state: {
     nodes: {},
-
     history: [],
-
+    optionsVisible: true,
     // IDS
     ids: {
       // depart: undefined,
@@ -83,6 +82,10 @@ export default {
       for (const node of nodes) {
         addNode(node, dataLevel)
       }
+    },
+
+    'UPDATE_OPTIONS_VISIBILITY' (state, visible) {
+      state.optionsVisible = visible
     }
   },
 
@@ -140,6 +143,7 @@ export default {
     allNodes: state => state.nodes,
     // Args getters
     nodes: state => ids => ids.map(id => state.nodes[id]),
-    node: state => id => state.nodes[id]
+    node: state => id => state.nodes[id],
+    optionsVisible: state => state.optionsVisible
   }
 }