From e71360ad39add8d06576bdbcf10a0c54c4dda1ae Mon Sep 17 00:00:00 2001
From: Richard Lewis <richrd.lewis@gmail.com>
Date: Fri, 22 Feb 2019 16:21:32 +0200
Subject: [PATCH] Move sidebar to its own component.

---
 client/components/App.vue     | 67 ++++--------------------------
 client/components/Sidebar.vue | 78 +++++++++++++++++++++++++++++++++++
 2 files changed, 86 insertions(+), 59 deletions(-)
 create mode 100644 client/components/Sidebar.vue

diff --git a/client/components/App.vue b/client/components/App.vue
index d23fd99a..c1d629a6 100644
--- a/client/components/App.vue
+++ b/client/components/App.vue
@@ -1,63 +1,10 @@
 <template>
-	<div id="viewport" role="tablist">
-		<aside id="sidebar">
-			<div class="scrollable-area">
-				<div class="logo-container">
-					<img
-						:src="`img/logo-${isPublic() ? 'horizontal-' : ''}transparent-bg.svg`"
-						class="logo"
-						alt="The Lounge"
-					/>
-					<img
-						:src="
-							`img/logo-${isPublic() ? 'horizontal-' : ''}transparent-bg-inverted.svg`
-						"
-						class="logo-inverted"
-						alt="The Lounge"
-					/>
-				</div>
-				<NetworkList :networks="networks" :active-channel="activeChannel" />
-			</div>
-			<footer id="footer">
-				<span
-					class="tooltipped tooltipped-n tooltipped-no-touch"
-					aria-label="Sign in"><button
-						class="icon sign-in"
-						data-target="SignIn"
-						aria-label="Sign in"
-						role="tab"
-						aria-controls="sign-in"
-						aria-selected="false" /></span>
-				<span
-					class="tooltipped tooltipped-n tooltipped-no-touch"
-					aria-label="Connect to network"><button
-						class="icon connect"
-						data-target="Connect"
-						aria-label="Connect to network"
-						role="tab"
-						aria-controls="connect"
-						aria-selected="false" /></span>
-				<span
-					class="tooltipped tooltipped-n tooltipped-no-touch"
-					aria-label="Settings"><button
-						class="icon settings"
-						data-target="Settings"
-						aria-label="Settings"
-						role="tab"
-						aria-controls="settings"
-						aria-selected="false" /></span>
-				<span
-					class="tooltipped tooltipped-n tooltipped-no-touch"
-					aria-label="Help"><button
-						class="icon help"
-						data-target="Help"
-						aria-label="Help"
-						role="tab"
-						aria-controls="help"
-						aria-selected="false" /></span>
-			</footer>
-		</aside>
-		<div id="sidebar-overlay" />
+	<div
+		id="viewport"
+		role="tablist">
+		<Sidebar
+			:networks="networks"
+			:active-channel="activeChannel" />
 		<article id="windows">
 			<Chat
 				v-if="activeChannel"
@@ -73,6 +20,7 @@
 <script>
 const throttle = require("lodash/throttle");
 
+import Sidebar from "./Sidebar.vue";
 import NetworkList from "./NetworkList.vue";
 import Chat from "./Chat.vue";
 import SignIn from "./Windows/SignIn.vue";
@@ -83,6 +31,7 @@ import Changelog from "./Windows/Changelog.vue";
 export default {
 	name: "App",
 	components: {
+		Sidebar,
 		NetworkList,
 		Chat,
 		SignIn,
diff --git a/client/components/Sidebar.vue b/client/components/Sidebar.vue
new file mode 100644
index 00000000..57629126
--- /dev/null
+++ b/client/components/Sidebar.vue
@@ -0,0 +1,78 @@
+<template>
+	<div>
+		<aside id="sidebar">
+			<div class="scrollable-area">
+				<div class="logo-container">
+					<img
+						:src="`img/logo-${isPublic() ? 'horizontal-' : ''}transparent-bg.svg`"
+						class="logo"
+						alt="The Lounge">
+					<img
+						:src="`img/logo-${isPublic() ? 'horizontal-' : ''}transparent-bg-inverted.svg`"
+						class="logo-inverted"
+						alt="The Lounge">
+				</div>
+				<NetworkList
+					:networks="networks"
+					:active-channel="activeChannel" />
+			</div>
+			<footer id="footer">
+				<span
+					class="tooltipped tooltipped-n tooltipped-no-touch"
+					aria-label="Sign in"><button
+						class="icon sign-in"
+						data-target="SignIn"
+						aria-label="Sign in"
+						role="tab"
+						aria-controls="sign-in"
+						aria-selected="false" /></span>
+				<span
+					class="tooltipped tooltipped-n tooltipped-no-touch"
+					aria-label="Connect to network"><button
+						class="icon connect"
+						data-target="Connect"
+						aria-label="Connect to network"
+						role="tab"
+						aria-controls="connect"
+						aria-selected="false" /></span>
+				<span
+					class="tooltipped tooltipped-n tooltipped-no-touch"
+					aria-label="Settings"><button
+						class="icon settings"
+						data-target="Settings"
+						aria-label="Settings"
+						role="tab"
+						aria-controls="settings"
+						aria-selected="false" /></span>
+				<span
+					class="tooltipped tooltipped-n tooltipped-no-touch"
+					aria-label="Help"><button
+						class="icon help"
+						data-target="Help"
+						aria-label="Help"
+						role="tab"
+						aria-controls="help"
+						aria-selected="false" /></span>
+			</footer>
+		</aside>
+		<div id="sidebar-overlay" />
+	</div>
+</template>
+
+<script>
+import NetworkList from "./NetworkList.vue";
+
+export default {
+	name: "Sidebar",
+	components: {
+		NetworkList,
+	},
+	props: {
+		activeChannel: Object,
+		networks: Array,
+	},
+	methods: {
+		isPublic: () => document.body.classList.contains("public"),
+	},
+};
+</script>