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

sidebar: highlight background on active and hover

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

78
src/app/Nav.vue
View File

@ -1,56 +1,50 @@
<template>
<div>
<nav class="nav flex-column">
<div class="nav-link logo d-flex justify-content-between">
<router-link :to="{name: 'home'}">
<Logo />
</router-link>
<button class="btn btn-link btn-lg p-0 d-md-none" @click="hideMenu">
<Icon icon="x" />
</button>
</div>
<nav class="nav flex-column">
<div class="logo d-flex justify-content-between">
<Logo />
<button class="btn btn-link btn-lg p-0 d-md-none" @click="hideMenu">
<Icon icon="x" />
</button>
</div>
<router-link class="nav-link" :to="{name: 'home'}">
<Icon icon="card-text" class="" /> Discover
</router-link>
<router-link class="nav-link" :to="{name: 'home'}" exact>
<Icon icon="card-text" class="" /> Discover
</router-link>
<router-link class="nav-link" :to="{name: 'queue'}">
<Icon icon="music-note-list" /> Playing
</router-link>
<router-link class="nav-link" :to="{name: 'queue'}">
<Icon icon="music-note-list" /> Playing
</router-link>
<a class="nav-link disabled">
<small class="text-uppercase text-muted font-weight-bold">
Library
</small>
</a>
<small class="sidebar-heading text-muted">
Library
</small>
<router-link class="nav-link" :to="{name: 'albums', params: {sort: 'recently-added'}}">
<Icon icon="collection" /> Albums
</router-link>
<router-link class="nav-link" :to="{name: 'albums', params: {sort: 'recently-added'}}">
<Icon icon="collection" /> Albums
</router-link>
<router-link class="nav-link" :to="{name: 'artists'}">
<Icon icon="collection" /> Artists
</router-link>
<router-link class="nav-link" :to="{name: 'artists'}">
<Icon icon="collection" /> Artists
</router-link>
<router-link class="nav-item nav-link" :to="{name: 'genres'}">
<Icon icon="collection" /> Genres
</router-link>
<router-link class="nav-item nav-link" :to="{name: 'genres'}">
<Icon icon="collection" /> Genres
</router-link>
<router-link class="nav-link" :to="{name: 'starred'}">
<Icon icon="star" /> Starred
</router-link>
<router-link class="nav-link" :to="{name: 'starred'}">
<Icon icon="star" /> Starred
</router-link>
<router-link class="nav-link" :to="{name: 'podcasts'}">
<Icon icon="rss" /> Podcasts
</router-link>
<router-link class="nav-link" :to="{name: 'podcasts'}">
<Icon icon="rss" /> Podcasts
</router-link>
<router-link class="nav-link" :to="{name: 'radio'}">
<Icon icon="broadcast" /> Radio
</router-link>
<router-link class="nav-link" :to="{name: 'radio'}">
<Icon icon="broadcast" /> Radio
</router-link>
<PlaylistNav />
</nav>
</div>
<PlaylistNav />
</nav>
</template>
<script lang="ts">
import Vue from 'vue'

19
src/app/Sidebar.vue
View File

@ -33,6 +33,13 @@
height: 1.5rem;
}
.sidebar-container .sidebar-heading {
padding: 0.5rem 1rem;
font-weight: bold;
text-transform: uppercase;
display: block;
}
.sidebar-container .nav-link {
width: calc(100%);
overflow: hidden;
@ -44,9 +51,19 @@
margin-right: 0.75rem;
}
.sidebar-container a.nav-link:not(.active) .b-icon {
.sidebar-container .nav-link:not(.active) .b-icon {
color: var(--text-muted);
}
.sidebar-container .nav-link:hover {
color: inherit;
background-color: rgba(255, 255, 255, 0.045);
}
.sidebar-container .nav-link.router-link-active {
background-color: rgba(255, 255, 255, 0.045);
}
.sidebar-container .nav-link.router-link-active:hover {
color: var(--primary);
}
</style>
<script lang="ts">
import Vue from 'vue'

14
src/playlist/PlaylistNav.vue
View File

@ -1,13 +1,11 @@
<template>
<div style="max-width: 100%">
<span class="nav-link">
<small class="text-uppercase text-muted font-weight-bold">
Playlists
<button class="btn btn-link btn-sm p-0 float-right" @click="showModal = true">
<Icon icon="plus" />
</button>
</small>
</span>
<small class="sidebar-heading text-muted">
Playlists
<button class="btn btn-link btn-sm p-0 float-right" @click="showModal = true">
<Icon icon="plus" />
</button>
</small>
<router-link class="nav-link" :to="{name: 'playlist', params: { id: 'random' }}">
<Icon icon="music-note-list" class="mr-2" /> Random