From cad0fa05e5b02b8892a8516e5afbff11a65653d1 Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Tue, 23 Oct 2018 15:33:45 +0200
Subject: [PATCH] hide name when collapsed

---
 src/components/structures/TopLeftMenuButton.js | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/components/structures/TopLeftMenuButton.js b/src/components/structures/TopLeftMenuButton.js
index 17f55b120c..b2b375581d 100644
--- a/src/components/structures/TopLeftMenuButton.js
+++ b/src/components/structures/TopLeftMenuButton.js
@@ -72,6 +72,13 @@ export default class TopLeftMenuButton extends React.Component {
         const fallbackUserId = MatrixClientPeg.get().getUserId();
         const profileInfo = this.state.profileInfo;
         const name = profileInfo ? profileInfo.name : fallbackUserId;
+        let nameElement;
+        if (!this.props.collapsed) {
+            nameElement = <div className="mx_TopLeftMenuButton_name">
+                { name }
+            </div>;
+        }
+
         return (
             <AccessibleButton className="mx_TopLeftMenuButton" onClick={this.onToggleMenu}>
                 <BaseAvatar
@@ -82,9 +89,7 @@ export default class TopLeftMenuButton extends React.Component {
                     height={AVATAR_SIZE}
                     resizeMethod="crop"
                 />
-                <div className="mx_TopLeftMenuButton_name">
-                    { name }
-                </div>
+                { nameElement }
                 <img className="mx_TopLeftMenuButton_chevron" src="img/topleft-chevron.svg" width="11" height="6" />
             </AccessibleButton>
         );