PLT-5699 Improvements to channel switcher (#6486)

* Refactor channel switcher to not wait on server results

* Change channel switcher to quick switcher and include team switching

* Add sections, update ordering and add discoverability button

* Fix styling error

* Use CMD in text if on mac

* Clean yarn cache on every install

* Various UX updates per feedback

* Add shortcut help text for team switcher

* Couple more updates per feedback

* Some minor fixes for GM and autocomplete race

* Updating UI for channel switcher (#6504)

* Updating channel switcher button (#6506)

* Updating switcher modal on mobile (#6507)

* Removed jQuery usage

* Rename function to toggleQuickSwitchModal

webapp/sass/layout/_navigation.scss

@@ -5,6 +5,24 @@
     background: transparent;
 }
 
+.nav-tabs {
+    margin-bottom: 10px;
+
+    > li {
+        margin-right: 5px;
+
+        > a {
+            border-bottom-color: transparent !important;
+            padding: 7px 15px;
+
+            .small {
+                @include opacity(.8);
+                margin-left: 4px;
+            }
+        }
+    }
+}
+
 #navbar {
     input {
         margin: 0 5px 0 2px;

webapp/sass/layout/_sidebar-left.scss

@@ -39,6 +39,45 @@
         }
     }
 
+    .sidebar__switcher {
+        border-top: 2px solid;
+        bottom: 0;
+        display: block;
+        height: 45px;
+        line-height: 45px;
+        position: absolute;
+        text-align: center;
+        text-decoration: none;
+        width: 100%;
+
+        &:after {
+            @include single-transition(all, .15s, ease-in);
+            background: alpha-color($black, .1);
+            content: '';
+            display: none;
+            height: 100%;
+            left: 0;
+            position: absolute;
+            top: 0;
+            width: 100%;
+        }
+
+        span {
+            @include single-transition(all, .15s, ease-in);
+            @include opacity(.8);
+        }
+
+        &:hover {
+            &:after {
+                display: block;
+            }
+
+            span {
+                @include opacity(1);
+            }
+        }
+    }
+
     .dropdown-menu {
         max-height: 80vh;
         max-width: 200px;
@@ -62,7 +101,7 @@
 
     .nav-pills__container {
         -webkit-overflow-scrolling: touch;
-        height: calc(100% - 80px);
+        height: calc(100% - 110px);
         overflow: auto;
         position: relative;
     }
@@ -84,7 +123,7 @@
     }
 
     .nav-pills__unread-indicator-bottom {
-        bottom: 20px;
+        bottom: 60px;
     }
 
     .nav {