Added basic Sidebar styling. Will need to modularise so we can use same styles on every sidebar.

frontend/components/Sidebars/Playlist.vue

@@ -0,0 +1,27 @@
+<template>
+	<div class='sidebar' transition='slide' v-if='$parent.sidebars.playlist'>
+		<h1>Hi</h1>
+	</div>
+</template>
+
+<style type='scss' scoped>
+	.sidebar {
+		position: fixed;
+		top: 0;
+		right: 0;
+		width: 300px;
+		height: 100vh;
+		padding: 30px;
+		background-color: #fff;
+		box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+	}
+
+	.slide-transition {
+		transition: transform 0.6s ease-in-out;
+		transform: translateX(0);
+	}
+
+	.slide-enter, .slide-leave {
+		transform: translateX(100%);
+	}
+</style>

frontend/components/Station/Station.vue

@@ -1,5 +1,8 @@
 <template>
 	<station-header></station-header>
+
+	<playlist-sidebar v-if='sidebars.playlist'></playlist-sidebar>
+	
 	<div class="station">
 		<div class="columns is-mobile">
 			<div class="column is-8-desktop is-offset-2-desktop is-12-mobile">
@@ -28,13 +31,18 @@
 							</form>
 							<div class="column is-8-mobile is-5-desktop" style="float: right;">
 								<ul id="ratings" v-if="currentSong.likes !== -1 && currentSong.dislikes !== -1">
-									<li id="like" class="right" @click="toggleLike()"><span class="flow-text">{{currentSong.likes}} </span> <i id="thumbs_up" class="material-icons grey-text" v-bind:class="{liked: liked}">thumb_up</i></li>
-									<li style="margin-right: 10px;" id="dislike" class="right" @click="toggleDislike()"><span class="flow-text">{{currentSong.dislikes}} </span><i id="thumbs_down" class="material-icons grey-text" v-bind:class="{disliked: disliked}">thumb_down</i></li>
+									<li id="like" class="right" @click="toggleLike()">
+										<span class="flow-text">{{currentSong.likes}} </span>
+										<i id="thumbs_up" class="material-icons grey-text" v-bind:class="{liked: liked}">thumb_up</i>
+									</li>
+									<li style="margin-right: 10px;" id="dislike" class="right" @click="toggleDislike()">
+										<span class="flow-text">{{currentSong.dislikes}} </span>
+										<i id="thumbs_down" class="material-icons grey-text" v-bind:class="{disliked: disliked}">thumb_down</i>
+									</li>
 								</ul>
 							</div>
 						</div>
 					</div>
-					<button @click="addSongToQueue('aHjpOzsQ9YI')">ADD CRYSTALIZE!</button>
 					<div class="column is-4-desktop is-12-mobile">
 						<img class="image" id="song-thumbnail" style="margin-top: 10px !important" :src="currentSong.thumbnail" alt="Song Thumbnail" />
 					</div>
@@ -66,7 +74,7 @@
 							<td>
 								<img :src="result.thumbnail" />
 							</td>
-							<td>{{result.title}}</td>
+							<td>{{ result.title }}</td>
 							<td>
 								<a class="button is-success" @click="addSongToQueue(result.id)">
 									Add
@@ -78,17 +86,13 @@
 			</section>
 		</div>
 	</div>
-	<div class="slideout" v-if="slideout.playlist">
-		<h5 class="slideout-header">Playlist</h5>
-		<div class="slideout-content">
-
-		</div>
-	</div>
 </template>
 
 <script>
 	import { Toast } from 'vue-roaster';
 
+	import PlaylistSidebar from '../Sidebars/Playlist.vue';
+
 	import StationHeader from './StationHeader.vue';
 
 	export default {
@@ -105,11 +109,11 @@
 				querySearch: "",
 				queryResults: [],
 				queue: [],
-				slideout: {
-					playlist: false
-				},
 				liked: false,
-				disliked: false
+				disliked: false,
+				sidebars: {
+					playlist: true
+				}
 			}
 		},
 		methods: {
@@ -371,7 +375,7 @@
 			volume = (typeof volume === "number") ? volume : 20;
 			$("#volumeSlider").val(volume);
 		},
-		components: { StationHeader }
+		components: { StationHeader, PlaylistSidebar }
 	}
 </script>
 

frontend/components/Station/StationHeader.vue

@@ -59,7 +59,7 @@
 		</span>-->
 
 		<div class="nav-right">
-			<a class="nav-item" href="#">
+			<a class="nav-item" href="#" @click='$parent.sidebars.playlist = !$parent.sidebars.playlist'>
 				<span class="icon">
 					<i class="material-icons">queue_music</i>
 				</span>