Merge pull request #5649 from RocketChat/fix-sidenav-opening-responsive

fix sidenav in window resize

packages/rocketchat-theme/client/imports/base.less

@@ -4381,83 +4381,6 @@ body:not(.is-cordova) {
 	background: none;
 }
 
-@media all and(max-width: 1100px) {
-	.flex-tab-container.opened {
-		.flex-tab {
-			position: absolute;
-			right: 40px;
-			border-width: 0 0 0 1px;
-			height: 100%;
-		}
-	}
-}
-
-@media all and(max-width: 780px) {
-	#rocket-chat {
-		.burger {
-			visibility: visible;
-			display: inline-block;
-		}
-
-		.main-content {
-			left: 0;
-			z-index: 120;
-		}
-
-		.fixed-title h2 {
-			margin-left: 45px;
-		}
-
-		.messages-box {
-			padding: 0 10px;
-		}
-	}
-
-	.sweet-alert {
-		h2 {
-			font-size: 20px;
-			line-height: 30px;
-			margin: 10px 0;
-		}
-
-		button {
-			margin-top: 6px;
-			padding: 10px 22px;
-		}
-	}
-}
-
-@media all and(max-width: 440px) {
-	.flex-tab-container.opened {
-		position: absolute;
-		width: 100%;
-		height: 100%;
-		top: 0;
-		left: 0;
-
-		.flex-tab {
-			position: relative;
-			right: auto;
-		}
-	}
-}
-
-@media all and(max-height: 400px) {
-	.upload-preview .upload-preview-file {
-		height: 100px;
-	}
-}
-
-@media all and(max-width: 500px) {
-	.messages-container {
-		.message-form {
-			> .formatting-tips {
-				display: none;
-			}
-		}
-	}
-}
-
 .dropzone {
 	height: 100%;
 
@@ -4511,35 +4434,6 @@ body:not(.is-cordova) {
 	}
 }
 
-@media all and(max-height: 480px) {
-	#login-card {
-		padding: 10px;
-		margin: 10px auto;
-
-		.input-line {
-			margin-bottom: 6px;
-		}
-
-		.submit {
-			margin: 0;
-		}
-	}
-
-	.social-login {
-		margin-bottom: 10px;
-	}
-
-	.message-form textarea {
-		max-height: 100px !important;
-	}
-}
-
-@media all and(max-height: 260px) {
-	.message-form textarea {
-		max-height: 50px !important;
-	}
-}
-
 .webrtc-video {
 	&.webrtc-video-overlay,
 	.main-video,
@@ -4869,36 +4763,6 @@ body:not(.is-cordova) {
 	top: 19px;
 }
 
-@media all and(max-width: 780px) {
-	.code-mirror-box {
-		&.code-mirror-box-fullscreen {
-			left: 0;
-		}
-	}
-
-	.container-bars {
-		.unread-bar {
-			.unread-count {
-				display: inline-block;
-			}
-
-			.unread-count-since {
-				display: none;
-			}
-
-			> button.jump-to {
-				.jump-to-small {
-					display: inline-block;
-				}
-
-				.jump-to-large {
-					display: none;
-				}
-			}
-		}
-	}
-}
-
 .one-passsword {
 	background-image: url('/images/onepassword-button.png');
 	height: 40px;
@@ -5042,3 +4906,145 @@ a + br.only-after-a {
 #swipebox-overlay {
 	background: rgba(13, 13, 13, 0.5);
 }
+
+// MEDIA QUERIES
+
+@media all and(max-width: 1100px) {
+	.flex-tab-container.opened {
+		.flex-tab {
+			position: absolute;
+			right: 40px;
+			border-width: 0 0 0 1px;
+			height: 100%;
+		}
+	}
+}
+
+@media all and(min-width: 781px) {
+	.main-content {
+		transform: translateX(0) !important;
+	}
+}
+
+@media all and(max-width: 780px) {
+	#rocket-chat {
+		.burger {
+			visibility: visible;
+			display: inline-block;
+		}
+
+		.main-content {
+			left: 0;
+			z-index: 120;
+		}
+
+		.fixed-title h2 {
+			margin-left: 45px;
+		}
+
+		.messages-box {
+			padding: 0 10px;
+		}
+	}
+
+	.sweet-alert {
+		h2 {
+			font-size: 20px;
+			line-height: 30px;
+			margin: 10px 0;
+		}
+
+		button {
+			margin-top: 6px;
+			padding: 10px 22px;
+		}
+	}
+
+	.code-mirror-box {
+		&.code-mirror-box-fullscreen {
+			left: 0;
+		}
+	}
+
+	.container-bars {
+		.unread-bar {
+			.unread-count {
+				display: inline-block;
+			}
+
+			.unread-count-since {
+				display: none;
+			}
+
+			> button.jump-to {
+				.jump-to-small {
+					display: inline-block;
+				}
+
+				.jump-to-large {
+					display: none;
+				}
+			}
+		}
+	}
+}
+
+@media all and(max-width: 500px) {
+	.messages-container {
+		.message-form {
+			> .formatting-tips {
+				display: none;
+			}
+		}
+	}
+}
+
+@media all and(max-height: 480px) {
+	#login-card {
+		padding: 10px;
+		margin: 10px auto;
+
+		.input-line {
+			margin-bottom: 6px;
+		}
+
+		.submit {
+			margin: 0;
+		}
+	}
+
+	.social-login {
+		margin-bottom: 10px;
+	}
+
+	.message-form textarea {
+		max-height: 100px !important;
+	}
+}
+
+@media all and(max-width: 440px) {
+	.flex-tab-container.opened {
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		top: 0;
+		left: 0;
+
+		.flex-tab {
+			position: relative;
+			right: auto;
+		}
+	}
+}
+
+@media all and(max-height: 400px) {
+	.upload-preview .upload-preview-file {
+		height: 100px;
+	}
+}
+
+@media all and(max-height: 260px) {
+	.message-form textarea {
+		max-height: 50px !important;
+	}
+}