Fixes to vue routing and activeWindow.

client/components/ChannelWrapper.vue

@@ -84,7 +84,6 @@ export default {
 		click() {
 			// TODO: Find out why this sometimes throws `uncaught exception: Object`
 			this.$router.push("chan-" + this.channel.id);
-			this.$root.closeSidebarIfNeeded();
 		},
 	},
 };

client/components/Sidebar.vue

@@ -17,36 +17,39 @@
 		</div>
 		<footer id="footer">
 			<span class="tooltipped tooltipped-n tooltipped-no-touch" aria-label="Sign in"
-				><button
-					:class="['icon', 'sign-in', {active: $store.state.activeWindow === 'SignIn'}]"
+				><router-link
+					to="/sign-in"
+					tag="button"
+					active-class="active"
+					:class="['icon', 'sign-in']"
 					data-target="#sign-in"
 					data-component="SignIn"
 					aria-label="Sign in"
 					role="tab"
 					aria-controls="sign-in"
 					:aria-selected="$store.state.activeWindow === 'SignIn'"
-					@click="navigate('sign-in')"
 			/></span>
 			<span
 				class="tooltipped tooltipped-n tooltipped-no-touch"
 				aria-label="Connect to network"
-				><button
-					:class="['icon', 'connect', {active: $store.state.activeWindow === 'Connect'}]"
+				><router-link
+					to="/connect"
+					tag="button"
+					active-class="active"
+					:class="['icon', 'connect']"
 					data-target="#connect"
 					data-component="Connect"
 					aria-label="Connect to network"
 					role="tab"
 					aria-controls="connect"
 					:aria-selected="$store.state.activeWindow === 'Connect'"
-					@click="navigate('connect')"
 			/></span>
 			<span class="tooltipped tooltipped-n tooltipped-no-touch" aria-label="Settings"
-				><button
-					:class="[
-						'icon',
-						'settings',
-						{active: $store.state.activeWindow === 'Settings'},
-					]"
+				><router-link
+					to="/settings"
+					tag="button"
+					active-class="active"
+					:class="['icon', 'settings']"
 					class="icon settings"
 					data-target="#settings"
 					data-component="Settings"
@@ -54,18 +57,19 @@
 					role="tab"
 					aria-controls="settings"
 					:aria-selected="$store.state.activeWindow === 'Settings'"
-					@click="navigate('settings')"
 			/></span>
 			<span class="tooltipped tooltipped-n tooltipped-no-touch" aria-label="Help"
-				><button
-					:class="['icon', 'help', {active: $store.state.activeWindow === 'Help'}]"
+				><router-link
+					to="/help"
+					tag="button"
+					active-class="active"
+					:class="['icon', 'help']"
 					data-target="#help"
 					data-component="Help"
 					aria-label="Help"
 					role="tab"
 					aria-controls="help"
 					:aria-selected="$store.state.activeWindow === 'Help'"
-					@click="navigate('help')"
 			/></span>
 		</footer>
 	</aside>
@@ -182,16 +186,6 @@ export default {
 			this.$store.commit("sidebarOpen", state);
 		};
 
-		this.navigate = (to) => {
-			if (this.activeChannel && this.activeChannel.channel) {
-				this.$root.switchOutOfChannel(this.activeChannel.channel);
-			}
-
-			this.$root.activeChannel = null;
-			this.$root.closeSidebarIfNeeded();
-			this.$router.push(to);
-		};
-
 		document.body.addEventListener("touchstart", this.onTouchStart, {passive: true});
 	},
 	methods: {

client/js/router.js

@@ -13,13 +13,74 @@ const RoutedChat = require("../components/RoutedChat.vue").default;
 
 const router = new VueRouter({
 	routes: [
-		{path: "/sign-in", component: SignIn},
-		{path: "/connect", component: Connect},
-		{path: "/settings", component: Settings},
-		{path: "/help", component: Help},
-		{path: "/changelog", component: Changelog},
-		{path: "/chan-*", component: RoutedChat},
+		{
+			path: "/sign-in",
+			component: SignIn,
+			meta: {
+				isChat: false,
+				windowName: "SignIn",
+			},
+		},
+		{
+			path: "/connect",
+			component: Connect,
+			meta: {
+				isChat: false,
+				windowName: "Connect",
+			},
+		},
+		{
+			path: "/settings",
+			component: Settings,
+			meta: {
+				isChat: false,
+				windowName: "Settings",
+			},
+		},
+		{
+			path: "/help",
+			component: Help,
+			meta: {
+				isChat: false,
+				windowName: "Help",
+			},
+		},
+		{
+			path: "/changelog",
+			component: Changelog,
+			meta: {
+				isChat: false,
+				windowName: "Changelog",
+			},
+		},
+		{
+			path: "/chan-*",
+			component: RoutedChat,
+			meta: {
+				isChat: true,
+				windowName: "RoutedChat",
+			},
+		},
 	],
 });
 
+router.afterEach((to) => {
+	if (!router.app.initialized) {
+		return;
+	}
+
+	router.app.closeSidebarIfNeeded();
+
+	if (!to.meta.isChat) {
+		// Navigating out of a chat window
+		router.app.$store.commit("activeWindow", to.meta.windowName);
+
+		if (router.app.activeChannel && router.app.activeChannel.channel) {
+			router.app.switchOutOfChannel(router.app.activeChannel.channel);
+		}
+
+		router.app.activeChannel = null;
+	}
+});
+
 export default router;