Moved secondary header to spell list

src/App.vue

@@ -1,15 +1,10 @@
 <template>
   <div id="q-app">
     <q-layout class="bg-light">
-      <nav-header-primary
+      <nav-header
         slot="header"
         class="toolbar dark"
-      ></nav-header-primary>
-
-      <nav-header-secondary
-        slot="header"
-        class="toolbar dark"
-      ></nav-header-secondary>
+      ></nav-header>
 
       <div class="layout-view">
         <router-view></router-view>
@@ -28,12 +23,10 @@ import { Loading, Dialog } from 'quasar'
 import Vue from 'vue'
 import 'whatwg-fetch'
 import { state, dispatch } from './store'
-import HeaderPrimary from './components/Headerprimary'
-import HeaderSecondary from './components/Headersecondary'
+import Header from './components/Header'
 import Footer from './components/Footer'
 
-Vue.component('nav-header-primary', HeaderPrimary)
-Vue.component('nav-header-secondary', HeaderSecondary)
+Vue.component('nav-header', Header)
 Vue.component('nav-footer', Footer)
 
 function fetchSuccess (data) {

src/components/Filter.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="row">
     <q-select
       type="list"
       v-model="state.sortBy"
@@ -7,7 +7,6 @@
     ></q-select>
 
     <q-search
-      class="dark"
       v-model="state.search"
       @input="searchChanged"
     ></q-search>
@@ -60,5 +59,9 @@ export default {
 }
 </script>
 
-<style>
+<style scoped lang="stylus">
+  .row
+    padding: 1em
+  .q-picker-textfield
+    margin-right: 1em
 </style>

src/components/Spelllist.vue

@@ -1,4 +1,6 @@
 <template>
+  <div class="spell-list-container">
+    <nav-filter></nav-filter>
     <section class="spell-list list striped no-border" id="spell_list">
       <label
         is="spell-item"
@@ -13,15 +15,18 @@
         :max="numPages"
       ></q-pagination>
     </section>
+  </div>
 </template>
 
 <script>
 import Vue from 'vue'
 import { Utils } from 'quasar'
 import Query from '../query'
+import Filter from './Filter'
 import SpellItem from './Spellitem'
 import { state } from '../store'
 
+Vue.component('nav-filter', Filter)
 Vue.component('spell-item', SpellItem)
 
 export default {