Make the whole UserMenu a button to open the menu

res/css/structures/_LeftPanel2.scss

@@ -132,16 +132,6 @@ $tagPanelWidth: 70px; // only applies in this file, used for calculations
         .mx_LeftPanel2_roomListContainer {
             width: 68px;
 
-            .mx_LeftPanel2_userHeader {
-                .mx_LeftPanel2_headerRow {
-                    justify-content: center;
-                }
-
-                .mx_LeftPanel2_userAvatarContainer {
-                    margin-right: 0;
-                }
-            }
-
             .mx_LeftPanel2_filterContainer {
                 // Organize the flexbox into a centered column layout
                 flex-direction: column;

res/css/structures/_UserMenu.scss

@@ -15,6 +15,28 @@ limitations under the License.
 */
 
 .mx_UserMenu {
+    .mx_UserMenu_headerButtons {
+        width: 16px;
+        height: 16px;
+        position: relative;
+        display: block;
+
+        &::before {
+            content: '';
+            width: 16px;
+            height: 16px;
+            position: absolute;
+            top: 0;
+            left: 0;
+            mask-position: center;
+            mask-size: contain;
+            mask-repeat: no-repeat;
+            background: $primary-fg-color;
+            mask-image: url('$(res)/img/feather-customised/more-horizontal.svg');
+        }
+    }
+
+    .mx_UserMenu_row {
         // Create a row-based flexbox to ensure items stay aligned correctly.
         display: flex;
         align-items: center;
@@ -46,25 +68,15 @@ limitations under the License.
         }
     }
 
-.mx_UserMenuButton {
+    &.mx_UserMenu_minimized {
-    > span {
+        .mx_UserMenu_userHeader {
-        width: 16px;
+            .mx_UserMenu_row {
-        height: 16px;
+                justify-content: center;
-        position: relative;
+            }
-        display: block;
 
-        &::before {
+            .mx_UserMenu_userAvatarContainer {
-            content: '';
+                margin-right: 0;
-            width: 16px;
+            }
-            height: 16px;
-            position: absolute;
-            top: 0;
-            left: 0;
-            mask-position: center;
-            mask-size: contain;
-            mask-repeat: no-repeat;
-            background: $primary-fg-color;
-            mask-image: url('$(res)/img/feather-customised/more-horizontal.svg');
         }
     }
 }

src/components/structures/UserMenu.tsx

@@ -36,6 +36,7 @@ import {getHomePageUrl} from "../../utils/pages";
 import { OwnProfileStore } from "../../stores/OwnProfileStore";
 import { UPDATE_EVENT } from "../../stores/AsyncStore";
 import BaseAvatar from '../views/avatars/BaseAvatar';
+import classNames from "classnames";
 
 interface IProps {
     isMinimized: boolean;
@@ -108,7 +109,9 @@ export default class UserMenu extends React.Component<IProps, IState> {
         this.setState({menuDisplayed: true});
     };
 
-    private onCloseMenu = () => {
+    private onCloseMenu = (ev: InputEvent) => {
+        ev.preventDefault();
+        ev.stopPropagation();
         this.setState({menuDisplayed: false});
     };
 
@@ -160,9 +163,9 @@ export default class UserMenu extends React.Component<IProps, IState> {
         defaultDispatcher.dispatch({action: 'view_home_page'});
     };
 
-    private renderMenuButton(): React.ReactNode {
+    private renderContextMenu = (): React.ReactNode => {
-        let contextMenu;
+        if (!this.state.menuDisplayed) return null;
-        if (this.state.menuDisplayed) {
+
         let hostingLink;
         const signupLink = getHostingLink("user-context-menu");
         if (signupLink) {
@@ -198,7 +201,7 @@ export default class UserMenu extends React.Component<IProps, IState> {
         }
 
         const elementRect = this.buttonRef.current.getBoundingClientRect();
-            contextMenu = (
+        return (
             <ContextMenu
                 chevronFace="none"
                 left={elementRect.left}
@@ -276,31 +279,16 @@ export default class UserMenu extends React.Component<IProps, IState> {
                 </div>
             </ContextMenu>
         );
-        }
+    };
-
-        return (
-            <React.Fragment>
-                <ContextMenuButton
-                    className="mx_UserMenuButton"
-                    onClick={this.onOpenMenuClick}
-                    inputRef={this.buttonRef}
-                    label={_t("Account settings")}
-                    isExpanded={this.state.menuDisplayed}
-                >
-                    <span>{/* masked image in CSS */}</span>
-                </ContextMenuButton>
-                {contextMenu}
-            </React.Fragment>
-        );
-    }
 
     public render() {
+        console.log(this.state);
         const avatarSize = 32; // should match border-radius of the avatar
 
         let name = <span className="mx_UserMenu_userName">{OwnProfileStore.instance.displayName}</span>;
         let buttons = (
             <span className="mx_UserMenu_headerButtons">
-                {this.renderMenuButton()}
+                {/* masked image in CSS */}
             </span>
         );
         if (this.props.isMinimized) {
@@ -308,8 +296,21 @@ export default class UserMenu extends React.Component<IProps, IState> {
             buttons = null;
         }
 
+        const classes = classNames({
+            'mx_UserMenu': true,
+            'mx_UserMenu_minimized': this.props.isMinimized,
+        });
+
         return (
-            <div className="mx_UserMenu">
+            <React.Fragment>
+                <ContextMenuButton
+                    className={classes}
+                    onClick={this.onOpenMenuClick}
+                    inputRef={this.buttonRef}
+                    label={_t("Account settings")}
+                    isExpanded={this.state.menuDisplayed}
+                >
+                    <div className="mx_UserMenu_row">
                         <span className="mx_UserMenu_userAvatarContainer">
                             <BaseAvatar
                                 idName={MatrixClientPeg.get().getUserId()}
@@ -324,6 +325,10 @@ export default class UserMenu extends React.Component<IProps, IState> {
                         {name}
                         {buttons}
                     </div>
+                    {this.renderContextMenu()}
+                </ContextMenuButton>
+            </React.Fragment>
+
         );
     }
 }