From cdebd532ce3dbf48f92834bbf74668c052a07d5f Mon Sep 17 00:00:00 2001
From: Pavel Djundik <github@xpaw.me>
Date: Thu, 28 Jun 2018 10:45:40 +0300
Subject: [PATCH] Make menu state consistent on desktop and mobile; fix sliding
 on desktop

Fixes #2572
---
 client/css/style.css            | 14 +++++++-------
 client/js/slideout.js           | 10 +++++++++-
 client/js/socket-events/init.js |  2 +-
 client/themes/default.css       | 12 +++---------
 4 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/client/css/style.css b/client/css/style.css
index d53ba3f4..d4d3e9a3 100644
--- a/client/css/style.css
+++ b/client/css/style.css
@@ -515,9 +515,14 @@ kbd {
 }
 
 #sidebar {
-	display: flex;
+	display: none;
 	flex-direction: column;
 	width: 220px;
+	will-change: transform;
+}
+
+#viewport.menu-open #sidebar {
+	display: flex;
 }
 
 #sidebar .scrollable-area {
@@ -541,11 +546,6 @@ kbd {
 	display: none;
 }
 
-#viewport.menu-open #sidebar {
-	display: none;
-	will-change: transform;
-}
-
 #sidebar .chan,
 #sidebar .empty {
 	color: #b7c5d1;
@@ -2340,6 +2340,7 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 	}
 
 	#sidebar {
+		display: flex;
 		background: var(--body-bg-color);
 		height: 100%;
 		position: absolute;
@@ -2367,7 +2368,6 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 	}
 
 	#viewport.menu-open #sidebar {
-		display: flex;
 		transform: translate3d(220px, 0, 0);
 	}
 
diff --git a/client/js/slideout.js b/client/js/slideout.js
index 89fc41f8..63dfba64 100644
--- a/client/js/slideout.js
+++ b/client/js/slideout.js
@@ -10,6 +10,7 @@ let touchStartTime = 0;
 let menuWidth = 0;
 let menuIsOpen = false;
 let menuIsMoving = false;
+let menuIsAbsolute = false;
 
 class SlideoutMenu {
 	static enable() {
@@ -33,8 +34,10 @@ function onTouchStart(e) {
 	}
 
 	const touch = e.touches.item(0);
+	const styles = window.getComputedStyle(menu);
 
-	menuWidth = parseFloat(window.getComputedStyle(menu).width);
+	menuWidth = parseFloat(styles.width);
+	menuIsAbsolute = styles.position === "absolute";
 
 	if (!menuIsOpen || touch.screenX > menuWidth) {
 		touchStartPos = touch;
@@ -68,6 +71,11 @@ function onTouchMove(e) {
 		}
 	}
 
+	// Do not animate the menu on desktop view
+	if (!menuIsAbsolute) {
+		return;
+	}
+
 	if (menuIsOpen) {
 		distX += menuWidth;
 	}
diff --git a/client/js/socket-events/init.js b/client/js/socket-events/init.js
index d6738a29..1db06897 100644
--- a/client/js/socket-events/init.js
+++ b/client/js/socket-events/init.js
@@ -45,7 +45,7 @@ socket.on("init", function(data) {
 		let isUserlistOpen = storage.get("thelounge.state.userlist");
 
 		if (viewportWidth >= utils.mobileViewportPixels) {
-			slideoutMenu.toggle(storage.get("thelounge.state.sidebar") === "true");
+			slideoutMenu.toggle(storage.get("thelounge.state.sidebar") !== "false");
 		}
 
 		// If The Lounge is opened on a small screen (less than 1024px), and we don't have stored
diff --git a/client/themes/default.css b/client/themes/default.css
index 9b3c0ee6..64625bf5 100644
--- a/client/themes/default.css
+++ b/client/themes/default.css
@@ -1,17 +1,11 @@
 #viewport {
 	padding: 5px;
+}
+
+#viewport.menu-open {
 	padding-left: 0;
 }
 
-#viewport.menu-open { /* On desktop view, .menu-open means menu is closed... */
-	padding-left: 5px;
-}
-
-#viewport #loading, /* ... except on pages without a menu */
-#viewport #sign-in {
-	margin-left: 5px;
-}
-
 #windows .window {
 	border-radius: 5px;
 	box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);