Merge pull request #2601 from thelounge/xpaw/fix-2572

Make menu state consistent on desktop and mobile; fix sliding on desktop

client/css/style.css

@@ -526,9 +526,14 @@ kbd {
 }
 
 #sidebar {
-	display: flex;
+	display: none;
 	flex-direction: column;
 	width: 220px;
+	will-change: transform;
+}
+
+#viewport.menu-open #sidebar {
+	display: flex;
 }
 
 #sidebar .scrollable-area {
@@ -552,11 +557,6 @@ kbd {
 	display: none;
 }
 
-#viewport.menu-open #sidebar {
-	display: none;
-	will-change: transform;
-}
-
 #sidebar .chan,
 #sidebar .empty {
 	color: #b7c5d1;
@@ -2360,6 +2360,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;
@@ -2387,7 +2388,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);
 	}
 

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;
 	}

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

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);