Show expand icon on main header.

stylesheets/_modules.scss

@@ -2194,6 +2194,31 @@
   background-color: $color-dark-75;
 }
 
+.module-main-header__expand-icon {
+  width: 3em;
+  line-height: 3em;
+  font-weight: bold;
+  overflow: hidden;
+  user-select: none;
+  color: white;
+  text-align: center;
+}
+
+.module-main-header__expand-icon::after {
+  -webkit-transition: all .35s;
+  -o-transition: all .35s;
+  transition: all .35s;
+  width: 3em;
+  line-height: 3em;
+  height: 3em;
+  content: '\25BE';
+  display: inline-block;
+}
+
+.module-main-header__expanded::after {
+  transform: rotate(180deg);
+}
+
 
 .module-main-header__app-name {
   font-size: 16px;
@@ -2208,6 +2233,7 @@
   margin-left: 12px;
   color: $color-dark-05;
   overflow-x: auto;
+  flex: 1;
 }
 
 // Third-party module: react-contextmenu

ts/components/MainHeader.tsx

@@ -26,10 +26,11 @@ export class MainHeader extends React.Component<Props> {
       name,
       phoneNumber,
       profileName,
+      onClick
     } = this.props;
 
     return (
-      <div className="module-main-header">
+      <div role='button' className="module-main-header" onClick={onClick}>
         <Avatar
           avatarPath={avatarPath}
           color={color}
@@ -47,6 +48,9 @@ export class MainHeader extends React.Component<Props> {
             i18n={i18n}
           />
         </div>
+        <div
+          className="module-main-header__expand-icon"
+        />
       </div>
     );
   }