mirror of
https://github.com/Dvorinka/swingmusic-extended.git
synced 2026-10-28 11:51:15 +00:00
further smoothen sidebar toggling
This commit is contained in:
geoffrey45 committed
1 parent
c307022b59
commit
541830bfdc
9 files changed
+158
-78
No files matched your search
@@ -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",
|
||||
|
||||
+50
-30
@@ -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>
|
||||
@@ -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 {
|
||||
|
||||
@@ -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>
|
||||
|
After Width: | Height: | Size: 313 B |
+3
-3
@@ -1,4 +1,4 @@
|
||||
<svg width="191" height="54" viewBox="0 0 191 54" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M17.6328 35L10.625 10.3203H10.4141C10.7422 14.5234 10.9062 17.7891 10.9062 20.1172V35H2.70312V0.734375H15.0312L22.1797 25.0625H22.3672L29.375 0.734375H41.7266V35H33.2188V19.9766C33.2188 19.1953 33.2266 18.3281 33.2422 17.375C33.2734 16.4219 33.3828 14.0859 33.5703 10.3672H33.3594L26.4453 35H17.6328ZM78.2422 0.734375V21.3594C78.2422 25.8438 76.9688 29.3203 74.4219 31.7891C71.8906 34.2422 68.2344 35.4688 63.4531 35.4688C58.7812 35.4688 55.1875 34.2734 52.6719 31.8828C50.1719 29.4922 48.9219 26.0547 48.9219 21.5703V0.734375H58.2266V20.8438C58.2266 23.2656 58.6797 25.0234 59.5859 26.1172C60.4922 27.2109 61.8281 27.7578 63.5938 27.7578C65.4844 27.7578 66.8516 27.2188 67.6953 26.1406C68.5547 25.0469 68.9844 23.2656 68.9844 20.7969V0.734375H78.2422ZM107.844 24.5938C107.844 26.7188 107.305 28.6094 106.227 30.2656C105.148 31.9062 103.594 33.1875 101.562 34.1094C99.5312 35.0156 97.1484 35.4688 94.4141 35.4688C92.1328 35.4688 90.2188 35.3125 88.6719 35C87.125 34.6719 85.5156 34.1094 83.8438 33.3125V25.0625C85.6094 25.9688 87.4453 26.6797 89.3516 27.1953C91.2578 27.6953 93.0078 27.9453 94.6016 27.9453C95.9766 27.9453 96.9844 27.7109 97.625 27.2422C98.2656 26.7578 98.5859 26.1406 98.5859 25.3906C98.5859 24.9219 98.4531 24.5156 98.1875 24.1719C97.9375 23.8125 97.5234 23.4531 96.9453 23.0938C96.3828 22.7344 94.8672 22 92.3984 20.8906C90.1641 19.875 88.4844 18.8906 87.3594 17.9375C86.25 16.9844 85.4219 15.8906 84.875 14.6562C84.3438 13.4219 84.0781 11.9609 84.0781 10.2734C84.0781 7.11719 85.2266 4.65625 87.5234 2.89062C89.8203 1.125 92.9766 0.242188 96.9922 0.242188C100.539 0.242188 104.156 1.0625 107.844 2.70312L105.008 9.85156C101.805 8.38281 99.0391 7.64844 96.7109 7.64844C95.5078 7.64844 94.6328 7.85938 94.0859 8.28125C93.5391 8.70312 93.2656 9.22656 93.2656 9.85156C93.2656 10.5234 93.6094 11.125 94.2969 11.6562C95 12.1875 96.8906 13.1562 99.9688 14.5625C102.922 15.8906 104.969 17.3203 106.109 18.8516C107.266 20.3672 107.844 22.2812 107.844 24.5938ZM113.141 35V0.734375H122.445V35H113.141ZM145.133 7.83594C142.93 7.83594 141.211 8.74219 139.977 10.5547C138.742 12.3516 138.125 14.8359 138.125 18.0078C138.125 24.6016 140.633 27.8984 145.648 27.8984C147.164 27.8984 148.633 27.6875 150.055 27.2656C151.477 26.8438 152.906 26.3359 154.344 25.7422V33.5703C151.484 34.8359 148.25 35.4688 144.641 35.4688C139.469 35.4688 135.5 33.9688 132.734 30.9688C129.984 27.9688 128.609 23.6328 128.609 17.9609C128.609 14.4141 129.273 11.2969 130.602 8.60938C131.945 5.92188 133.867 3.85938 136.367 2.42188C138.883 0.96875 141.836 0.242188 145.227 0.242188C148.93 0.242188 152.469 1.04688 155.844 2.65625L153.008 9.94531C151.742 9.35156 150.477 8.85156 149.211 8.44531C147.945 8.03906 146.586 7.83594 145.133 7.83594ZM1.32617 53.8828C1.05664 53.8828 0.816406 53.8418 0.605469 53.7598V52.9336C0.84375 53.0195 1.07617 53.0625 1.30273 53.0625C1.79102 53.0625 2.11914 52.6621 2.28711 51.8613L3.83398 44.5781H4.80664L3.24805 51.9492C3.10742 52.6172 2.88281 53.1055 2.57422 53.4141C2.26953 53.7266 1.85352 53.8828 1.32617 53.8828ZM4.10938 42.9375C4.10938 42.7188 4.17188 42.541 4.29688 42.4043C4.42188 42.2637 4.58398 42.1934 4.7832 42.1934C5.11914 42.1934 5.28711 42.3691 5.28711 42.7207C5.28711 42.9355 5.2207 43.1172 5.08789 43.2656C4.95898 43.4141 4.80859 43.4883 4.63672 43.4883C4.48828 43.4883 4.36328 43.4414 4.26172 43.3477C4.16016 43.25 4.10938 43.1133 4.10938 42.9375ZM7.80664 44.5781L6.92773 48.6504C6.85742 48.998 6.82227 49.2695 6.82227 49.4648C6.82227 50.0234 7.10938 50.3027 7.68359 50.3027C8.02734 50.3027 8.36523 50.1855 8.69727 49.9512C9.0293 49.7168 9.32227 49.3809 9.57617 48.9434C9.83008 48.5059 10.0234 47.9785 10.1562 47.3613L10.7422 44.5781H11.7148L10.3613 51H9.54688L9.67578 49.8105H9.60547C9.22266 50.2988 8.85742 50.6387 8.50977 50.8301C8.16211 51.0215 7.80273 51.1172 7.43164 51.1172C6.93164 51.1172 6.53906 50.9824 6.25391 50.7129C5.96875 50.4395 5.82617 50.0508 5.82617 49.5469C5.82617 49.3047 5.86914 48.9688 5.95508 48.5391L6.81055 44.5781H7.80664ZM16.3965 49.1777C16.3965 49.7871 16.1797 50.2637 15.7461 50.6074C15.3164 50.9473 14.709 51.1172 13.9238 51.1172C13.2637 51.1172 12.668 50.9824 12.1367 50.7129V49.7871C12.4102 49.9512 12.7051 50.0781 13.0215 50.168C13.3379 50.2578 13.6309 50.3027 13.9004 50.3027C14.3926 50.3027 14.7637 50.2051 15.0137 50.0098C15.2637 49.8145 15.3887 49.5645 15.3887 49.2598C15.3887 49.0371 15.3203 48.8496 15.1836 48.6973C15.0469 48.5449 14.752 48.3359 14.2988 48.0703C13.791 47.7852 13.4316 47.5059 13.2207 47.2324C13.0098 46.959 12.9043 46.6348 12.9043 46.2598C12.9043 45.7207 13.1016 45.2871 13.4961 44.959C13.8906 44.627 14.4102 44.4609 15.0547 44.4609C15.7227 44.4609 16.3672 44.6055 16.9883 44.8945L16.6719 45.6973L16.3438 45.5508C15.9492 45.3828 15.5195 45.2988 15.0547 45.2988C14.6914 45.2988 14.4062 45.3848 14.1992 45.5566C13.9922 45.7246 13.8887 45.9434 13.8887 46.2129C13.8887 46.4316 13.957 46.6191 14.0938 46.7754C14.2344 46.9316 14.5215 47.1328 14.9551 47.3789C15.373 47.6133 15.6719 47.8145 15.8516 47.9824C16.0Line truncated
|
||||
<path d="M162.289 14.4453C161.008 12.5859 160.367 9.9375 160.367 6.5V3.10156H169.602L187.039 22.2031C188.023 23.2969 188.68 24.2188 189.008 24.9688C189.336 25.7188 189.578 26.4062 189.734 27.0312C190.078 28.2812 190.25 29.8203 190.25 31.6484V35H181.273L162.359 14.4453H162.289ZM180.102 13.1094C180.102 8.8125 180.766 6.01562 182.094 4.71875C182.797 4.03125 183.711 3.59375 184.836 3.40625C185.977 3.20312 187.359 3.10156 188.984 3.10156H190.25V6.80469C190.25 10.1328 189.375 12.3594 187.625 13.4844C186.375 14.2969 184.273 14.7031 181.32 14.7031H180.102V13.1094ZM160.367 31.3438C160.367 28.0156 161.242 25.7812 162.992 24.6406C164.242 23.8438 166.344 23.4453 169.297 23.4453H170.516V25.0391C170.516 29.3828 169.852 32.1719 168.523 33.4062C167.617 34.25 166.297 34.75 164.562 34.9062C163.688 34.9688 162.711 35 161.633 35H160.367V31.3438Z" fill="#4AD168"/>
|
||||
<svg width="189" height="36" viewBox="0 0 189 36" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15.6328 35L8.625 10.3203H8.41406C8.74219 14.5234 8.90625 17.7891 8.90625 20.1172V35H0.703125V0.734375H13.0312L20.1797 25.0625H20.3672L27.375 0.734375H39.7266V35H31.2188V19.9766C31.2188 19.1953 31.2266 18.3281 31.2422 17.375C31.2734 16.4219 31.3828 14.0859 31.5703 10.3672H31.3594L24.4453 35H15.6328ZM76.2422 0.734375V21.3594C76.2422 25.8438 74.9688 29.3203 72.4219 31.7891C69.8906 34.2422 66.2344 35.4688 61.4531 35.4688C56.7812 35.4688 53.1875 34.2734 50.6719 31.8828C48.1719 29.4922 46.9219 26.0547 46.9219 21.5703V0.734375H56.2266V20.8438C56.2266 23.2656 56.6797 25.0234 57.5859 26.1172C58.4922 27.2109 59.8281 27.7578 61.5938 27.7578C63.4844 27.7578 64.8516 27.2188 65.6953 26.1406C66.5547 25.0469 66.9844 23.2656 66.9844 20.7969V0.734375H76.2422ZM105.844 24.5938C105.844 26.7188 105.305 28.6094 104.227 30.2656C103.148 31.9062 101.594 33.1875 99.5625 34.1094C97.5312 35.0156 95.1484 35.4688 92.4141 35.4688C90.1328 35.4688 88.2188 35.3125 86.6719 35C85.125 34.6719 83.5156 34.1094 81.8438 33.3125V25.0625C83.6094 25.9688 85.4453 26.6797 87.3516 27.1953C89.2578 27.6953 91.0078 27.9453 92.6016 27.9453C93.9766 27.9453 94.9844 27.7109 95.625 27.2422C96.2656 26.7578 96.5859 26.1406 96.5859 25.3906C96.5859 24.9219 96.4531 24.5156 96.1875 24.1719C95.9375 23.8125 95.5234 23.4531 94.9453 23.0938C94.3828 22.7344 92.8672 22 90.3984 20.8906C88.1641 19.875 86.4844 18.8906 85.3594 17.9375C84.25 16.9844 83.4219 15.8906 82.875 14.6562C82.3438 13.4219 82.0781 11.9609 82.0781 10.2734C82.0781 7.11719 83.2266 4.65625 85.5234 2.89062C87.8203 1.125 90.9766 0.242188 94.9922 0.242188C98.5391 0.242188 102.156 1.0625 105.844 2.70312L103.008 9.85156C99.8047 8.38281 97.0391 7.64844 94.7109 7.64844C93.5078 7.64844 92.6328 7.85938 92.0859 8.28125C91.5391 8.70312 91.2656 9.22656 91.2656 9.85156C91.2656 10.5234 91.6094 11.125 92.2969 11.6562C93 12.1875 94.8906 13.1562 97.9688 14.5625C100.922 15.8906 102.969 17.3203 104.109 18.8516C105.266 20.3672 105.844 22.2812 105.844 24.5938ZM111.141 35V0.734375H120.445V35H111.141ZM143.133 7.83594C140.93 7.83594 139.211 8.74219 137.977 10.5547C136.742 12.3516 136.125 14.8359 136.125 18.0078C136.125 24.6016 138.633 27.8984 143.648 27.8984C145.164 27.8984 146.633 27.6875 148.055 27.2656C149.477 26.8438 150.906 26.3359 152.344 25.7422V33.5703C149.484 34.8359 146.25 35.4688 142.641 35.4688C137.469 35.4688 133.5 33.9688 130.734 30.9688C127.984 27.9688 126.609 23.6328 126.609 17.9609C126.609 14.4141 127.273 11.2969 128.602 8.60938C129.945 5.92188 131.867 3.85938 134.367 2.42188C136.883 0.96875 139.836 0.242188 143.227 0.242188C146.93 0.242188 150.469 1.04688 153.844 2.65625L151.008 9.94531C149.742 9.35156 148.477 8.85156 147.211 8.44531C145.945 8.03906 144.586 7.83594 143.133 7.83594Z" fill="white"/>
|
||||
<path d="M160.289 14.4453C159.008 12.5859 158.367 9.9375 158.367 6.5V3.10156H167.602L185.039 22.2031C186.023 23.2969 186.68 24.2188 187.008 24.9688C187.336 25.7188 187.578 26.4062 187.734 27.0312C188.078 28.2812 188.25 29.8203 188.25 31.6484V35H179.273L160.359 14.4453H160.289ZM178.102 13.1094C178.102 8.8125 178.766 6.01562 180.094 4.71875C180.797 4.03125 181.711 3.59375 182.836 3.40625C183.977 3.20312 185.359 3.10156 186.984 3.10156H188.25V6.80469C188.25 10.1328 187.375 12.3594 185.625 13.4844C184.375 14.2969 182.273 14.7031 179.32 14.7031H178.102V13.1094ZM158.367 31.3438C158.367 28.0156 159.242 25.7812 160.992 24.6406C162.242 23.8438 164.344 23.4453 167.297 23.4453H168.516V25.0391C168.516 29.3828 167.852 32.1719 166.523 33.4062C165.617 34.25 164.297 34.75 162.562 34.9062C161.688 34.9688 160.711 35 159.633 35H158.367V31.3438Z" fill="#4AD168"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 3.6 KiB |
@@ -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>
|
||||
@@ -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>
|
||||
+9
-6
@@ -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");
|
||||
@@ -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"
|
||||
|
||||
Reference in new issue
Block a user