put settings and sign out in top left menu for now

res/css/structures/_TopLeftMenu.scss

@@ -0,0 +1,39 @@
+/*
+Copyright 2018 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_TopLeftMenu {
+    min-width: 180px;
+
+    .mx_TopLeftMenu_section:not(:last-child) {
+        border-bottom: 1px solid $menu-border-color;
+    }
+
+    .mx_TopLeftMenu_section {
+        list-style: none;
+        margin: 5px 0;
+        padding: 0;
+
+        li {
+            white-space: nowrap;
+            padding: 5px 20px;
+        }
+
+        li:hover {
+            background-color: $menu-selected-color;
+        }
+    }
+
+}

src/components/structures/TopLeftMenu.js

@@ -15,37 +15,32 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
+import dis from '../../dispatcher';
-import sdk from '../../index';
+import { _t } from '../../languageHandler';
-
-class TopLeftMenu extends React.Component {
-
-    static propTypes = {
-        collapsed: PropTypes.bool.isRequired,
-    };
-
-    static displayName = 'TopLeftMenu';
 
+export class TopLeftMenu extends React.Component {
     render() {
-        const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
+        return <div className="mx_TopLeftMenu">
-        const avatarHeight = 28;
+            <ul className="mx_TopLeftMenu_section">
-        const name = "My stuff";
+                <li onClick={this.openSettings}>{_t("Settings")}</li>
+            </ul>
+            <ul className="mx_TopLeftMenu_section">
+                <li onClick={this.signOut}>{_t("Sign out")}</li>
+            </ul>
+        </div>;
+    }
 
-        return (
+    openSettings() {
-            <div className="mx_TopLeftMenu">
+        dis.dispatch({action: 'view_user_settings'});
-                <BaseAvatar
+        this.closeMenu();
-                    className="mx_TopLeftMenu_avatar"
+    }
-                    name={name}
+
-                    width={avatarHeight}
+    signOut() {
-                    height={avatarHeight}
+        dis.dispatch({action: 'logout'});
-                />
+        this.closeMenu();
-                <div className="mx_TopLeftMenu_name">
+    }
-                    { name }
+
-                </div>
+    closeMenu() {
-                <img className="mx_TopLeftMenu_chevron" src="img/topleft-chevron.svg" width="11" height="6" />
+        if (this.props.onFinished) this.props.onFinished();
-            </div>
-        );
     }
 }
-
-module.exports = TopLeftMenu;