Работа над боковой панелью

client/components/App.vue

@@ -1,26 +1,34 @@
 <template>
     <el-container>
         <el-aside :width="asideWidth">
-            {{ appName }}
+            <div class="app-name"><span v-html="appName"></span></div>
             <el-button class="el-button-collapse" @click="toggleCollapse" :icon="buttonCollapseIcon"></el-button>
-            <el-menu default-active="1" class="el-menu-vertical" @select="handleSelect" :collapse="isCollapse">
-              <el-menu-item index="1">
+            <el-menu class="el-menu-vertical" @select="handleSelect" :collapse="isCollapse">
+              <el-menu-item index="cardindex">
                 <i class="el-icon-search"></i>
                 <span slot="title">Картотека</span>
               </el-menu-item>
-              <el-menu-item index="2">
+              <el-menu-item index="reader">
+                <i class="el-icon-tickets"></i>
+                <span slot="title">Читалка</span>
+              </el-menu-item>
+              <el-menu-item index="forum" disabled>
+                <i class="el-icon-message"></i>
+                <span slot="title">Форум-чат</span>
+              </el-menu-item>
+              <el-menu-item index="newbooks">
+                <i class="el-icon-upload"></i>
+                <span slot="title">Поступления</span>
+              </el-menu-item>
+              <el-menu-item index="sources">
                 <i class="el-icon-menu"></i>
                 <span slot="title">Источники</span>
               </el-menu-item>
-              <el-menu-item index="3" disabled>
-                <i class="el-icon-message"></i>
-                <span slot="title">Форум</span>
-              </el-menu-item>
-              <el-menu-item index="4">
+              <el-menu-item index="settings">
                 <i class="el-icon-setting"></i>
                 <span slot="title">Параметры</span>
               </el-menu-item>
-              <el-menu-item index="5">
+              <el-menu-item index="help">
                 <i class="el-icon-question"></i>
                 <span slot="title">Справка</span>
               </el-menu-item>
@@ -80,7 +88,7 @@ class App extends Vue {
         if (this.uistate.asideBarCollapse) {
             return '64px';
         } else {
-            return '170px';
+            return '160px';
         }
     }
 
@@ -93,7 +101,10 @@ class App extends Vue {
     }
 
     get appName() {
-        return `${this.config.name} v${this.config.version}`;
+        if (this.isCollapse)
+            return '<br><br>';
+        else
+            return `${this.config.name} <br>v${this.config.version}`;
     }
 
     get apiError() {
@@ -103,6 +114,13 @@ class App extends Vue {
 </script>
 
 <style scoped>
+.app-name {
+    margin-left: 10px;
+    margin-top: 10px;
+    text-align: center;
+    line-height: 140%;
+    font-weight: bold;
+}
 .el-container {
     height: 100%;
 }
@@ -138,8 +156,10 @@ class App extends Vue {
     margin-top: 5px;
     width: 100%;
     border: 0;
- }
-
+}
+.el-menu-item {
+    font-size: 80%;
+}
 </style>
 
 <style>
@@ -147,5 +167,6 @@ body, html, #app {
     margin: 0;
     padding: 0;
     height: 100%;
+    font: normal 12pt Arial, Verdana, Sans-serif;
 }
 </style>