Added toggleSidebar function which closes all other sidebars, and removed toggleModal function

frontend/components/Modals/AddSongToQueue.vue

@@ -4,7 +4,7 @@
 		<div class="modal-card">
 			<header class="modal-card-head">
 				<p class="modal-card-title">Add Songs to Station</p>
-				<button class="delete" @click="$parent.toggleModal('addSongToQueue')" ></button>
+				<button class="delete" @click="$parent.modals.addSongToQueue = !$parent.modals.addSongToQueue" ></button>
 			</header>
 			<section class="modal-card-body">
 				<aside class='menu' v-if='$parent.$parent.loggedIn && $parent.type === "community"'>
@@ -134,8 +134,8 @@
 			});
 		},
 		events: {
-			closeModal: function() {
-				this.$parent.toggleModal('addSongToQueue')
+			closeModal: function () {
+				this.$parent.modals.addSongToQueue = !this.$parent.modals.addSongToQueue;
 			}
 		}
 	}

frontend/components/Modals/EditStation.vue

@@ -4,7 +4,7 @@
 		<div class='modal-card'>
 			<header class='modal-card-head'>
 				<p class='modal-card-title'>Edit station</p>
-				<button class='delete' @click='$parent.toggleModal("editStation")'></button>
+				<button class='delete' @click='$parent.modals.editStation = !$parent.modals.editStation'></button>
 			</header>
 			<section class='modal-card-body'>
 				<label class='label'>Display name</label>
@@ -122,7 +122,7 @@
 		},
 		events: {
 			closeModal: function() {
-				this.$parent.toggleModal("editStation")
+				this.$parent.modals.editStation = !this.$parent.modals.editStation;
 			}
 		}
 	}

frontend/components/Modals/Playlists/Create.vue

@@ -4,7 +4,7 @@
 		<div class='modal-card'>
 			<header class='modal-card-head'>
 				<p class='modal-card-title'>Create Playlist</p>
-				<button class='delete' @click='$parent.toggleModal("createPlaylist")'></button>
+				<button class='delete' @click='$parent.modals.createPlaylist = !$parent.modals.createPlaylist'></button>
 			</header>
 			<section class='modal-card-body'>
 				<p class='control is-expanded'>
@@ -39,7 +39,7 @@
 				_this.socket.emit('playlists.create', _this.playlist, res => {
 					Toast.methods.addToast(res.message, 3000);
 				});
-				this.$parent.toggleModal('createPlaylist');
+				this.$parent.modals.createPlaylist = !this.$parent.modals.createPlaylist;
 			}
 		},
 		ready: function () {
@@ -50,7 +50,7 @@
 		},
 		events: {
 			closeModal: function() {
-				this.$parent.toggleModal("createPlaylist");
+				this.$parent.modals.createPlaylist = !this.$parent.modals.createPlaylist;
 			}
 		}
 	}

frontend/components/Modals/Playlists/Edit.vue

@@ -4,7 +4,7 @@
 		<div class='modal-card'>
 			<header class='modal-card-head'>
 				<p class='modal-card-title'>Editing: {{ playlist.displayName }}</p>
-				<button class='delete' @click='$parent.toggleModal("editPlaylist")'></button>
+				<button class='delete' @click='$parent.modals.editPlaylist = !$parent.modals.editPlaylist'></button>
 			</header>
 			<section class='modal-card-body'>
 				<aside class='menu' v-if='playlist.songs && playlist.songs.length > 0'>
@@ -145,7 +145,7 @@
 				_this.socket.emit('playlists.remove', _this.playlist._id, res => {
 					if (res.status === 'success') {
 						Toast.methods.addToast(res.message, 3000);
-						_this.$parent.toggleModal('editPlaylist');
+						_this.$parent.modals.editPlaylist = !_this.$parent.modals.editPlaylist;
 					}
 				});
 			},
@@ -206,7 +206,7 @@
 		},
 		events: {
 			closeModal: function() {
-				this.$parent.toggleModal("editPlaylist");
+				this.$parent.modals.editPlaylist = !this.$parent.modals.editPlaylist;
 			}
 		}
 	}

frontend/components/Modals/Report.vue

