MM-49869 - add channels button lhs sidebar (#22701)

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

@@ -178,6 +178,46 @@ $sidebarOpacityAnimationDuration: 0.15s;
             }
         }
 
+        &__inviteMembersLhsButton,
+        &__addChannelsCtaLhsButton {
+            display: flex;
+            padding: 6px 0;
+            margin-left: 15px;
+            color: rgba(var(--sidebar-text-rgb), 0.72);
+            line-height: 20px;
+            list-style: none;
+
+            i {
+                font-size: 20px;
+            }
+
+            span {
+                align-self: flex-end;
+                margin-top: -2px;
+                margin-left: 5px;
+            }
+
+            &--untouched {
+                color: var(--sidebar-unread-text);
+                font-weight: $font-weight--semibold;
+
+                i::before {
+                    font-weight: $font-weight--semibold;
+                }
+            }
+        }
+
+        &__addChannelsCtaLhsButton {
+            border: none;
+            margin-left: 0;
+            background: none;
+
+            li {
+                display: flex;
+                margin-left: 15px;
+            }
+        }
+
         .AddChannelDropdown_dropdownButton,
         .SidebarChannelNavigator_inviteUsers,
         .SidebarChannelNavigator_jumpToButton,
@@ -700,35 +740,12 @@ $sidebarOpacityAnimationDuration: 0.15s;
         }
     }
 
-    .SidebarChannelNavigator_inviteMembersLhsButton {
-        display: flex;
-        padding: 6px 0;
-        margin-left: 15px;
-        color: rgba(var(--sidebar-text-rgb), 0.72);
-        line-height: 20px;
-        list-style: none;
-
-        i {
-            font-size: 20px;
-        }
-
-        span {
-            align-self: flex-end;
-            margin-top: -2px;
-            margin-left: 5px;
-        }
-
-        &--untouched {
-            color: var(--sidebar-unread-text);
-            font-weight: $font-weight--semibold;
-
-            i::before {
-                font-weight: $font-weight--semibold;
-            }
-        }
+    .AddChannelsCtaDropdown .dropdown-menu {
+        margin-left: 20px;
     }
 
-    #introTextInvite {
+    #introTextInvite,
+    #addChannelsCta {
         display: flex;
         width: 100%;
 
@@ -737,6 +754,14 @@ $sidebarOpacityAnimationDuration: 0.15s;
         }
     }
 
+    #AddChannelCtaDropdown {
+        position: fixed;
+
+        ul {
+            min-width: 232px !important;
+        }
+    }
+
     .SidebarChannelNavigator_inviteUsersSticky {
         position: absolute;
         z-index: 2;