1 files changed, 67 insertions, 0 deletions
diff --git a/webapp/components/settings_sidebar.jsx b/webapp/components/settings_sidebar.jsx
new file mode 100644
index 000000000..d55eb5366
--- /dev/null
+++ b/webapp/components/settings_sidebar.jsx
@@ -0,0 +1,67 @@
+// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import $ from 'jquery';
+import * as Utils from 'utils/utils.jsx';
+
+import React from 'react';
+
+export default class SettingsSidebar extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.handleClick = this.handleClick.bind(this);
+    }
+    handleClick(tab, e) {
+        e.preventDefault();
+        this.props.updateTab(tab.name);
+        $(e.target).closest('.settings-modal').addClass('display--content');
+    }
+    componentDidMount() {
+        if (Utils.isBrowserFirefox()) {
+            $('.settings-modal .settings-table .nav').addClass('position--top');
+        }
+    }
+    render() {
+        let tabList = this.props.tabs.map(function makeTab(tab) {
+            let key = `${tab.name}_li`;
+            let className = '';
+            if (this.props.activeTab === tab.name) {
+                className = 'active';
+            }
+
+            return (
+                <li
+                    key={key}
+                    className={className}
+                >
+                    <a
+                        href='#'
+                        onClick={this.handleClick.bind(null, tab)}
+                    >
+                        <i className={tab.icon}/>
+                        {tab.uiName}
+                    </a>
+                </li>
+            );
+        }.bind(this));
+
+        return (
+            <div>
+                <ul className='nav nav-pills nav-stacked'>
+                    {tabList}
+                </ul>
+            </div>
+        );
+    }
+}
+
+SettingsSidebar.propTypes = {
+    tabs: React.PropTypes.arrayOf(React.PropTypes.shape({
+        name: React.PropTypes.string.isRequired,
+        uiName: React.PropTypes.string.isRequired,
+        icon: React.PropTypes.string.isRequired
+    })).isRequired,
+    activeTab: React.PropTypes.string,
+    updateTab: React.PropTypes.func.isRequired
+};