Добавил возможность скрытия тулбара

client/components/Reader/Reader.vue

@@ -1,6 +1,6 @@
 <template>
     <el-container>
-        <el-header height='50px'>
+        <el-header v-show="toolBarActive" height='50px'>
             <div class="header">
                 <el-tooltip content="Загрузить книгу" :open-delay="1000" effect="light">
                     <el-button ref="loader" class="tool-button" :class="buttonActiveClass('loader')" @click="buttonClick('loader')"><i class="el-icon-back"></i></el-button>
@@ -46,7 +46,7 @@
 
         <el-main>
             <keep-alive>
-                <component ref="page" :is="pageActive" @load-book="loadBook" @book-pos-changed="bookPosChanged"></component>
+                <component ref="page" :is="pageActive" @load-book="loadBook" @book-pos-changed="bookPosChanged" @tool-bar-toggle="toolBarToggle"></component>
             </keep-alive>
         </el-main>
     </el-container>
@@ -163,10 +163,18 @@ class Reader extends Vue {
         return this.reader.fullScreenActive;
     }
 
+    get toolBarActive() {
+        return this.reader.toolBarActive;
+    }
+
     get lastOpenedBook() {
         return this.$store.getters['reader/lastOpenedBook'];
     }
 
+    toolBarToggle() {
+        this.commit('reader/setToolBarActive', !this.toolBarActive);
+    }
+
     buttonClick(button) {
         switch (button) {
             case 'loader': this.loaderActive = !this.loaderActive; break;

client/components/Reader/TextPage/TextPage.vue

@@ -1,6 +1,6 @@
 <template>
     <div ref="main" class="main">
-        <canvas ref="canvas" class="canvas"></canvas>
+        <canvas ref="canvas" class="canvas" @click="canvasClick"></canvas>
     </div>
 </template>
 
@@ -306,6 +306,11 @@ class TextPage extends Vue {
             }
         }
     }
+
+    canvasClick(event) {
+        console.log(event);
+        this.$emit('tool-bar-toggle');
+    }
 }
 //-----------------------------------------------------------------------------
 </script>

client/store/modules/reader.js

@@ -3,6 +3,7 @@ import Vue from 'vue';
 // initial state
 const state = {
     fullScreenActive: false,
+    toolBarActive: true,
     openedBook: {},
 };
 
@@ -30,6 +31,9 @@ const mutations = {
     setFullScreenActive(state, value) {
         state.fullScreenActive = value;
     },
+    setToolBarActive(state, value) {
+        state.toolBarActive = value;
+    },
     setOpenedBook(state, value) {
         Vue.set(state.openedBook, value.key, Object.assign({}, value, {touchTime: Date.now()}));
     },