PLT-4167 Team Sidebar (#4569)

* PLT-4167 Team Sidebar

* Address feedback from PM

* change route from my_members to members

* bug fixes

* Updating styles for teams sidebar (#4681)

* Added PM changes

* Fix corner cases

* Addressing feedback

* use two different endpoints

* Bug fixes

* Rename model and client functions, using preferences to store last team and channel viewed

* Fix mobile notification count and closing the team sidebar

* unit test, fixed bad merge and retrieve from cached when available

* bug fixes

* use id for last channel in preferences, query optimization

* Updating multi team css (#4830)

3 files changed, 132 insertions, 0 deletions

diff --git a/webapp/sass/layout/_module.scss b/webapp/sass/layout/_module.scss
index 39ab2c6f8..bdaa12acb 100644
--- a/webapp/sass/layout/_module.scss
+++ b/webapp/sass/layout/_module.scss
@@ -10,4 +10,5 @@
 @import 'sidebar-left';
 @import 'sidebar-menu';
 @import 'sidebar-right';
+@import 'team-sidebar';
 @import 'webhooks';
diff --git a/webapp/sass/layout/_team-sidebar.scss b/webapp/sass/layout/_team-sidebar.scss
new file mode 100644
index 000000000..dd80a4d12
--- /dev/null
+++ b/webapp/sass/layout/_team-sidebar.scss
@@ -0,0 +1,90 @@
+.multi-teams {
+    .team-sidebar {
+        height: 100%;
+        left: 0;
+        position: fixed;
+        text-align: center;
+        width: 75px;
+        z-index: 5;
+
+        .team-wrapper {
+            background-color: rgba(0, 0, 0, 0.2);
+            height: 100%;
+            overflow: auto;
+            padding-top: 15px;
+
+            .team-container {
+                width: 100%;
+                text-align: center;
+                display: table;
+                margin-bottom: 10px;
+                position: relative;
+
+                .team-btn {
+                    border: none;
+                    height: 42px;
+                    text-align: center;
+                    font-weight: bold;
+                    border-radius: 5px;
+                    position: relative;
+                    width: 42px;
+                    background-color: rgba(0, 0, 0, 0.3);
+                    display: table-cell;
+                    vertical-align: middle;
+
+                    .badge {
+                        position: absolute;
+                        top: -3px;
+                        right: -6px;
+                        font-size: 10px;
+                    }
+                }
+
+                &.active {
+                    .team-btn {
+                        border: 1px solid #fff;
+                        background-color: transparent;
+                    }
+                }
+
+                &.active:before {
+                    background: black;
+                    content: '';
+                    height: 100%;
+                    left: 0;
+                    position: absolute;
+                    top: 0;
+                    width: 5px;
+                }
+
+                &.unread:before {
+                    background: black;
+                    border-radius: 50%;
+                    content: '';
+                    height: 5px;
+                    left: 0;
+                    position: absolute;
+                    top: 18px;
+                    width: 5px;
+                }
+
+                a.team-disabled {
+                    cursor: not-allowed;
+                    opacity: 0.5;
+                }
+            }
+
+            .team-container a:hover {
+                text-decoration: none;
+            }
+        }
+    }
+
+    .sidebar--left {
+        left: 75px;
+    }
+
+    .app__content {
+        margin-left: 295px;
+    }
+}
diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss
index 66f9550d7..ab305a5b0 100644
--- a/webapp/sass/responsive/_mobile.scss
+++ b/webapp/sass/responsive/_mobile.scss
@@ -1163,6 +1163,33 @@
     .post-comments {
         padding: 9px 21px 10px 10px !important;
     }
+
+    .multi-teams {
+        .team-sidebar {
+            width: 75px;
+        }
+
+        .app__content {
+            margin-left: 0;
+        }
+
+        .sidebar--left {
+            left: 0;
+
+            &.move--right {
+                left: 75px;
+            }
+        }
+
+        .team-sidebar {
+            display: none;
+
+            &.move--right {
+                display: block;
+                @include translate3d(0, 0, 0);
+            }
+        }
+    }
 }
 
 @media screen and (max-width: 640px) {
@@ -1493,6 +1520,20 @@
 }
 
 @media screen and (max-width: 320px) {
+    .multi-teams {
+        .team-sidebar {
+            width: 65px;
+        }
+
+        .sidebar--left {
+            width: 220px;
+
+            &.move--right {
+                left: 65px;
+            }
+        }
+    }
+
     .post {
         .post__header {
             .col__name {