Commit 83408c52 authored by Eliot Berriot's avatar Eliot Berriot 💬

Finished revamped sidebar navigation

parent 07d04518
Pipeline #6360 failed with stages
in 3 minutes and 23 seconds
......@@ -122,22 +122,37 @@
<div class="ui small hidden divider"></div>
<section :class="['ui', 'bottom', 'attached', {active: selectedTab === 'library'}, 'tab']" :aria-label="labels.mainMenu">
<nav class="ui inverted vertical large fluid menu" role="navigation" :aria-label="labels.mainMenu">
<router-link class="item" :to="{path: '/library'}"><translate translate-context="Sidebar/Navigation/List item.Link/Verb">Explore</translate></router-link>
<div class="item">
<header class="header" @click="exploreExpanded = !exploreExpanded">
<translate translate-context="*/*/*/Verb">Explore</translate>
<i class="angle down icon" v-if="exploreExpanded"></i>
<i class="angle right icon" v-else></i>
</header>
<div class="menu" v-if="exploreExpanded">
<router-link class="item" :exact="true" :to="{path: '/library'}"><i class="music icon"></i><translate translate-context="Sidebar/Navigation/List item.Link/Verb">Browse</translate></router-link>
<router-link class="item" :to="{name: 'library.albums.browse'}"><i class="headphones icon"></i><translate translate-context="*/*/*">Albums</translate></router-link>
<router-link class="item" :to="{name: 'library.artists.browse'}"><i class="user icon"></i><translate translate-context="*/*/*">Artists</translate></router-link>
<router-link class="item" :to="{name: 'library.playlists.browse'}"><i class="list icon"></i><translate translate-context="*/*/*">Playlists</translate></router-link>
<router-link class="item" :to="{name: 'library.radios.browse'}"><i class="feed icon"></i><translate translate-context="*/*/*">Radios</translate></router-link>
</div>
</div>
<div class="item" v-if="$store.state.auth.authenticated" >
<header class="header">
<header class="header" @click="myLibraryExpanded = !myLibraryExpanded">
<translate translate-context="*/*/*/Noun">My Library</translate>
<i class="angle down icon" v-if="myLibraryExpanded"></i>
<i class="angle right icon" v-else></i>
</header>
<div class="menu">
<router-link class="item" :to="{path: '/library', query: {scope: 'me'}}"><i class="music icon"></i><translate translate-context="Sidebar/Navigation/List item.Link/Verb">Browse</translate></router-link>
<div class="menu" v-if="myLibraryExpanded">
<router-link class="item" :exact="true" :to="{path: '/library/me'}"><i class="music icon"></i><translate translate-context="Sidebar/Navigation/List item.Link/Verb">Browse</translate></router-link>
<a
@click="$store.commit('playlists/chooseTrack', null)"
class="item">
<i class="list icon"></i><translate translate-context="*/*/*">Playlists</translate>
</a>
<router-link class="item" :to="{path: '/favorites'}"><i class="heart icon"></i><translate translate-context="Sidebar/Favorites/List item.Link/Noun">Favorites</translate></router-link>
<router-link class="item" :to="{name: 'library.albums.browse', query: {scope: 'me'}}"><i class="headphones icon"></i><translate translate-context="*/*/*">Albums</translate></router-link>
<router-link class="item" :to="{name: 'library.artists.browse', query: {scope: 'me'}}"><i class="user icon"></i><translate translate-context="*/*/*">Artists</translate></router-link>
<router-link class="item" :to="{name: 'library.radios.browse', query: {scope: 'me'}}"><i class="feed icon"></i><translate translate-context="*/*/*">Radios</translate></router-link>
<router-link class="item" :to="{name: 'library.albums.me'}"><i class="headphones icon"></i><translate translate-context="*/*/*">Albums</translate></router-link>
<router-link class="item" :to="{name: 'library.artists.me'}"><i class="user icon"></i><translate translate-context="*/*/*">Artists</translate></router-link>
<router-link class="item" :to="{name: 'library.radios.me'}"><i class="feed icon"></i><translate translate-context="*/*/*">Radios</translate></router-link>
</div>
</div>
</nav>
......@@ -236,7 +251,9 @@ export default {
backend: backend,
tracksChangeBuffer: null,
isCollapsed: true,
fetchInterval: null
fetchInterval: null,
exploreExpanded: false,
myLibraryExpanded: false,
}
},
destroy() {
......@@ -355,6 +372,13 @@ export default {
"$store.state.auth.authenticated": {
immediate: true,
handler (v) {
if (v) {
this.myLibraryExpanded = true
this.exploreExpanded = false
} else {
this.myLibraryExpanded = false
this.exploreExpanded = true
}
this.$nextTick(() => {
$(this.$el).find('.user-dropdown').dropdown({action: 'hide'})
})
......@@ -465,6 +489,10 @@ $sidebar-color: #3d3e3f;
width: 55px;
}
}
.item .header .angle.icon {
float: right;
margin: 0;
}
.tab[data-tab="library"] {
flex-direction: column;
flex: 1 1 auto;
......
......@@ -498,6 +498,15 @@ export default new Router({
import(/* webpackChunkName: "core" */ "@/components/library/Home"),
name: "library.index"
},
{
path: "me",
component: () =>
import(/* webpackChunkName: "core" */ "@/components/library/Home"),
name: "library.me",
props: route => ({
scope: 'me',
})
},
{
path: "artists/",
name: "library.artists.browse",
......@@ -515,6 +524,24 @@ export default new Router({
defaultPage: route.query.page
})
},
{
path: "me/artists",
name: "library.artists.me",
component: () =>
import(
/* webpackChunkName: "core" */ "@/components/library/Artists"
),
props: route => ({
scope: 'me',
defaultOrdering: route.query.ordering,
defaultQuery: route.query.query,
defaultTags: Array.isArray(route.query.tag || [])
? route.query.tag
: [route.query.tag],
defaultPaginateBy: route.query.paginateBy,
defaultPage: route.query.page
})
},
{
path: "albums/",
name: "library.albums.browse",
......@@ -532,6 +559,24 @@ export default new Router({
defaultPage: route.query.page
})
},
{
path: "me/albums",
name: "library.albums.me",
component: () =>
import(
/* webpackChunkName: "core" */ "@/components/library/Albums"
),
props: route => ({
scope: 'me',
defaultOrdering: route.query.ordering,
defaultQuery: route.query.query,
defaultTags: Array.isArray(route.query.tag || [])
? route.query.tag
: [route.query.tag],
defaultPaginateBy: route.query.paginateBy,
defaultPage: route.query.page
})
},
{
path: "radios/",
name: "library.radios.browse",
......@@ -546,6 +591,21 @@ export default new Router({
defaultPage: route.query.page
})
},
{
path: "me/radios/",
name: "library.radios.me",
component: () =>
import(
/* webpackChunkName: "core" */ "@/components/library/Radios"
),
props: route => ({
scope: 'me',
defaultOrdering: route.query.ordering,
defaultQuery: route.query.query,
defaultPaginateBy: route.query.paginateBy,
defaultPage: route.query.page
})
},
{
path: "radios/build",
name: "library.radios.build",
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment