jean/airsonic-refix
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

highlight nested routes in nav

Browse Source
This commit is contained in:
Thomas Amland 2021-03-27 18:34:22 +01:00
parent 11dbb60100
commit ae8c2611f2
3 changed files with 15 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/Nav.vue
View File

@ -19,7 +19,7 @@
Library Library
</small> </small>
<router-link class="nav-link" :to="{name: 'albums', params: {sort: 'recently-added'}}"> <router-link class="nav-link" :to="{name: 'albums-default'}">
<Icon icon="collection" /> Albums <Icon icon="collection" /> Albums
</router-link> </router-link>

3
src/app/Sidebar.vue
View File

@ -51,7 +51,7 @@
margin-right: 0.75rem; margin-right: 0.75rem;
} }
.sidebar-container .nav-link:not(.active) .b-icon { .sidebar-container .nav-link:not(.router-link-active) .b-icon {
color: var(--text-muted); color: var(--text-muted);
} }
.sidebar-container .nav-link:hover { .sidebar-container .nav-link:hover {
@ -59,6 +59,7 @@
background-color: rgba(255, 255, 255, 0.045); background-color: rgba(255, 255, 255, 0.045);
} }
.sidebar-container .nav-link.router-link-active { .sidebar-container .nav-link.router-link-active {
color: var(--primary);
background-color: rgba(255, 255, 255, 0.045); background-color: rgba(255, 255, 255, 0.045);
} }
.sidebar-container .nav-link.router-link-active:hover { .sidebar-container .nav-link.router-link-active:hover {

16
src/shared/router.ts
View File

@ -44,6 +44,14 @@ export function setupRouter(auth: AuthService) {
path: '/queue', path: '/queue',
component: Queue, component: Queue,
}, },
{
name: 'albums-default',
path: '/albums',
redirect: ({
name: 'albums',
params: { sort: 'recently-added' }
}),
},
{ {
name: 'albums', name: 'albums',
path: '/albums/:sort', path: '/albums/:sort',
@ -52,7 +60,7 @@ export function setupRouter(auth: AuthService) {
}, },
{ {
name: 'album', name: 'album',
path: '/album/:id', path: '/albums/id/:id',
component: AlbumDetails, component: AlbumDetails,
props: true, props: true,
}, },
@ -63,7 +71,7 @@ export function setupRouter(auth: AuthService) {
}, },
{ {
name: 'artist', name: 'artist',
path: '/artist/:id', path: '/artists/:id',
component: ArtistDetails, component: ArtistDetails,
props: true, props: true,
}, },
@ -74,7 +82,7 @@ export function setupRouter(auth: AuthService) {
}, },
{ {
name: 'genre', name: 'genre',
path: '/genre/:id/:section?', path: '/genres/:id/:section?',
component: GenreDetails, component: GenreDetails,
props: true, props: true,
}, },
@ -95,7 +103,7 @@ export function setupRouter(auth: AuthService) {
}, },
{ {
name: 'podcast', name: 'podcast',
path: '/podcast/:id', path: '/podcasts/:id',
component: PodcastDetails, component: PodcastDetails,
props: true, props: true,
}, },