perf[Navbar]: refactor navbar style

src/views/layout/components/Navbar.vue

@@ -9,17 +9,17 @@
         <error-log class="errLog-container right-menu-item"/>
 
         <el-tooltip :content="$t('navbar.screenfull')" effect="dark" placement="bottom">
-          <screenfull class="screenfull right-menu-item"/>
+          <screenfull class="right-menu-item"/>
         </el-tooltip>
 
         <el-tooltip :content="$t('navbar.size')" effect="dark" placement="bottom">
-          <size-select class="international right-menu-item"/>
+          <size-select class="right-menu-item"/>
         </el-tooltip>
 
-        <lang-select class="international right-menu-item"/>
+        <lang-select class="right-menu-item"/>
 
         <el-tooltip :content="$t('navbar.theme')" effect="dark" placement="bottom">
-          <theme-picker class="theme-switch right-menu-item"/>
+          <theme-picker class="theme-picker right-menu-item"/>
         </el-tooltip>
       </template>
 
@@ -92,42 +92,52 @@ export default {
 <style rel="stylesheet/scss" lang="scss" scoped>
 .navbar {
   height: 50px;
-  line-height: 50px;
-  border-radius: 0px !important;
+  overflow: hidden;
+
   .hamburger-container {
-    line-height: 58px;
-    height: 50px;
+    line-height: 46px;
+    height: 100%;
     float: left;
-    padding: 0 10px;
+    cursor: pointer;
+    transition: background .3s;
+    &:hover {
+      background: rgba(0, 0, 0, .025)
+    }
   }
-  .breadcrumb-container{
+
+  .breadcrumb-container {
     float: left;
   }
+
   .errLog-container {
     display: inline-block;
     vertical-align: top;
   }
+
   .right-menu {
     float: right;
     height: 100%;
-    &:focus{
-     outline: none;
+    line-height: 50px;
+
+    &:focus {
+      outline: none;
     }
+
     .right-menu-item {
+      cursor: pointer;
       display: inline-block;
-      margin: 0 8px;
-    }
-    .screenfull {
-      height: 20px;
-    }
-    .international{
-      vertical-align: top;
-    }
-    .theme-switch {
-      vertical-align: 15px;
+      padding: 0 8px;
+      height: 100%;
+      font-size: 20px;
+      color: #5a5e66;
+      vertical-align: text-bottom;
+      transition: background .3s;
+      &:hover {
+        background: rgba(0, 0, 0, .025)
+      }
     }
+
     .avatar-container {
-      height: 50px;
       margin-right: 30px;
       .avatar-wrapper {
         margin-top: 5px;
@@ -138,6 +148,7 @@ export default {
           height: 40px;
           border-radius: 10px;
         }
+
         .el-icon-caret-bottom {
           cursor: pointer;
           position: absolute;