fix(station sidebar): sidebar opening on opposite side of button

Sidebar now on the  left, altered z-index of header and control bar. Sidebar now fades up/down

frontend/components/Sidebars/Playlist.vue

@@ -145,7 +145,7 @@ export default {
 	position: fixed;
 	z-index: 1;
 	top: 0;
-	right: 0;
+	left: 64px;
 	width: 300px;
 	height: 100vh;
 	background-color: $white;
@@ -168,13 +168,13 @@ export default {
 }
 
 .slide-transition {
-	transition: transform 0.6s ease-in-out;
-	transform: translateX(0);
+	transition: transform 0.3s ease-in-out;
+	transform: translateY(0);
 }
 
 .slide-enter,
 .slide-leave {
-	transform: translateX(100%);
+	transform: translateY(100%);
 }
 
 .title {

frontend/components/Sidebars/SongsList.vue

@@ -189,7 +189,7 @@ export default {
 	position: fixed;
 	z-index: 1;
 	top: 0;
-	right: 0;
+	left: 64px;
 	width: 300px;
 	height: 100vh;
 	background-color: $white;
@@ -205,13 +205,13 @@ export default {
 }
 
 .slide-transition {
-	transition: transform 0.6s ease-in-out;
-	transform: translateX(0);
+	transition: transform 0.3s ease-in-out;
+	transform: translateY(0);
 }
 
 .slide-enter,
 .slide-leave {
-	transform: translateX(100%);
+	transform: translateY(100%);
 }
 
 .title {

frontend/components/Sidebars/UsersList.vue

@@ -39,7 +39,7 @@ export default {
 	position: fixed;
 	z-index: 1;
 	top: 0;
-	right: 0;
+	left: 64px;
 	width: 300px;
 	height: 100vh;
 	background-color: $white;
@@ -53,13 +53,13 @@ export default {
 }
 
 .slide-transition {
-	transition: transform 0.6s ease-in-out;
-	transform: translateX(0);
+	transition: transform 0.3s ease-in-out;
+	transform: translateY(0);
 }
 
 .slide-enter,
 .slide-leave {
-	transform: translateX(100%);
+	transform: translateY(100%);
 }
 
 .title {

frontend/components/Station/Station.vue

@@ -1251,9 +1251,13 @@ export default {
 .slide-leave-active {
 	transition: all 0.3s ease;
 }
-.slide-enter,
+.slide-enter {
+	opacity: 0;
+	transform: translateY(-300px);
+}
 .slide-leave-to {
-	transform: translateX(300px);
+	transform: translateY(300px);
+	opacity: 0;
 }
 
 .no-song {

frontend/components/Station/StationHeader.vue

@@ -280,6 +280,7 @@ export default {
 .nav {
 	background-color: $primary-color;
 	line-height: 64px;
+	z-index: 3;
 	border-radius: 0% 0% 33% 33% / 0% 0% 7% 7%;
 	box-shadow: 2px 0 5px 0 rgba(0, 0, 0, 0.16),
 		2px 0 10px 0 rgba(0, 0, 0, 0.12);
@@ -387,7 +388,7 @@ a.nav-item.is-tab:hover {
 
 .control-sidebar {
 	position: fixed;
-	z-index: 1;
+	z-index: 2;
 	top: 0;
 	left: 0;
 	width: 64px;
@@ -468,7 +469,7 @@ a.nav-item.is-tab:hover {
 	border-radius: 6px;
 	padding: 5px;
 	position: absolute;
-	z-index: 1;
+	z-index: 2;
 	left: 115%;
 	opacity: 0;
 	transition: opacity 0.5s;