From 055ba5caff6a1f54b165be4b0c8eaff0cb9725a0 Mon Sep 17 00:00:00 2001
From: Richard Lewis <richrd.lewis@gmail.com>
Date: Mon, 5 Aug 2019 17:35:53 +0300
Subject: [PATCH] Remove sidebar wrapper div.

---
 client/components/App.vue              |   4 +-
 client/components/Sidebar.vue          | 128 ++++++++++++-------------
 client/components/Windows/Settings.vue |   1 -
 3 files changed, 64 insertions(+), 69 deletions(-)

diff --git a/client/components/App.vue b/client/components/App.vue
index b58ee181..9c769ed6 100644
--- a/client/components/App.vue
+++ b/client/components/App.vue
@@ -1,7 +1,7 @@
 <template>
-	<!-- TODO: move all class toggling to vue, since vue clears existing classes when changing the notified class -->
 	<div id="viewport" :class="viewportClasses" role="tablist">
-		<Sidebar :networks="networks" :active-channel="activeChannel" />
+		<Sidebar :networks="networks" :active-channel="activeChannel" :overlay="$refs.overlay" />
+		<div id="sidebar-overlay" ref="overlay" @click="$root.setSidebar(false)" />
 		<article id="windows">
 			<Chat
 				v-if="activeChannel"
diff --git a/client/components/Sidebar.vue b/client/components/Sidebar.vue
index 57dd86ba..d60522f7 100644
--- a/client/components/Sidebar.vue
+++ b/client/components/Sidebar.vue
@@ -1,70 +1,65 @@
 <template>
-	<div>
-		<aside id="sidebar" ref="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" />
+	<aside id="sidebar" ref="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>
-			<footer id="footer">
-				<span class="tooltipped tooltipped-n tooltipped-no-touch" aria-label="Sign in"
-					><button
-						class="icon sign-in"
-						data-target="#sign-in"
-						data-component="SignIn"
-						aria-label="Sign in"
-						role="tab"
-						aria-controls="sign-in"
-						aria-selected="false"
-				/></span>
-				<span
-					class="tooltipped tooltipped-n tooltipped-no-touch"
+			<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="#sign-in"
+					data-component="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"
+					data-component="Connect"
 					aria-label="Connect to network"
-					><button
-						class="icon connect"
-						data-target="#connect"
-						data-component="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"
-						data-component="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"
-						data-component="Help"
-						aria-label="Help"
-						role="tab"
-						aria-controls="help"
-						aria-selected="false"
-				/></span>
-			</footer>
-		</aside>
-		<div id="sidebar-overlay" ref="overlay" @click="$root.setSidebar(false)" />
-	</div>
+					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"
+					data-component="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"
+					data-component="Help"
+					aria-label="Help"
+					role="tab"
+					aria-controls="help"
+					aria-selected="false"
+			/></span>
+		</footer>
+	</aside>
 </template>
 
 <script>
@@ -78,6 +73,7 @@ export default {
 	props: {
 		activeChannel: Object,
 		networks: Array,
+		overlay: HTMLElement,
 	},
 	mounted() {
 		this.touchStartPos = null;
@@ -146,7 +142,7 @@ export default {
 			}
 
 			this.$refs.sidebar.style.transform = "translate3d(" + distX + "px, 0, 0)";
-			this.$refs.overlay.style.opacity = distX / this.menuWidth;
+			this.overlay.style.opacity = distX / this.menuWidth;
 		};
 
 		this.onTouchEnd = () => {
@@ -165,7 +161,7 @@ export default {
 			this.$store.commit("sidebarDragging", false);
 
 			this.$refs.sidebar.style.transform = null;
-			this.$refs.overlay.style.opacity = null;
+			this.overlay.style.opacity = null;
 
 			this.touchStartPos = null;
 			this.touchCurPos = null;
diff --git a/client/components/Windows/Settings.vue b/client/components/Windows/Settings.vue
index 9faa0347..a6ad3803 100644
--- a/client/components/Windows/Settings.vue
+++ b/client/components/Windows/Settings.vue
@@ -422,7 +422,6 @@
 </template>
 
 <script>
-// const storage = require("../../js/localStorage");  // TODO: use this
 import socket from "../../js/socket";
 import RevealPassword from "../RevealPassword.vue";
 import Session from "../Session.vue";