perf: style in mobile mode (#1065)

src/views/layout/components/AppMain.vue

@@ -26,6 +26,7 @@ export default {
 .app-main {
   /*84 = navbar + tags-view = 50 +34 */
   min-height: calc(100vh - 84px);
+  width: 100%;
   position: relative;
   overflow: hidden;
 }

src/views/layout/components/Navbar.vue

@@ -1,25 +1,27 @@
 <template>
-  <el-menu class="navbar" mode="horizontal">
+  <div class="navbar">
     <hamburger :toggle-click="toggleSideBar" :is-active="sidebar.opened" class="hamburger-container"/>
 
     <breadcrumb class="breadcrumb-container"/>
 
     <div class="right-menu">
-      <error-log class="errLog-container right-menu-item"/>
+      <template v-if="device!=='mobile'">
+        <error-log class="errLog-container right-menu-item"/>
 
-      <el-tooltip :content="$t('navbar.screenfull')" effect="dark" placement="bottom">
-        <screenfull class="screenfull right-menu-item"/>
-      </el-tooltip>
+        <el-tooltip :content="$t('navbar.screenfull')" effect="dark" placement="bottom">
+          <screenfull class="screenfull right-menu-item"/>
+        </el-tooltip>
 
-      <el-tooltip :content="$t('navbar.size')" effect="dark" placement="bottom">
-        <size-select class="international right-menu-item"/>
-      </el-tooltip>
+        <el-tooltip :content="$t('navbar.size')" effect="dark" placement="bottom">
+          <size-select class="international right-menu-item"/>
+        </el-tooltip>
 
-      <lang-select class="international right-menu-item"/>
+        <lang-select class="international right-menu-item"/>
 
-      <el-tooltip :content="$t('navbar.theme')" effect="dark" placement="bottom">
-        <theme-picker class="theme-switch right-menu-item"/>
-      </el-tooltip>
+        <el-tooltip :content="$t('navbar.theme')" effect="dark" placement="bottom">
+          <theme-picker class="theme-switch right-menu-item"/>
+        </el-tooltip>
+      </template>
 
       <el-dropdown class="avatar-container right-menu-item" trigger="click">
         <div class="avatar-wrapper">
@@ -43,7 +45,7 @@
         </el-dropdown-menu>
       </el-dropdown>
     </div>
-  </el-menu>
+  </div>
 </template>
 
 <script>
@@ -70,7 +72,8 @@ export default {
     ...mapGetters([
       'sidebar',
       'name',
-      'avatar'
+      'avatar',
+      'device'
     ])
   },
   methods: {