tcsenpai/swingmusic
1
0
Fork 0
mirror of https://github.com/tcsenpai/swingmusic.git synced 2025-06-06 03:05:35 +00:00
Code Issues 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -8,6 +8,7 @@
"lint": "vue-cli-service lint"
},
"dependencies": {
"animate.css": "^4.1.1",
"core-js": "^3.6.5",
"register-service-worker": "^1.7.1",
"vue": "^3.0.0",

80
src/App.vue
View File

@ -1,13 +1,16 @@
<template>
<div class="l-container">
<div class="l-container" :class="{ collapsed: collapsed }">
<div class="l-sidebar">
<div id="logo-container">
<router-link :to="{ name: 'Home' }"><div id="logo"></div></router-link>
<div id="toggle" @click="toggleNav"></div>
<router-link :to="{ name: 'FolderView' }" v-if="!collapsed"
><div ref="logo" class="logo"></div
></router-link>
</div>
<hr class="seperator" />
<Navigation />
<Navigation :collapsed="collapsed" />
<hr class="seperator" />
<PinnedStuff />
<PinnedStuff :collapsed="collapsed" />
<div id="settings-button">
<div class="nav-icon" id="settings-icon"></div>
<span id="text">Settings</span>
@ -24,6 +27,7 @@
</template>
<script>
import { ref } from "@vue/reactivity";
import Navigation from "./components/LeftSidebar/Navigation.vue";
import PinnedStuff from "./components/LeftSidebar/PinnedStuff.vue";
@ -33,25 +37,37 @@ export default {
PinnedStuff,
},
setup() {
let quick_access = null;
const collapsed = ref(false);
return { quick_access };
const logo = ref(null);
function toggleNav() {
collapsed.value = !collapsed.value;
}
return { logo, toggleNav, collapsed };
},
};
</script>
<style>
#logo {
height: 60px;
width: 200px;
.logo {
height: 30px;
width: 150px;
margin-left: 35px;
background: url(./assets/logo.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
animation: fadeIn;
animation-duration: 2s;
animation-iteration-count: 1;
}
#logo-container {
padding-left: 15px;
height: 60px;
margin-left: 20px;
display: flex;
align-items: center;
}
.l-sidebar {
@ -62,6 +78,19 @@ export default {
margin-left: -2em;
}
.l-container #toggle {
position: fixed;
top: 7px;
width: 30px;
height: 60px;
background: url(./assets/icons/menu.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
cursor: pointer;
margin-right: 5px;
}
.l-container #settings-button {
position: absolute;
bottom: 0;
@ -89,26 +118,17 @@ export default {
background-position: center;
}
@media (max-width: 1000px) {
#logo {
height: 40px;
width: 40px;
background: url(./assets/icons/logo-small.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.l-container #settings-button {
flex-direction: column;
justify-content: center;
}
.collapsed #settings-button {
flex-direction: column;
justify-content: center;
}
.l-container #settings-button #settings-icon {
margin-left: 0;
margin-right: 0;
}
.l-container #settings-button #text {
display: none;
}
.collapsed #settings-button #settings-icon {
margin-left: 0;
margin-right: 0;
}
.collapsed #settings-button #text {
display: none;
}
</style>

26
src/assets/css/global.css
View File

@ -25,11 +25,15 @@ hr,
color: #ffffff48;
}
.hidden {
display: none;
}
.l-container {
display: grid;
grid-template-columns: 250px 4fr 2fr;
grid-template-columns: min-content 4fr 1fr;
grid-template-rows: 78px 1fr 1fr;
gap: 4px;
grid-auto-flow: row;
grid-template-areas:
"l-sidebar nav nav"
@ -39,21 +43,27 @@ hr,
height: 100vh;
}
.collapsed .l-sidebar{
width: 70px;
transition-timing-function: ease-in-out;
transition-duration: .3s;
transition-property: width;
}
.l-sidebar {
width: 250px;
grid-area: l-sidebar;
padding-top: 0.5em;
background-color: #131313b2;
transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
transition-duration: .3s;
transition-property: width;
}
@media (max-width: 1000px) {
.l-sidebar {
width: 70px;
}
}
.nav {
grid-area: nav;
border-radius: 5px;
border: 1px solid;
}
.content {

5
src/assets/icons/menu.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.6875 5.625H25.3125V7.5H4.6875V5.625Z" fill="#FFE5E5"/>
<path d="M4.6875 14.0625H25.3125V15.9375H4.6875V14.0625Z" fill="#FFE5E5"/>
<path d="M4.6875 22.5H25.3125V24.375H4.6875V22.5Z" fill="#FFE5E5"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 313 B

6
src/assets/logo.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 3.6 KiB

76
src/components/LeftSidebar/Navigation.vue
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>

22
src/components/LeftSidebar/PinnedStuff.vue
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>

15
src/main.js
View File

@ -1,7 +1,10 @@
import { createApp } from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import '../src/assets/css/global.css'
import { createApp } from "vue";
import App from "./App.vue";
import "./registerServiceWorker";
import router from "./router";
createApp(App).use(router).mount('#app')
import "../src/assets/css/global.css";
import "animate.css";
createApp(App).use(router).mount("#app");

5
yarn.lock
View File

@ -1727,6 +1727,11 @@ alphanum-sort@^1.0.0:
resolved "https://registry.yarnpkg.com/alphanum-sort/-/alphanum-sort-1.0.2.tgz#97a1119649b211ad33691d9f9f486a8ec9fbe0a3"
integrity sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=
animate.css@^4.1.1:
version "4.1.1"
resolved "https://registry.yarnpkg.com/animate.css/-/animate.css-4.1.1.tgz#614ec5a81131d7e4dc362a58143f7406abd68075"
integrity sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ==
ansi-colors@^3.0.0:
version "3.2.4"
resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-3.2.4.tgz#e3a3da4bfbae6c86a9c285625de124a234026fbf"