<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="/"> <h1 class="sidebar-title"> {{ title }} </h1> </router-link> </transition> </div> </template> <script> import defaultSettings from '@/settings' const { title } = defaultSettings export default { name: 'SidebarLogo', props: { collapse: { type: Boolean, required: true } }, data () { return { title: title, } } } </script> <style lang="scss" scoped> .sidebarLogoFade-enter-active { transition: opacity 1.5s; } .sidebarLogoFade-enter, .sidebarLogoFade-leave-to { opacity: 0; } .sidebar-logo-container { position: relative; width: 100%; text-align: center; overflow: hidden; height: 100px; & .sidebar-logo-link { height: 100%; width: 100%; & .sidebar-logo { width: 41px; height: 39px; vertical-align: middle; // margin-left: 47px; // margin-right: 48px; margin-top: 22px; } & .sidebar-title { margin: 0; margin-top: 10px; margin-bottom: 20px; color: #fff; font-weight: 600; line-height: 25px; font-size: 16px; font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif; vertical-align: middle; } } &.collapse { .sidebar-logo { margin-right: 0px; width: 32.8px; height: 31.2px; } } } </style>