div(:class="$style.aside")
div(:class="['animated', logoAnimate, $style.logo]")
svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='100%' height='100%' viewBox='0 0 127 61' space='preserve')
use(xlink:href='#icon-logo')
div(:class="$style.menu")
dl
dt {{$t('core.aside.online_music')}}
dd
router-link(:active-class="$style.active" to="search") {{$t('core.aside.search')}}
dd
router-link(:active-class="$style.active" to="songList") {{$t('core.aside.song_list')}}
dd
router-link(:active-class="$style.active" to="leaderboard") {{$t('core.aside.leaderboard')}}
dl
dt {{$t('core.aside.my_music')}}
dd
router-link(:active-class="($route.query.id === defaultList.id || $route.query.id == '') ? $style.active : ''" :to="`list?id=${defaultList.id || ''}`") {{$t('core.aside.default_list')}}
router-link(:active-class="$route.query.id === loveList.id ? $style.active : ''" :to="`list?id=${loveList.id}`") {{$t('core.aside.love_list')}}
router-link(:active-class="$route.query.id === item.id ? $style.active : ''" v-for="item in userList" :to="`list?id=${item._id}`" :key="item._id") {{item.name}}
dl
dt {{$t('core.aside.other')}}
dd
router-link(:active-class="$style.active" to="download") {{$t('core.aside.download')}}
dd
router-link(:active-class="$style.active" to="setting") {{$t('core.aside.setting')}}