MM-27936: Allow resizing the channel sidebar and right-hand sidebar (#23117)

* MM-27936: Resize sidebar

* separate sidebar related constants into different file

* reset style when sidebar expanded

* change not to save user_id when saving to local_storage

* prevent a separation between the rhs and the main center panel

* change variable name

* migrate to css-based paradigm

* delete unnecessary files

* update snapshot

* increase the resizable range

* fix transition

* Made RHS and LHS widths not be saved scoped by team

* scope cleanup

* fix lhs header menu ellipsis/tolerances

* fix lint

* remove a ref from a dependency

* return null instead of empty jsx

* return null when disabled

---------

Co-authored-by: Mattermost Build <build@mattermost.com>
Co-authored-by: harshil Sharma <harshilsharma63@gmail.com>
Co-authored-by: Caleb Roseland <caleb@calebroseland.com>

webapp/channels/src/sass/layout/_sidebar-left.scss

@@ -24,15 +24,31 @@ $sidebarOpacityAnimationDuration: 0.15s;
 }
 
 #SidebarContainer {
+    position: relative;
     z-index: 16;
     left: 0;
     display: flex;
-    width: 240px;
+    width: var(--overrideLhsWidth, 240px);
+    min-width: 240px;
+    max-width: 240px;
     height: 100%;
     flex-direction: column;
     border-right: 1px solid rgba(var(--center-channel-color-rgb), 0.12);
     background-color: var(--sidebar-bg);
 
+    @media screen and (min-width: 769px) {
+        min-width: 200px;
+        max-width: 264px;
+    }
+
+    @media screen and (min-width: 1201px) {
+        max-width: 304px;
+    }
+
+    @media screen and (min-width: 1681px) {
+        max-width: 440px;
+    }
+
     h1,
     h2,
     h3 {
@@ -376,11 +392,13 @@ $sidebarOpacityAnimationDuration: 0.15s;
 
     .sidebar-header {
         display: flex;
+        overflow: hidden;
         flex-direction: row;
         align-items: center;
     }
 
     .SidebarHeaderMenuWrapper {
+        overflow: hidden;
         padding-left: 5px;
         background: transparent;
         border-radius: 4px;
@@ -1159,7 +1177,7 @@ $sidebarOpacityAnimationDuration: 0.15s;
     .SidebarChannel .SidebarLink {
         position: relative;
         display: flex;
-        width: 240px;
+        width: 100%;
         height: 32px;
         align-items: center;
         padding: 7px 16px 7px 19px;
@@ -1361,8 +1379,6 @@ $sidebarOpacityAnimationDuration: 0.15s;
 
 .multi-teams {
     #SidebarContainer {
-        left: 65px;
-
         +.inner-wrap #app-content {
             margin-left: 305px;
         }
@@ -1396,11 +1412,15 @@ $sidebarOpacityAnimationDuration: 0.15s;
 }
 
 // Manual override of the global menu (and items) styling for the sidebar dropdown menu
-#sidebarDropdownMenu .MenuItem {
-    >button,
-    >div,
-    >a {
-        padding: 0 32px 0 24px;
+#sidebarDropdownMenu {
+    position: fixed;
+
+    .MenuItem {
+        >button,
+        >div,
+        >a {
+            padding: 0 32px 0 24px;
+        }
     }
 }
 

webapp/channels/src/sass/layout/_sidebar-right.scss

@@ -5,18 +5,49 @@
         display: none;
     }
 
-    width: 400px;
-    transition: width 0.25s 0s ease-in, z-index 0.25s 0s step-end;
+    body:not(.layout-changing) & {
+        transition: width 0.25s 0s ease-in, z-index 0.25s 0s step-end;
+    }
+
+    width: var(--overrideRhsWidth, 400px);
 }
 
 .sidebar--right {
-    width: 400px;
+    width: var(--overrideRhsWidth, 400px);
+
+    &:not(.expanded):not(.resize-disabled) {
+        min-width: 400px;
+        max-width: 400px;
+
+        &.sidebar--right--width-holder {
+            @media screen and (min-width: 901px) and (max-width: 1200px) {
+                min-width: 304px;
+                max-width: 304px;
+            }
+        }
+
+        @media screen and (min-width: 901px) {
+            min-width: 304px;
+            max-width: 400px;
+        }
+
+        @media screen and (min-width: 1201px) {
+            max-width: 464px;
+        }
+
+        @media screen and (min-width: 1681px) {
+            max-width: 776px;
+        }
+    }
+
     height: 100%;
     padding: 0;
     transform: translateX(100%);
 
     &.is-open {
-        transition: width 0.25s 0s ease-in, z-index 0.25s 0s step-end;
+        body:not(.layout-changing) & {
+            transition: width 0.25s 0s ease-in, z-index 0.25s 0s step-end;
+        }
     }
 
     &.expanded {
@@ -27,7 +58,7 @@
             overflow: hidden;
         }
 
-        &.is-open {
+        body:not(.layout-changing) & {
             transition: width 0.25s 0s ease-in, z-index 0.15s 0.1s step-start;
         }
     }

webapp/channels/src/sass/responsive/_desktop.scss

@@ -3,7 +3,7 @@
 @media screen and (min-width: 1680px) {
     .sidebar--right,
     .sidebar--right--width-holder {
-        width: 500px;
+        width: var(--overrideRhsWidth, 500px);
 
         .sidebar--right__title__channel {
             max-width: 30rem;

webapp/channels/src/sass/utils/_mixins.scss

@@ -373,6 +373,16 @@
     }
 }
 
+@keyframes emphasis-sidebar-resize-line {
+    50% {
+        transform: scaleX(1.5);
+    }
+
+    100% {
+        transform: scaleX(1);
+    }
+}
+
 @mixin simple-in-and-out($classPrefix, $transition_time: 300ms) {
     @include simple-in-and-out-before($classPrefix, $transition_time);
     @include simple-in-and-out-after($classPrefix, $transition_time);