<template>
    <div class="skeleton-sidebar">
        <VueSkeletonLoader class="skeleton-sidebar--item w-100 h-40 mb-24"/>
        <VueSkeletonLoader class="skeleton-sidebar--item w-100 h-142 mb-24"/>
        <VueSkeletonLoader class="skeleton-sidebar--item w-70 h-40 mb-24"/>
        <VueSkeletonLoader class="skeleton-sidebar--item w-100 h-40 mb-24"/>
        <VueSkeletonLoader class="skeleton-sidebar--item w-70 h-40 mb-24"/>
        <VueSkeletonLoader class="skeleton-sidebar--item w-100 h-40 mb-24"/>
        <VueSkeletonLoader class="skeleton-sidebar--item w-70 h-40 mb-24"/>
    </div>
</template>
<script>
import VueSkeletonLoader from 'skeleton-loader-vue';

export default {
    components : {
        VueSkeletonLoader
    }
}
</script>
<style lang="scss">
.skeleton-sidebar {
    width: 100%;
    .skeleton-sidebar--item {
        &.mb-24 {
            margin-bottom: 24px;
        }
        
        &.w-100 {
            width: 100%!important;
        }
        
         &.w-70 {
            width: 75%!important;
        }
        
        &.h-40 {
            height: 40px!important;
        }
        
        &.h-142 {
            height: 142px!important;
        }
    }
}
.el-menu--collapse {
    .skeleton-sidebar {
      .skeleton-sidebar--item {
          width: 100%!important;
      }      
    }      
}
</style>