feature: add sidebar logo (#1767)

src/layout/Layout.vue

@@ -66,11 +66,13 @@ export default {
     position: relative;
     height: 100%;
     width: 100%;
-    &.mobile.openSidebar{
+
+    &.mobile.openSidebar {
       position: fixed;
       top: 0;
     }
   }
+
   .drawer-bg {
     background: #000;
     opacity: 0.3;
@@ -80,18 +82,21 @@ export default {
     position: absolute;
     z-index: 999;
   }
-  .fixed-header{
+
+  .fixed-header {
     position: fixed;
     top: 0;
     right: 0;
     z-index: 9;
     width: calc(100% - #{$sideBarWidth});
-     transition: width 0.28s;
+    transition: width 0.28s;
   }
-  .hideSidebar .fixed-header{
-     width: calc(100% - 54px)
+
+  .hideSidebar .fixed-header {
+    width: calc(100% - 54px)
   }
-  .mobile .fixed-header{
+
+  .mobile .fixed-header {
     width: 100%;
   }
 </style>

src/layout/components/AppMain.vue

@@ -24,7 +24,7 @@ export default {
 
 <style rel="stylesheet/scss" lang="scss" scoped>
 .app-main {
-  /*50= navbar  50  */
+  /* 50= navbar  50  */
   min-height: calc(100vh - 50px);
   width: 100%;
   position: relative;
@@ -32,17 +32,17 @@ export default {
 }
 
 .fixed-header+.app-main {
-  margin-top: 50px;
+  padding-top: 50px;
 }
 
 .hasTagsView {
   .app-main {
-    /*84 = navbar + tags-view = 50 + 34 */
+    /* 84 = navbar + tags-view = 50 + 34 */
     min-height: calc(100vh - 84px);
   }
 
   .fixed-header+.app-main {
-    margin-top: 80px;
+    padding-top: 80px;
   }
 }
 </style>

src/layout/components/Navbar.vue

@@ -105,6 +105,7 @@ export default {
     float: left;
     cursor: pointer;
     transition: background .3s;
+    -webkit-tap-highlight-color:transparent;
 
     &:hover {
       background: rgba(0, 0, 0, .025)

src/layout/components/Settings/index.vue

@@ -20,6 +20,11 @@
         <el-switch v-model="fixedHeader" class="drawer-switch" />
       </div>
 
+      <div class="drawer-item">
+        <span>侧边栏 Logo</span>
+        <el-switch v-model="sidebarLogo" class="drawer-switch" />
+      </div>
+
     </div>
   </div>
 </template>
@@ -31,7 +36,7 @@ export default {
   components: { ThemePicker },
   data() {
     return {
-      sidebarLogo: true
+
     }
   },
   computed: {
@@ -56,6 +61,17 @@ export default {
           value: val
         })
       }
+    },
+    sidebarLogo: {
+      get() {
+        return this.$store.state.settings.sidebarLogo
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'sidebarLogo',
+          value: val
+        })
+      }
     }
   }
 }

src/layout/components/Sidebar/Logo.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="sidebar-logo-container" :class="{'collapse':collapse}">
+    <transition name="sidebarLogoFade">
+      <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
+        <img v-if="logo" :src="logo" class="sidebar-logo">
+        <h1 v-else class="sidebar-title">{{ title }} </h1>
+      </router-link>
+      <router-link v-else key="expand" class="sidebar-logo-link" to="/">
+        <img v-if="logo" :src="logo" class="sidebar-logo">
+        <h1 class="sidebar-title">{{ title }} </h1>
+      </router-link>
+    </transition>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SidebarLogo',
+  props: {
+    collapse: {
+      type: Boolean,
+      required: true
+    }
+  },
+  data() {
+    return {
+      title: 'Vue Element Admin',
+      logo: 'https://wpimg.wallstcn.com/69a1c46c-eb1c-4b46-8bd4-e9e686ef5251.png'
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.sidebarLogoFade-enter-active {
+  transition: opacity 1.5s;
+}
+
+.sidebarLogoFade-enter,
+.sidebarLogoFade-leave-to {
+  opacity: 0;
+}
+
+.sidebar-logo-container {
+  position: relative;
+  width: 100%;
+  height: 50px;
+  line-height: 50px;
+  background: #2b2f3a;
+  text-align: center;
+  overflow: hidden;
+
+  & .sidebar-logo-link {
+    height: 100%;
+    width: 100%;
+
+    & .sidebar-logo {
+      width: 32px;
+      height: 32px;
+      vertical-align: middle;
+      margin-right: 12px;
+    }
+
+    & .sidebar-title {
+      display: inline-block;
+      margin: 0;
+      color: #fff;
+      font-weight: 600;
+      line-height: 50px;
+      font-size: 14px;
+      font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
+      vertical-align: middle;
+    }
+  }
+
+  &.collapse {
+    .sidebar-logo {
+      margin-right: 0px;
+    }
+  }
+}
+</style>

src/layout/components/Sidebar/index.vue

@@ -1,31 +1,38 @@
 <template>
-  <el-scrollbar wrap-class="scrollbar-wrapper">
-    <el-menu
-      :default-active="$route.path"
-      :collapse="isCollapse"
-      :background-color="variables.menuBg"
-      :text-color="variables.menuText"
-      :active-text-color="variables.menuActiveText"
-      :collapse-transition="false"
-      mode="vertical"
-    >
-      <sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path" />
-    </el-menu>
-  </el-scrollbar>
+  <div :class="{'has-logo':showLogo}">
+    <logo v-if="showLogo" :collapse="isCollapse" />
+    <el-scrollbar wrap-class="scrollbar-wrapper">
+      <el-menu
+        :default-active="$route.path"
+        :collapse="isCollapse"
+        :background-color="variables.menuBg"
+        :text-color="variables.menuText"
+        :active-text-color="variables.menuActiveText"
+        :collapse-transition="false"
+        mode="vertical"
+      >
+        <sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path" />
+      </el-menu>
+    </el-scrollbar>
+  </div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
+import Logo from './Logo'
 import SidebarItem from './SidebarItem'
 import variables from '@/styles/variables.scss'
 
 export default {
-  components: { SidebarItem },
+  components: { SidebarItem, Logo },
   computed: {
     ...mapGetters([
       'permission_routes',
       'sidebar'
     ]),
+    showLogo() {
+      return this.$store.state.settings.sidebarLogo
+    },
     variables() {
       return variables
     },

src/settings.js

@@ -19,6 +19,12 @@ export default {
    */
   fixedHeader: true,
 
+  /**
+   * @type {boolean} true | false
+   * @description Whether show the logo in sidebar
+   */
+  sidebarLogo: true,
+
   /**
    * @type {string | array} 'production' | ['production','development']
    * @description Need show err logs component.

src/store/modules/settings.js

@@ -1,10 +1,11 @@
 import defaultSettings from '@/settings'
-const { showSettings, tagsView, fixedHeader } = defaultSettings
+const { showSettings, tagsView, fixedHeader, sidebarLogo } = defaultSettings
 
 const state = {
   showSettings: showSettings,
   tagsView: tagsView,
-  fixedHeader: fixedHeader
+  fixedHeader: fixedHeader,
+  sidebarLogo: sidebarLogo
 }
 
 const mutations = {

src/styles/sidebar.scss

@@ -38,6 +38,16 @@
       right: 0px;
     }
 
+    .el-scrollbar {
+      height: 100%;
+    }
+
+    &.has-logo {
+      .el-scrollbar {
+        height: calc(100% - 50px);
+      }
+    }
+
     .is-horizontal {
       display: none;
     }
@@ -100,6 +110,7 @@
 
       .el-tooltip {
         padding: 0 !important;
+
         .svg-icon {
           margin-left: 20px;
         }
@@ -111,6 +122,7 @@
 
       &>.el-submenu__title {
         padding: 0 !important;
+
         .svg-icon {
           margin-left: 20px;
         }

src/styles/transition.scss

@@ -1,4 +1,4 @@
-//globl transition css
+//global transition css
 
 /*fade*/
 .fade-enter-active,