collapsible filters

app/dashboard/templates/dashboard/index.html

@@ -62,8 +62,11 @@
       </div>
     </div>
 
-    <div class="col-lg-auto pt-1 flex-grow-1">
-      <div class="float-right">
+    <div id="filter-app" class="col-lg-auto pt-1 flex-grow-1">
+      <div class="float-right d-flex">
+
+        <!-- Filter Control -->
+        <div v-if="showFilter" id="filter-control">
           <form method="get" class="form-inline">
             <select name="sort"
                     onchange="this.form.submit()"
@@ -110,6 +113,15 @@
             {% endif %}
           </form>
         </div>
+
+        <a v-if="!showFilter" @click="toggleFilter()" class="btn btn-secondary">
+          <i class="fe fe-chevrons-left"></i> Filters
+        </a>
+
+        <a v-if="showFilter" @click="toggleFilter()" class="btn btn-outline-secondary">
+          <i class="fe fe-chevrons-right"></i>
+        </a>
+      </div>
     </div>
   </div>
 
@@ -582,4 +594,26 @@
 
     })
   </script>
+
+  <script src="{{ url_for('static', filename='node_modules/vue/dist/vue.min.js') }}"></script>
+  <script>
+    var app = new Vue({
+      el: '#filter-app',
+      delimiters: ["[[", "]]"], // necessary to avoid conflict with jinja
+      data: {
+        showFilter: false
+      },
+      methods: {
+        async toggleFilter() {
+          let that = this;
+          that.showFilter = !that.showFilter;
+          store.set('showFilter', that.showFilter);
+        }
+      },
+      async mounted() {
+        if (store.get("showFilter"))
+          this.showFilter = true;
+      }
+    })
+  </script>
 {% endblock %}