Refactor sidebar behaviour to no longer use methods in root Vue instance

client/components/App.vue

@@ -1,7 +1,7 @@
 <template>
 	<div id="viewport" :class="viewportClasses" role="tablist">
 		<Sidebar :overlay="$refs.overlay" />
-		<div id="sidebar-overlay" ref="overlay" @click="$root.setSidebar(false)" />
+		<div id="sidebar-overlay" ref="overlay" @click="$store.commit('sidebarOpen', false)" />
 		<article id="windows">
 			<router-view ref="window"></router-view>
 		</article>

client/components/SidebarToggle.vue

@@ -1,5 +1,5 @@
 <template>
-	<button class="lt" aria-label="Toggle channel list" @click="$root.toggleSidebar" />
+	<button class="lt" aria-label="Toggle channel list" @click="$store.commit('toggleSidebar')" />
 </template>
 
 <script>

client/js/router.js

@@ -13,6 +13,7 @@ const Help = require("../components/Windows/Help.vue").default;
 const Changelog = require("../components/Windows/Changelog.vue").default;
 const NetworkEdit = require("../components/Windows/NetworkEdit.vue").default;
 const RoutedChat = require("../components/RoutedChat.vue").default;
+const constants = require("./constants");
 
 const router = new VueRouter({
 	routes: [
@@ -66,7 +67,9 @@ router.beforeEach((to, from, next) => {
 
 router.afterEach((to) => {
 	if (store.state.appLoaded) {
-		router.app.closeSidebarIfNeeded();
+		if (window.innerWidth <= constants.mobileViewportPixels) {
+			store.commit("sidebarOpen", false);
+		}
 	}
 
 	if (to.name !== "RoutedChat") {

client/js/socket-events/init.js

@@ -29,7 +29,7 @@ socket.on("init", function(data) {
 		let isUserlistOpen = storage.get("thelounge.state.userlist");
 
 		if (viewportWidth > constants.mobileViewportPixels) {
-			vueApp.setSidebar(storage.get("thelounge.state.sidebar") !== "false");
+			store.commit("sidebarOpen", storage.get("thelounge.state.sidebar") !== "false");
 		}
 
 		// If The Lounge is opened on a small screen (less than 1024px), and we don't have stored

client/js/store.js

@@ -93,6 +93,9 @@ const store = new Vuex.Store({
 		sidebarDragging(state, payload) {
 			state.sidebarDragging = payload;
 		},
+		toggleSidebar(state) {
+			state.sidebarOpen = !state.sidebarOpen;
+		},
 		userlistOpen(state, payload) {
 			state.userlistOpen = payload;
 		},

client/js/vue.js

@@ -36,23 +36,6 @@ const vueApp = new Vue({
 		}, 1);
 	},
 	methods: {
-		setSidebar(state) {
-			this.$store.commit("sidebarOpen", state);
-
-			if (window.outerWidth > constants.mobileViewportPixels) {
-				storage.set("thelounge.state.sidebar", state);
-			}
-
-			this.$emit("resize");
-		},
-		toggleSidebar() {
-			this.setSidebar(!this.$store.state.sidebarOpen);
-		},
-		closeSidebarIfNeeded() {
-			if (window.innerWidth <= constants.mobileViewportPixels) {
-				this.setSidebar(false);
-			}
-		},
 		setUserlist(state) {
 			storage.set("thelounge.state.userlist", state);
 			this.$store.commit("userlistOpen", state);
@@ -142,6 +125,17 @@ const vueApp = new Vue({
 	store,
 });
 
+store.watch(
+	(state) => state.sidebarOpen,
+	(sidebarOpen) => {
+		if (window.outerWidth > constants.mobileViewportPixels) {
+			storage.set("thelounge.state.sidebar", sidebarOpen);
+		}
+
+		vueApp.$emit("resize");
+	}
+);
+
 Vue.config.errorHandler = function(e) {
 	store.commit("currentUserVisibleError", `Vue error: ${e.message}`);
 	console.error(e); // eslint-disable-line