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

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>
src/components/LeftSidebar/PinnedStuff.vue
+18 -4
View File
@@ -1,5 +1,9 @@
<template>
<div class="nav-container hidden" id="pinned-container">
<div
class="nav-container"
:class="{ hidden: collapsed }"
id="pinned-container"
>
<div>
<div class="nav-button" id="pinned-button">
<!-- <div class="nav-icon" id="pinned-icon"></div> -->
@@ -50,10 +54,14 @@
</div>
</template>
<script>
export default {
props: ["collapsed"],
setup() {},
};
</script>
<style>
.hidden {
display: none;
}
#pinned-container .nav-button {
color: rgba(255, 255, 255, 0.671);
@@ -120,4 +128,10 @@
#pinned-container .seperator {
color: var(--grey);
}
#pinned-container {
transition-timing-function: linear;
transition-property: width;
transition-duration: 20s;
}
</style>