<template>
    <div class="sidebar">
        <div class="sidebar-user">
            <Avatar icon="person" size="large" :src="userImg" />
            <span class="username">{{user.username}}</span>
        </div>
        <Menus :user="user" />
    </div>
</template>

<style scoped lang="scss">
.sidebar {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.sidebar-user {
    padding: 10px 20px;
    border: 1px solid #dddee1;
    height: 65px;

    .username {
        display: inline-block;
        padding: 0 10px;
        height: 40px;
        font-size: 18px;
        line-height: 40px;
        max-width: 110px;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: middle;
    }
}

.sidebar-menu {
    flex: 1;
    overflow: auto;
}
</style>

<script>
import Menus from 'common/Menus.vue'
import userImg from '../../../images/photos/user1.png'
import axios from 'axios'

export default {
    components: {
        Menus
    },
    data() {
      return {
          userImg,
          user: {}
      }
    },
    async created() {
        const result = await axios.get('/login/info')

        if (result.status === 200) {
            this.user = result.data
        }
    }
}
</script>