TDvorak/swingmusic-extended
1
0
Fork 0
mirror of https://github.com/Dvorinka/swingmusic-extended.git synced 2026-06-04 04:23:01 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

search component initial build

Browse Source
This commit is contained in:
geoffrey45
2021-11-26 10:52:32 +03:00
parent 872badbc65
commit 206e89878c
8 changed files with 350 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/LeftSidebar/Navigation.vue
+22 -25
View File
@@ -1,9 +1,9 @@
<template>
<div class="nav-container" :class="{ collapsed: collapsed }">
<div class="side-nav-container" :class="{ collapsed: collapsed }">
<router-link :to="{ name: 'Home' }">
<div class="nav-button" id="home-button">
<div class="in">
<div class="nav-icon" id="home-icon"></div>
<div class="nav-icon image" id="home-icon"></div>
<span id="text">Home</span>
</div>
</div>
@@ -12,7 +12,7 @@
<router-link :to="{ name: 'Home' }">
<div class="nav-button" id="album-button">
<div class="in">
<div class="nav-icon" id="album-icon"></div>
<div class="nav-icon image" id="album-icon"></div>
<span id="text">Albums</span>
</div>
</div>
@@ -21,7 +21,7 @@
<router-link :to="{ name: 'Home' }">
<div class="nav-button" id="artists-button">
<div class="in">
<div class="nav-icon" id="artists-icon"></div>
<div class="nav-icon image" id="artists-icon"></div>
<span id="text">Artists</span>
</div>
</div>
@@ -30,7 +30,7 @@
<router-link :to="{ name: 'Home' }">
<div class="nav-button" id="playlists-button">
<div class="in">
<div class="nav-icon" id="playlists-icon"></div>
<div class="nav-icon image" id="playlists-icon"></div>
<span id="text">Playlist</span>
</div>
</div>
@@ -39,7 +39,7 @@
<router-link :to="{ name: 'Home' }">
<div class="nav-button" id="mixes-button">
<div class="in">
<div class="nav-icon" id="mixes-icon"></div>
<div class="nav-icon image" id="mixes-icon"></div>
<span id="text">Mixes</span>
</div>
</div>
@@ -48,7 +48,7 @@
<router-link :to="{ name: 'FolderView' }">
<div class="nav-button" id="folders-button">
<div class="in">
<div class="nav-icon" id="folders-icon"></div>
<div class="nav-icon image" id="folders-icon"></div>
<span id="text">Folders</span>
</div>
</div>
@@ -66,7 +66,7 @@ export default {
<style>
.nav-container .in {
.side-nav-container .in {
display: flex;
align-items: center;
}
@@ -75,14 +75,14 @@ export default {
flex-direction: column;
}
.nav-container {
.side-nav-container {
color: #fff;
border-top: 1px solid rgba(255, 255, 255, 0.158);
border-top: 1px solid var(--seperator);
margin-bottom: 10px;
padding-top: 10px;
}
.nav-container .nav-button {
.side-nav-container .nav-button {
display: flex;
align-items: flex-start;
justify-content: flex-start;
@@ -97,53 +97,50 @@ export default {
margin-top: 5px;
}
.nav-container .nav-button:hover {
.side-nav-container .nav-button:hover {
background-color: rgba(220, 20, 60, 0.5);
}
.nav-container .nav-button .nav-icon {
.side-nav-container .nav-button .nav-icon {
height: 24px;
width: 24px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
margin-right: 0.5em;
margin-left: 10px;
}
.nav-container #home-button #home-icon {
.side-nav-container #home-button #home-icon {
background-image: url(../../assets/icons/home.svg);
}
.nav-container #album-button #album-icon {
.side-nav-container #album-button #album-icon {
background-image: url(../../assets/icons/album.svg);
}
.nav-container #home-button #text {
.side-nav-container #home-button #text {
margin-top: 5px;
}
.nav-container #artists-button #artists-icon {
.side-nav-container #artists-button #artists-icon {
background-image: url(../../assets/icons/artist.svg);
}
.nav-container #playlists-button #playlists-icon {
.side-nav-container #playlists-button #playlists-icon {
background-image: url(../../assets/icons/playlist.svg);
}
.nav-container #mixes-button #mixes-icon {
.side-nav-container #mixes-button #mixes-icon {
background-image: url(../../assets/icons/mix.svg);
}
.nav-container #folders-button #folders-icon {
.side-nav-container #folders-button #folders-icon {
background-image: url(../../assets/icons/folder.svg);
}
.nav-container #folders-button #text {
.side-nav-container #folders-button #text {
margin-top: 5px;
}
.nav-container hr {
.side-nav-container hr {
display: none;
}
</style>