Make team drive leftside menu collapsable

customize.dist/src/less2/include/sidebar-layout.less

@@ -31,9 +31,37 @@
             .cp-sidebarlayout-categories {
                 flex: 1;
                 .cp-sidebarlayout-category {
+                    display: flex;
+                    align-items: center;
                     .leftside-menu-category_main();
                 }
             }
+            &.cp-leftside-narrow {
+                transition: width 0.2s;
+                width: 50px;
+                .cp-sidebarlayout-category {
+                    display: flex;
+                    max-width: 100%;
+                    align-items: center;
+                    span.cp-sidebarlayout-category-name {
+                        flex: 1;
+                        white-space: nowrap;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        min-width: 0;
+                        display: none;
+                    }
+                }
+                &:hover {
+                    transition: width 0.5s;
+                    width: 250px;
+                    .cp-sidebarlayout-category {
+                        span.cp-sidebarlayout-category-name {
+                            display: inline;
+                        }
+                    }
+                }
+            }
         }
         #cp-sidebarlayout-rightside {
             flex: 1;

www/teams/app-team.less

@@ -49,7 +49,19 @@
             }
         }
 
+        .cp-leftside-narrow {
+            .cp-avatar {
+                overflow: visible;
+                media-tag {
+                    margin-right: 0;
+                }
+                span.cp-sidebarlayout-category-name {
+                    margin-left: 3px;
+                }
+            }
+        }
         .cp-team-cat-header {
+            justify-content: center;
             .avatar_main(30px);
             .cp-avatar {
                 justify-content: center;

www/teams/inner.js

@@ -157,7 +157,7 @@ define([
                 }
                 common.displayAvatar($avatar, obj.avatar, obj.name);
                 $category.append($avatar);
-                $avatar.append(obj.name);
+                $avatar.append(h('span.cp-sidebarlayout-category-name', obj.name));
             });
         }
 
@@ -187,8 +187,10 @@ define([
                 active = key;
                 if (key === 'drive' || key === 'chat') {
                     APP.$rightside.addClass('cp-rightside-drive');
+                    APP.$leftside.addClass('cp-leftside-narrow');
                 } else {
                     APP.$rightside.removeClass('cp-rightside-drive');
+                    APP.$leftside.removeClass('cp-leftside-narrow');
                 }
 
                 $categories.find('.cp-leftside-active').removeClass('cp-leftside-active');
@@ -196,12 +198,14 @@ define([
                 showCategories(categories[key]);
             });
 
-            $category.append(Messages['team_cat_'+key] || key);
+            $category.append(h('span.cp-sidebarlayout-category-name', Messages['team_cat_'+key] || key));
         });
         if (active === 'drive') {
             APP.$rightside.addClass('cp-rightside-drive');
+            APP.$leftside.addClass('cp-leftside-narrow');
         } else {
             APP.$rightside.removeClass('cp-rightside-drive');
+            APP.$leftside.removeClass('cp-leftside-narrow');
         }
         showCategories(categories[active]);
     };