refactor(Sidebars): sidebars are now modular

Signed-off-by: Jonathan <theflametrooper@gmail.com>

frontend/components/Sidebars/Sidebar.vue

@@ -0,0 +1,43 @@
+<template>
+	<div class="sidebar" transition="slide">
+		<div class="inner-wrapper">
+			<div class="sidebar-title">{{ title }}</div>
+			<slot name="content" />
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	props: {
+		title: { type: String }
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+@import "styles/global.scss";
+
+.night-mode {
+	.sidebar {
+		background-color: $night-mode-secondary;
+
+		.sidebar-title {
+			color: #fff;
+		}
+
+		* {
+			color: #ddd;
+		}
+	}
+}
+
+.sidebar-title {
+	background-color: rgb(3, 169, 244);
+	text-align: center;
+	padding: 10px;
+	color: $white;
+	font-weight: 600;
+	font-size: 20px;
+}
+</style>

frontend/components/Sidebars/SongsList.vue

@@ -1,11 +1,6 @@
 <template>
-	<div class="sidebar" transition="slide">
-		<div class="inner-wrapper">
-			<div v-if="station.type === 'community'" class="sidebar-title">
-				Queue
-			</div>
-			<div v-else class="sidebar-title">Playlist</div>
-
+	<sidebar :title="station.type === 'community' ? 'Queue' : 'Playlist'">
+		<template v-slot:content>
 			<article v-if="!noSong" class="media">
 				<figure v-if="currentSong.thumbnail" class="media-left">
 					<p class="image is-64x64">
@@ -120,8 +115,8 @@
 					THIS STATION'S QUEUE IS LOCKED.
 				</button>
 			</div>
-		</div>
-	</div>
+		</template>
+	</sidebar>
 </template>
 
 <script>
@@ -130,6 +125,8 @@ import Toast from "toasters";
 
 import utils from "../../js/utils";
 
+import Sidebar from "./Sidebar.vue";
+
 import UserIdToUsername from "../UserIdToUsername.vue";
 
 export default {
@@ -173,48 +170,18 @@ export default {
 		},
 		...mapActions("modals", ["openModal"])
 	},
-	mounted() {
-		/*
-			io.getSocket((socket) => {
-				this.socket = socket;
-
-			}); */
-	},
-	components: { UserIdToUsername }
+	components: { UserIdToUsername, Sidebar }
 };
 </script>
 
 <style lang="scss" scoped>
 @import "styles/global.scss";
 
-.night-mode {
-	.sidebar {
-		background-color: $night-mode-secondary;
-
-		.sidebar-title {
-			color: #fff;
-		}
-
-		* {
-			color: #ddd;
-		}
-	}
-}
-
 .inner-wrapper {
 	overflow: auto;
 	height: 100%;
 }
 
-.sidebar-title {
-	background-color: rgb(3, 169, 244);
-	text-align: center;
-	padding: 10px;
-	color: $white;
-	font-weight: 600;
-	font-size: 20px;
-}
-
 .media {
 	padding: 0 25px;
 }

frontend/components/Sidebars/UsersList.vue

@@ -1,7 +1,6 @@
 <template>
-	<div class="sidebar" transition="slide">
-		<div class="inner-wrapper">
-			<div class="sidebar-title">Users</div>
+	<sidebar title="Users">
+		<template v-slot:content>
 			<h5 class="has-text-centered">Total users: {{ userCount }}</h5>
 			<aside class="menu">
 				<ul class="menu-list">
@@ -15,47 +14,25 @@
 					</li>
 				</ul>
 			</aside>
-		</div>
-	</div>
+		</template>
+	</sidebar>
 </template>
 
 <script>
 import { mapState } from "vuex";
 
+import Sidebar from "./Sidebar.vue";
+
 export default {
 	computed: mapState({
 		users: state => state.station.users,
 		userCount: state => state.station.userCount
-	})
+	}),
+	components: { Sidebar }
 };
 </script>
 
 <style lang="scss" scoped>
-@import "styles/global.scss";
-
-.night-mode {
-	.sidebar {
-		background-color: $night-mode-secondary;
-
-		.sidebar-title {
-			color: #fff;
-		}
-
-		* {
-			color: #ddd;
-		}
-	}
-}
-
-.sidebar-title {
-	background-color: rgb(3, 169, 244);
-	text-align: center;
-	padding: 10px;
-	color: $white;
-	font-weight: 600;
-	font-size: 20px;
-}
-
 .menu {
 	padding: 0 20px;
 }