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

12
src/app/Nav.vue
View File

@ -1,16 +1,13 @@
<template> <template>
<div>
<nav class="nav flex-column"> <nav class="nav flex-column">
<div class="nav-link logo d-flex justify-content-between"> <div class="logo d-flex justify-content-between">
<router-link :to="{name: 'home'}">
<Logo /> <Logo />
</router-link>
<button class="btn btn-link btn-lg p-0 d-md-none" @click="hideMenu"> <button class="btn btn-link btn-lg p-0 d-md-none" @click="hideMenu">
<Icon icon="x" /> <Icon icon="x" />
</button> </button>
</div> </div>
<router-link class="nav-link" :to="{name: 'home'}"> <router-link class="nav-link" :to="{name: 'home'}" exact>
<Icon icon="card-text" class="" /> Discover <Icon icon="card-text" class="" /> Discover
</router-link> </router-link>
@ -18,11 +15,9 @@
<Icon icon="music-note-list" /> Playing <Icon icon="music-note-list" /> Playing
</router-link> </router-link>
<a class="nav-link disabled"> <small class="sidebar-heading text-muted">
<small class="text-uppercase text-muted font-weight-bold">
Library Library
</small> </small>
</a>
<router-link class="nav-link" :to="{name: 'albums', params: {sort: 'recently-added'}}"> <router-link class="nav-link" :to="{name: 'albums', params: {sort: 'recently-added'}}">
<Icon icon="collection" /> Albums <Icon icon="collection" /> Albums
@ -50,7 +45,6 @@
<PlaylistNav /> <PlaylistNav />
</nav> </nav>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
import Vue from 'vue' import Vue from 'vue'

19
src/app/Sidebar.vue
View File

@ -33,6 +33,13 @@
height: 1.5rem; height: 1.5rem;
} }
.sidebar-container .sidebar-heading {
padding: 0.5rem 1rem;
font-weight: bold;
text-transform: uppercase;
display: block;
}
.sidebar-container .nav-link { .sidebar-container .nav-link {
width: calc(100%); width: calc(100%);
overflow: hidden; overflow: hidden;
@ -44,9 +51,19 @@
margin-right: 0.75rem; 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); 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> </style>
<script lang="ts"> <script lang="ts">
import Vue from 'vue' import Vue from 'vue'

4
src/playlist/PlaylistNav.vue
View File

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