Добавление кнопочек на тулбар

client/components/Reader/Reader.vue

@@ -1,14 +1,24 @@
 <template>
     <el-container>
         <el-header height='50px'>
+        <div class="header">
             <el-button plain class="tool-button" @click="doBack"><i class="el-icon-back"></i></el-button>
-            <div class="space"></div>
-            <el-button plain class="tool-button" @click="" ><i class="el-icon-arrow-left"></i></el-button>
-            <el-button plain class="tool-button" @click="" ><i class="el-icon-arrow-right"></i></el-button>
-            <div class="space"></div>
-            <el-button plain class="tool-button" @click=""><i class="el-icon-rank"></i></el-button>
 
+            <div>
+                <el-button plain class="tool-button" @click="" ><i class="el-icon-arrow-left"></i></el-button>
+                <el-button plain class="tool-button" @click="" ><i class="el-icon-arrow-right"></i></el-button>
+                <div class="space"></div>
+                <el-button plain class="tool-button" @click=""><i class="el-icon-rank"></i></el-button>
+                <el-button plain class="tool-button" @click=""><i class="el-icon-d-arrow-right"></i></el-button>
+                <el-button plain class="tool-button" @click=""><i class="el-icon-sort"></i></el-button>
+                <el-button plain class="tool-button" @click=""><i class="el-icon-search"></i></el-button>
+                <el-button plain class="tool-button" @click=""><i class="el-icon-refresh"></i></el-button>                
+                <div class="space"></div>
+                <el-button plain class="tool-button" @click=""><i class="el-icon-document"></i></el-button>
+            </div>
 
+            <el-button plain class="tool-button" @click=""><i class="el-icon-setting"></i></el-button>            
+        </div>
         </el-header>
 
         <el-main>
@@ -35,10 +45,6 @@ class Reader extends Vue {
 </script>
 
 <style scoped>
-i {
-    font-size: 240%;
-}
-
 .el-container {
     padding: 0;
     margin: 0;
@@ -46,11 +52,20 @@ i {
 }
 
 .el-header {
-    padding-left: 7px;
+    padding-left: 5px;
+    padding-right: 5px;
     background-color: #1B695F;
     color: #000;
+    overflow-x: auto;
+    overflow-y: hidden;
 }
   
+.header {
+    display: flex;
+    justify-content: space-between;
+    min-width: 500px;
+}
+
 .el-main {
     padding: 0;
     margin: 0;
@@ -60,6 +75,8 @@ i {
 
 .tool-button {
     margin: 0;
+    margin-left: 2px;
+    margin-right: 2px;
     padding: 0;
     background-color: #E6EDF4;
     margin-top: 5px;
@@ -68,6 +85,11 @@ i {
     border: 0;
 }
 
+i {
+    font-size: 200%;
+    color: #806142;
+}
+
 .space {
     width: 10px;
     display: inline-block;