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

further smoothen sidebar toggling

Browse Source
This commit is contained in:
geoffrey45
2021-11-17 10:14:28 +03:00
parent c307022b59
commit 541830bfdc
9 changed files with 158 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/LeftSidebar/Navigation.vue
+49 -27
View File
@@ -1,76 +1,97 @@
<template>
<div class="nav-container">
<div class="nav-container" :class="{ collapsed: collapsed }">
<router-link :to="{ name: 'Home' }">
<div class="nav-button" id="home-button">
<div class="nav-icon" id="home-icon"></div>
<span id="text">Home</span>
<div class="in">
<div class="nav-icon" id="home-icon"></div>
<span id="text">Home</span>
</div>
</div>
</router-link>
<hr />
<router-link :to="{ name: 'Home' }">
<div class="nav-button" id="album-button">
<div class="nav-icon" id="album-icon"></div>
<span id="text">Albums</span>
<div class="in">
<div class="nav-icon" id="album-icon"></div>
<span id="text">Albums</span>
</div>
</div>
</router-link>
<hr />
<router-link :to="{ name: 'Home' }">
<div class="nav-button" id="artists-button">
<div class="nav-icon" id="artists-icon"></div>
<span id="text">Artists</span>
<div class="in">
<div class="nav-icon" id="artists-icon"></div>
<span id="text">Artists</span>
</div>
</div>
</router-link>
<hr />
<router-link :to="{ name: 'Home' }">
<div class="nav-button" id="playlists-button">
<div class="nav-icon" id="playlists-icon"></div>
<span id="text">Playlist</span>
<div class="in">
<div class="nav-icon" id="playlists-icon"></div>
<span id="text">Playlist</span>
</div>
</div>
</router-link>
<hr />
<router-link :to="{ name: 'Home' }">
<div class="nav-button" id="mixes-button">
<div class="nav-icon" id="mixes-icon"></div>
<span id="text">Mixes</span>
<div class="in">
<div class="nav-icon" id="mixes-icon"></div>
<span id="text">Mixes</span>
</div>
</div>
</router-link>
<hr />
<router-link :to="{ name: 'Home' }">
<div class="nav-button" id="folders-button">
<div class="nav-icon" id="folders-icon"></div>
<span id="text">Folders</span>
<div class="in">
<div class="nav-icon" id="folders-icon"></div>
<span id="text">Folders</span>
</div>
</div>
</router-link>
</div>
</template>
<script>
export default {
props: ["collapsed"],
setup() {},
};
</script>
<style>
.nav-container .in {
display: flex;
align-items: center;
}
.collapsed .in {
flex-direction: column;
}
.nav-container {
color: #fff;
}
.nav-container .nav-button {
display: flex;
align-items: center;
align-items: flex-start;
justify-content: flex-start;
background-color: transparent;
height: 100%;
padding: 10px;
}
@media (max-width: 1000px) {
.nav-container .nav-button {
display: flex;
flex-direction: column;
}
.nav-container .nav-button .nav-icon {
margin-left: calc(100% - 20px*2);
}
.nav-container span {
font-size: small;
}
.collapsed span {
font-size: small;
margin-top: 20px;
}
.nav-container .nav-button:hover {
@@ -84,7 +105,9 @@
background-repeat: no-repeat;
background-position: center;
margin-right: 0.5em;
margin-left: 10px;
}
.nav-container #home-button #home-icon {
background-image: url(../../assets/icons/home.svg);
}
@@ -118,7 +141,6 @@
}
.nav-container hr {
/* color: transparent; */
display: none;
}
</style>