@@ -198,7 +198,7 @@
 		},
 		events: {
 			closeModal: function () {
-				this.$parent.toggleModal('report');
+				this.$parent.modals.report = !this.$parent.modals.report;
 			}
 		},
 		ready: function () {

frontend/components/Sidebars/Playlist.vue

@@ -22,7 +22,7 @@
 
 			<div class='none-found' v-else>No Playlists found</div>
 
-			<a class='button create-playlist' href='#' @click='$parent.toggleModal("createPlaylist")'>Create Playlist</a>
+			<a class='button create-playlist' href='#' @click='$parent.modals.createPlaylist = !$parent.modals.createPlaylist'>Create Playlist</a>
 		</div>
 	</div>
 </template>

frontend/components/Sidebars/Queue.vue

@@ -32,7 +32,7 @@
 				</div>
 			</article>
 
-			<a class='button add-to-queue' href='#' @click='$parent.toggleModal("addSongToQueue")'>Add Song to Queue</a>
+			<a class='button add-to-queue' href='#' @click='$parent.modals.addSongToQueue = !$parent.modals.addSongToQueue'>Add Song to Queue</a>
 		</div>
 	</div>
 </template>

frontend/components/Station/CommunityHeader.vue

@@ -4,7 +4,7 @@
 			<a class='nav-item logo' href='#' v-link='{ path: "/" }' @click='this.$dispatch("leaveStation", title)'>
 				Musare
 			</a>
-			<a class='nav-item' href='#' v-if='isOwner()' @click='$parent.toggleModal("editStation")'>
+			<a class='nav-item' href='#' v-if='isOwner()' @click='$parent.modals.editStation = !$parent.modals.editStation'>
 				<span class='icon'>
 					<i class='material-icons'>settings</i>
 				</span>
@@ -48,7 +48,7 @@
 		</span>
 
 		<div class="nav-right nav-menu" :class="{ 'is-active': isMobile }">
-			<a class='nav-item' href='#' @click='$parent.sidebars.queue = !$parent.sidebars.queue' v-if='$parent.station.partyMode === true'>
+			<a class='nav-item' href='#' @click='$parent.toggleSidebar("queue")' v-if='$parent.station.partyMode === true'>
 				<span class='icon'>
 					<i class='material-icons'>queue_music</i>
 				</span>
@@ -58,12 +58,12 @@
 					<i class='material-icons'>chat</i>
 				</span>
 			</a>-->
-			<!--<a class='nav-item' href='#' @click='$parent.sidebars.users = !$parent.sidebars.users'>
+			<!--<a class='nav-item' href='#' @click='$parent.toggleSidebar("users")'>
 				<span class='icon'>
 					<i class='material-icons'>people</i>
 				</span>
 			</a>-->
-			<a class='nav-item' href='#' @click='$parent.sidebars.playlist = !$parent.sidebars.playlist' v-if='$parent.$parent.loggedIn'>
+			<a class='nav-item' href='#' @click='$parent.toggleSidebar("playlist")' v-if='$parent.$parent.loggedIn'>
 				<span class='icon'>
 					<i class='material-icons'>library_music</i>
 				</span>

frontend/components/Station/OfficialHeader.vue

@@ -4,12 +4,12 @@
 			<a class='nav-item logo' href='#' v-link='{ path: "/" }' @click='this.$dispatch("leaveStation", title)'>
 				Musare
 			</a>
-			<a class='nav-item' href='#' v-if='isOwner()' @click='$parent.toggleModal("editStation")'>
+			<a class='nav-item' href='#' v-if='isOwner()' @click='$parent.modals.editStation = !$parent.modals.editStation'>
 				<span class='icon'>
 					<i class='material-icons'>settings</i>
 				</span>
 			</a>
-			<a class='nav-item' href='#' @click='$parent.toggleModal("addSongToQueue")' v-if='$parent.type === "official" && $parent.$parent.loggedIn'>
+			<a class='nav-item' href='#' @click='$parent.modals.addSongToQueue = !$parent.modals.addSongToQueue' v-if='$parent.type === "official" && $parent.$parent.loggedIn'>
 				<span class='icon'>
 					<i class='material-icons'>queue_music</i>
 				</span>
@@ -53,7 +53,7 @@
 		</span>
 
 		<div class="nav-right nav-menu" :class="{ 'is-active': isMobile }">
-			<a class='nav-item' href='#' @click='$parent.sidebars.officialqueue = !$parent.sidebars.officialqueue'>
+			<a class='nav-item' href='#' @click='$parent.toggleSidebar("officialqueue")'>
 				<span class='icon'>
 					<i class='material-icons'>queue_music</i>
 				</span>
@@ -63,16 +63,11 @@
 					<i class='material-icons'>chat</i>
 				</span>
 			</a>-->
-			<!--<a class='nav-item' href='#' @click='$parent.sidebars.users = !$parent.sidebars.users'>
+			<!--<a class='nav-item' href='#' @click='$parent.toggleSidebar("users")'>
 				<span class='icon'>
 					<i class='material-icons'>people</i>
 				</span>
 			</a>-->
-			<!--a class='nav-item' href='#' @click='$parent.sidebars.playlist = !$parent.sidebars.playlist'>
-				<span class='icon'>
-					<i class='material-icons'>library_music</i>
-				</span>
-			</a-->
 		</div>
 	</nav>
 </template>

frontend/components/Station/Station.vue

@@ -114,7 +114,7 @@
 				},
 				sidebars: {
 					queue: false,
-					officialqueue: true,
+					officialqueue: false,
 					users: false,
 					playlist: false
 				},
@@ -133,12 +133,11 @@
 				this.playlistBeingEdited = id;
 				this.toggleModal('editPlaylist');
 			},
-			toggleModal: function (type) {
-				if (type == 'addSongToQueue') this.modals.addSongToQueue = !this.modals.addSongToQueue;
-				else if (type == 'editPlaylist') this.modals.editPlaylist = !this.modals.editPlaylist;
-				else if (type == 'createPlaylist') this.modals.createPlaylist = !this.modals.createPlaylist;
-				else if (type == 'editStation') this.modals.editStation = !this.modals.editStation;
-				else if (type == 'report') this.modals.report = !this.modals.report;
+			toggleSidebar: function (type) {
+				Object.keys(this.sidebars).forEach(sidebar => {
+					if (sidebar !== type) this.sidebars[sidebar] = false;
+					else this.sidebars[type] = !this.sidebars[type];
+				});
 			},
 			youtubeReady: function() {
 				let local = this;