From 53ba8ec9c2bbaee510c2b1c9b5b59f9fdf44f365 Mon Sep 17 00:00:00 2001
From: Harrison Healey <harrisonmhealey@gmail.com>
Date: Thu, 29 Sep 2016 10:58:30 -0400
Subject: Renamed NavbarDropdown to SidebarHeaderDropdown and switched it to
 react-bootstrap (#4109)

---
 .../admin_console/admin_navbar_dropdown.jsx        |   6 +-
 webapp/components/navbar_dropdown.jsx              | 460 -------------------
 webapp/components/sidebar_header.jsx               |  34 +-
 webapp/components/sidebar_header_dropdown.jsx      | 498 +++++++++++++++++++++
 webapp/sass/layout/_headers.scss                   |  49 +-
 webapp/sass/responsive/_mobile.scss                |   2 +-
 webapp/utils/constants.jsx                         |  14 +-
 webapp/utils/utils.jsx                             |   2 +-
 8 files changed, 549 insertions(+), 516 deletions(-)
 delete mode 100644 webapp/components/navbar_dropdown.jsx
 create mode 100644 webapp/components/sidebar_header_dropdown.jsx

diff --git a/webapp/components/admin_console/admin_navbar_dropdown.jsx b/webapp/components/admin_console/admin_navbar_dropdown.jsx
index f57635a11..7b958cbb0 100644
--- a/webapp/components/admin_console/admin_navbar_dropdown.jsx
+++ b/webapp/components/admin_console/admin_navbar_dropdown.jsx
@@ -82,20 +82,20 @@ export default class AdminNavbarDropdown extends React.Component {
         }
 
         return (
-            <ul className='nav navbar-nav navbar-right'>
+            <ul className='nav navbar-nav navbar-right admin-navbar-dropdown'>
                 <li
                     ref='dropdown'
                     className='dropdown'
                 >
                     <a
                         href='#'
-                        className='dropdown-toggle'
+                        className='dropdown-toggle admin-navbar-dropdown__toggle'
                         data-toggle='dropdown'
                         role='button'
                         aria-expanded='false'
                     >
                         <span
-                            className='dropdown__icon'
+                            className='dropdown__icon admin-navbar-dropdown__icon'
                             dangerouslySetInnerHTML={{__html: Constants.MENU_ICON}}
                         />
                     </a>
diff --git a/webapp/components/navbar_dropdown.jsx b/webapp/components/navbar_dropdown.jsx
deleted file mode 100644
index 60be47767..000000000
--- a/webapp/components/navbar_dropdown.jsx
+++ /dev/null
@@ -1,460 +0,0 @@
-// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
-// See License.txt for license information.
-
-import * as Utils from 'utils/utils.jsx';
-import * as GlobalActions from 'actions/global_actions.jsx';
-
-import TeamStore from 'stores/team_store.jsx';
-import UserStore from 'stores/user_store.jsx';
-import WebrtcStore from 'stores/webrtc_store.jsx';
-import AboutBuildModal from './about_build_modal.jsx';
-import TeamMembersModal from './team_members_modal.jsx';
-import ToggleModalButton from './toggle_modal_button.jsx';
-import UserSettingsModal from './user_settings/user_settings_modal.jsx';
-
-import {Constants, WebrtcActionTypes} from 'utils/constants.jsx';
-
-import {FormattedMessage} from 'react-intl';
-import {Link} from 'react-router/es6';
-
-import React from 'react';
-
-export default class NavbarDropdown extends React.Component {
-    constructor(props) {
-        super(props);
-        this.blockToggle = false;
-
-        this.handleAboutModal = this.handleAboutModal.bind(this);
-        this.aboutModalDismissed = this.aboutModalDismissed.bind(this);
-        this.onTeamChange = this.onTeamChange.bind(this);
-        this.openAccountSettings = this.openAccountSettings.bind(this);
-
-        this.renderCustomEmojiLink = this.renderCustomEmojiLink.bind(this);
-
-        this.handleClick = this.handleClick.bind(this);
-
-        this.state = {
-            showUserSettingsModal: false,
-            showAboutModal: false,
-            teams: TeamStore.getAll(),
-            teamMembers: TeamStore.getTeamMembers()
-        };
-    }
-
-    handleClick(e) {
-        if (WebrtcStore.isBusy()) {
-            WebrtcStore.emitChanged({action: WebrtcActionTypes.IN_PROGRESS});
-            e.preventDefault();
-        }
-    }
-
-    handleAboutModal() {
-        this.setState({showAboutModal: true});
-    }
-
-    aboutModalDismissed() {
-        this.setState({showAboutModal: false});
-    }
-
-    componentDidMount() {
-        TeamStore.addChangeListener(this.onTeamChange);
-        document.addEventListener('keydown', this.openAccountSettings);
-    }
-
-    onTeamChange() {
-        this.setState({
-            teams: TeamStore.getAll(),
-            teamMembers: TeamStore.getTeamMembers()
-        });
-    }
-
-    componentWillUnmount() {
-        TeamStore.removeChangeListener(this.onTeamChange);
-        document.removeEventListener('keydown', this.openAccountSettings);
-    }
-
-    openAccountSettings(e) {
-        if (Utils.cmdOrCtrlPressed(e) && e.shiftKey && e.keyCode === Constants.KeyCodes.A) {
-            e.preventDefault();
-            this.setState({showUserSettingsModal: !this.state.showUserSettingsModal});
-        }
-    }
-
-    renderCustomEmojiLink() {
-        if (window.mm_config.EnableCustomEmoji !== 'true' || !Utils.canCreateCustomEmoji(this.props.currentUser)) {
-            return null;
-        }
-
-        return (
-            <li>
-                <Link
-                    onClick={this.handleClick}
-                    to={'/' + this.props.teamName + '/emoji'}
-                >
-                    <FormattedMessage
-                        id='navbar_dropdown.emoji'
-                        defaultMessage='Custom Emoji'
-                    />
-                </Link>
-            </li>
-        );
-    }
-
-    render() {
-        const config = global.window.mm_config;
-        var teamLink = '';
-        var inviteLink = '';
-        var manageLink = '';
-        var sysAdminLink = '';
-        var currentUser = this.props.currentUser;
-        var isAdmin = false;
-        var isSystemAdmin = false;
-        var teamSettings = null;
-        let integrationsLink = null;
-
-        if (!currentUser) {
-            return null;
-        }
-
-        if (currentUser != null) {
-            isAdmin = TeamStore.isTeamAdminForCurrentTeam() || UserStore.isSystemAdminForCurrentUser();
-            isSystemAdmin = UserStore.isSystemAdminForCurrentUser();
-
-            inviteLink = (
-                <li>
-                    <a
-                        href='#'
-                        onClick={GlobalActions.showInviteMemberModal}
-                    >
-                        <FormattedMessage
-                            id='navbar_dropdown.inviteMember'
-                            defaultMessage='Invite New Member'
-                        />
-                    </a>
-                </li>
-            );
-
-            if (this.props.teamType === Constants.OPEN_TEAM && config.EnableUserCreation === 'true') {
-                teamLink = (
-                    <li>
-                        <a
-                            href='#'
-                            onClick={GlobalActions.showGetTeamInviteLinkModal}
-                        >
-                            <FormattedMessage
-                                id='navbar_dropdown.teamLink'
-                                defaultMessage='Get Team Invite Link'
-                            />
-                        </a>
-                    </li>
-                );
-            }
-
-            if (global.window.mm_license.IsLicensed === 'true') {
-                if (config.RestrictTeamInvite === Constants.PERMISSIONS_SYSTEM_ADMIN && !isSystemAdmin) {
-                    teamLink = null;
-                    inviteLink = null;
-                } else if (config.RestrictTeamInvite === Constants.PERMISSIONS_TEAM_ADMIN && !isAdmin) {
-                    teamLink = null;
-                    inviteLink = null;
-                }
-            }
-        }
-
-        let membersName = (
-            <FormattedMessage
-                id='navbar_dropdown.manageMembers'
-                defaultMessage='Manage Members'
-            />
-        );
-
-        if (isAdmin) {
-            teamSettings = (
-                <li>
-                    <a
-                        href='#'
-                        data-toggle='modal'
-                        data-target='#team_settings'
-                    >
-                        <FormattedMessage
-                            id='navbar_dropdown.teamSettings'
-                            defaultMessage='Team Settings'
-                        />
-                    </a>
-                </li>
-            );
-        } else {
-            membersName = (
-                <FormattedMessage
-                    id='navbar_dropdown.viewMembers'
-                    defaultMessage='View Members'
-                />
-            );
-        }
-
-        manageLink = (
-            <li>
-                <ToggleModalButton
-                    dialogType={TeamMembersModal}
-                    dialogProps={{isAdmin}}
-                >
-                    {membersName}
-                </ToggleModalButton>
-            </li>
-        );
-
-        const integrationsEnabled =
-            config.EnableIncomingWebhooks === 'true' ||
-            config.EnableOutgoingWebhooks === 'true' ||
-            config.EnableCommands === 'true' ||
-            (config.EnableOAuthServiceProvider === 'true' && (isSystemAdmin || config.EnableOnlyAdminIntegrations !== 'true'));
-        if (integrationsEnabled && (isAdmin || config.EnableOnlyAdminIntegrations !== 'true')) {
-            integrationsLink = (
-                <li>
-                    <Link
-                        to={'/' + this.props.teamName + '/integrations'}
-                        onClick={this.handleClick}
-                    >
-                        <FormattedMessage
-                            id='navbar_dropdown.integrations'
-                            defaultMessage='Integrations'
-                        />
-                    </Link>
-                </li>
-            );
-        }
-
-        if (isSystemAdmin) {
-            sysAdminLink = (
-                <li>
-                    <Link
-                        to={'/admin_console'}
-                        onClick={this.handleClick}
-                    >
-                        <FormattedMessage
-                            id='navbar_dropdown.console'
-                            defaultMessage='System Console'
-                        />
-                    </Link>
-                </li>
-            );
-        }
-
-        var teams = [];
-
-        if (config.EnableTeamCreation === 'true') {
-            teams.push(
-                <li key='newTeam_li'>
-                    <Link
-                        key='newTeam_a'
-                        to='/create_team'
-                        onClick={this.handleClick}
-                    >
-                        <FormattedMessage
-                            id='navbar_dropdown.create'
-                            defaultMessage='Create a New Team'
-                        />
-                    </Link>
-                </li>
-            );
-        }
-
-        teams.push(
-            <li key='leaveTeam_li'>
-                <a
-                    href='#'
-                    onClick={GlobalActions.showLeaveTeamModal}
-                >
-                    <FormattedMessage
-                        id='navbar_dropdown.leave'
-                        defaultMessage='Leave Team'
-                    />
-                </a>
-            </li>
-        );
-
-        if (this.state.teamMembers && this.state.teamMembers.length > 1) {
-            teams.push(
-                <li
-                    key='teamDiv'
-                    className='divider'
-                />
-            );
-
-            for (var index in this.state.teamMembers) {
-                if (this.state.teamMembers.hasOwnProperty(index)) {
-                    var teamMember = this.state.teamMembers[index];
-                    var team = this.state.teams[teamMember.team_id];
-
-                    if (team.name !== this.props.teamName) {
-                        teams.push(
-                            <li key={'team_' + team.name}>
-                                <Link
-                                    to={'/' + team.name + '/channels/town-square'}
-                                >
-                                    <FormattedMessage
-                                        id='navbar_dropdown.switchTo'
-                                        defaultMessage='Switch to '
-                                    />
-                                    {team.display_name}
-                                </Link>
-                            </li>
-                        );
-                    }
-                }
-            }
-        }
-
-        let helpLink = null;
-        if (config.HelpLink) {
-            helpLink = (
-                <li>
-                    <Link
-                        target='_blank'
-                        rel='noopener noreferrer'
-                        to={config.HelpLink}
-                    >
-                        <FormattedMessage
-                            id='navbar_dropdown.help'
-                            defaultMessage='Help'
-                        />
-                    </Link>
-                </li>
-            );
-        }
-
-        let reportLink = null;
-        if (config.ReportAProblemLink) {
-            reportLink = (
-                <li>
-                    <Link
-                        target='_blank'
-                        rel='noopener noreferrer'
-                        to={config.ReportAProblemLink}
-                    >
-                        <FormattedMessage
-                            id='navbar_dropdown.report'
-                            defaultMessage='Report a Problem'
-                        />
-                    </Link>
-                </li>
-            );
-        }
-
-        let nativeAppDivider = null;
-        let nativeAppLink = null;
-        if (global.window.mm_config.AppDownloadLink) {
-            nativeAppDivider = <li className='divider'/>;
-            nativeAppLink = (
-                <li>
-                    <Link
-                        target='_blank'
-                        rel='noopener noreferrer'
-                        to={global.window.mm_config.AppDownloadLink}
-                    >
-                        <FormattedMessage
-                            id='navbar_dropdown.nativeApps'
-                            defaultMessage='Download Apps'
-                        />
-                    </Link>
-                </li>
-            );
-        }
-
-        return (
-            <ul className='nav navbar-nav navbar-right'>
-                <li
-                    ref='dropdown'
-                    className='dropdown'
-                >
-                    <a
-                        href='#'
-                        className='dropdown-toggle'
-                        role='button'
-                        onClick={this.props.toggleDropdown}
-                    >
-                        <span
-                            className='dropdown__icon'
-                            dangerouslySetInnerHTML={{__html: Constants.MENU_ICON}}
-                        />
-                    </a>
-                    <ul
-                        className='dropdown-menu'
-                        role='menu'
-                    >
-                        <li>
-                            <a
-                                href='#'
-                                onClick={(e) => {
-                                    e.preventDefault();
-                                    this.setState({showUserSettingsModal: true});
-                                }}
-                            >
-                                <FormattedMessage
-                                    id='navbar_dropdown.accountSettings'
-                                    defaultMessage='Account Settings'
-                                />
-                            </a>
-                        </li>
-                        {inviteLink}
-                        {teamLink}
-                        <li>
-                            <a
-                                href='#'
-                                onClick={GlobalActions.emitUserLoggedOutEvent}
-                            >
-                                <FormattedMessage
-                                    id='navbar_dropdown.logout'
-                                    defaultMessage='Logout'
-                                />
-                            </a>
-                        </li>
-                        <li className='divider'/>
-                        {integrationsLink}
-                        {this.renderCustomEmojiLink()}
-                        <li className='divider'/>
-                        {teamSettings}
-                        {manageLink}
-                        {sysAdminLink}
-                        {teams}
-                        <li className='divider'/>
-                        {helpLink}
-                        {reportLink}
-                        <li>
-                            <a
-                                href='#'
-                                onClick={this.handleAboutModal}
-                            >
-                                <FormattedMessage
-                                    id='navbar_dropdown.about'
-                                    defaultMessage='About Mattermost'
-                                />
-                            </a>
-                        </li>
-                        {nativeAppDivider}
-                        {nativeAppLink}
-                        <UserSettingsModal
-                            show={this.state.showUserSettingsModal}
-                            onModalDismissed={() => this.setState({showUserSettingsModal: false})}
-                        />
-                        <AboutBuildModal
-                            show={this.state.showAboutModal}
-                            onModalDismissed={this.aboutModalDismissed}
-                        />
-                    </ul>
-                </li>
-            </ul>
-        );
-    }
-}
-
-NavbarDropdown.defaultProps = {
-    teamType: ''
-};
-NavbarDropdown.propTypes = {
-    teamType: React.PropTypes.string,
-    teamDisplayName: React.PropTypes.string,
-    teamName: React.PropTypes.string,
-    currentUser: React.PropTypes.object,
-    toggleDropdown: React.PropTypes.function
-};
diff --git a/webapp/components/sidebar_header.jsx b/webapp/components/sidebar_header.jsx
index a57a809be..cd41cfb84 100644
--- a/webapp/components/sidebar_header.jsx
+++ b/webapp/components/sidebar_header.jsx
@@ -1,24 +1,18 @@
 // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-import NavbarDropdown from './navbar_dropdown.jsx';
-import 'bootstrap';
+import React from 'react';
 
+import Client from 'client/web_client.jsx';
 import PreferenceStore from 'stores/preference_store.jsx';
-
 import * as Utils from 'utils/utils.jsx';
-import Client from 'client/web_client.jsx';
-import Constants from 'utils/constants.jsx';
-
-const Preferences = Constants.Preferences;
-const TutorialSteps = Constants.TutorialSteps;
 
+import SidebarHeaderDropdown from './sidebar_header_dropdown.jsx';
 import {Tooltip, OverlayTrigger} from 'react-bootstrap';
 
+import {Preferences, TutorialSteps} from 'utils/constants.jsx';
 import {createMenuTip} from 'components/tutorial/tutorial_tip.jsx';
 
-import React from 'react';
-
 export default class SidebarHeader extends React.Component {
     constructor(props) {
         super(props);
@@ -28,34 +22,31 @@ export default class SidebarHeader extends React.Component {
 
         this.state = this.getStateFromStores();
     }
+
     componentDidMount() {
         PreferenceStore.addChangeListener(this.onPreferenceChange);
     }
+
     componentWillUnmount() {
         PreferenceStore.removeChangeListener(this.onPreferenceChange);
     }
+
     getStateFromStores() {
         const tutorialStep = PreferenceStore.getInt(Preferences.TUTORIAL_STEP, this.props.currentUser.id, 999);
 
         return {showTutorialTip: tutorialStep === TutorialSteps.MENU_POPOVER && !Utils.isMobile()};
     }
+
     onPreferenceChange() {
         this.setState(this.getStateFromStores());
     }
+
     toggleDropdown(e) {
         e.preventDefault();
-        if (this.refs.dropdown.blockToggle) {
-            this.refs.dropdown.blockToggle = false;
-            return;
-        }
-        const menu = document.querySelector('.team__header .dropdown-toggle');
-        const isOpen = menu.parentElement.classList.toggle('open');
-        menu.setAttribute('aria-expanded', isOpen);
 
-        if (!isOpen) {
-            document.querySelector('.sidebar--left .dropdown-menu').scrollTop = 0;
-        }
+        this.refs.dropdown.toggleDropdown();
     }
+
     render() {
         var me = this.props.currentUser;
         var profilePicture = null;
@@ -99,13 +90,12 @@ export default class SidebarHeader extends React.Component {
                         </OverlayTrigger>
                     </div>
                 </a>
-                <NavbarDropdown
+                <SidebarHeaderDropdown
                     ref='dropdown'
                     teamType={this.props.teamType}
                     teamDisplayName={this.props.teamDisplayName}
                     teamName={this.props.teamName}
                     currentUser={this.props.currentUser}
-                    toggleDropdown={this.toggleDropdown}
                 />
             </div>
         );
diff --git a/webapp/components/sidebar_header_dropdown.jsx b/webapp/components/sidebar_header_dropdown.jsx
new file mode 100644
index 000000000..e33d6d5ec
--- /dev/null
+++ b/webapp/components/sidebar_header_dropdown.jsx
@@ -0,0 +1,498 @@
+// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import $ from 'jquery';
+import ReactDOM from 'react-dom';
+import * as Utils from 'utils/utils.jsx';
+import * as GlobalActions from 'actions/global_actions.jsx';
+
+import TeamStore from 'stores/team_store.jsx';
+import UserStore from 'stores/user_store.jsx';
+import WebrtcStore from 'stores/webrtc_store.jsx';
+import AboutBuildModal from './about_build_modal.jsx';
+import TeamMembersModal from './team_members_modal.jsx';
+import ToggleModalButton from './toggle_modal_button.jsx';
+import UserSettingsModal from './user_settings/user_settings_modal.jsx';
+
+import {Constants, WebrtcActionTypes} from 'utils/constants.jsx';
+
+import {Dropdown} from 'react-bootstrap';
+import {FormattedMessage} from 'react-intl';
+import {Link} from 'react-router/es6';
+
+import React from 'react';
+
+export default class SidebarHeaderDropdown extends React.Component {
+    static propTypes = {
+        teamType: React.PropTypes.string,
+        teamDisplayName: React.PropTypes.string,
+        teamName: React.PropTypes.string,
+        currentUser: React.PropTypes.object
+    };
+
+    static defaultProps = {
+        teamType: ''
+    };
+
+    constructor(props) {
+        super(props);
+
+        this.toggleDropdown = this.toggleDropdown.bind(this);
+
+        this.handleAboutModal = this.handleAboutModal.bind(this);
+        this.aboutModalDismissed = this.aboutModalDismissed.bind(this);
+        this.toggleAccountSettingsModal = this.toggleAccountSettingsModal.bind(this);
+        this.showInviteMemberModal = this.showInviteMemberModal.bind(this);
+        this.showGetTeamInviteLinkModal = this.showGetTeamInviteLinkModal.bind(this);
+
+        this.onTeamChange = this.onTeamChange.bind(this);
+        this.openAccountSettings = this.openAccountSettings.bind(this);
+
+        this.renderCustomEmojiLink = this.renderCustomEmojiLink.bind(this);
+
+        this.handleClick = this.handleClick.bind(this);
+
+        this.state = {
+            teams: TeamStore.getAll(),
+            teamMembers: TeamStore.getTeamMembers(),
+            showDropdown: false
+        };
+    }
+
+    handleClick(e) {
+        if (WebrtcStore.isBusy()) {
+            WebrtcStore.emitChanged({action: WebrtcActionTypes.IN_PROGRESS});
+            e.preventDefault();
+        }
+    }
+
+    toggleDropdown(e) {
+        if (e) {
+            e.preventDefault();
+        }
+
+        this.setState({showDropdown: !this.state.showDropdown});
+    }
+
+    handleAboutModal() {
+        this.setState({
+            showAboutModal: true,
+            showDropdown: false
+        });
+    }
+
+    aboutModalDismissed() {
+        this.setState({showAboutModal: false});
+    }
+
+    toggleAccountSettingsModal(e) {
+        e.preventDefault();
+
+        this.setState({
+            showUserSettingsModal: !this.state.showUserSettingsModal,
+            showDropdown: false
+        });
+    }
+
+    showInviteMemberModal(e) {
+        e.preventDefault();
+
+        this.setState({showDropdown: false});
+
+        GlobalActions.showInviteMemberModal();
+    }
+
+    showGetTeamInviteLinkModal(e) {
+        e.preventDefault();
+
+        this.setState({showDropdown: false});
+
+        GlobalActions.showGetTeamInviteLinkModal();
+    }
+
+    componentDidMount() {
+        TeamStore.addChangeListener(this.onTeamChange);
+        document.addEventListener('keydown', this.openAccountSettings);
+    }
+
+    onTeamChange() {
+        this.setState({
+            teams: TeamStore.getAll(),
+            teamMembers: TeamStore.getTeamMembers()
+        });
+    }
+
+    componentWillUnmount() {
+        $(ReactDOM.findDOMNode(this.refs.dropdown)).off('hide.bs.dropdown');
+        TeamStore.removeChangeListener(this.onTeamChange);
+        document.removeEventListener('keydown', this.openAccountSettings);
+    }
+
+    openAccountSettings(e) {
+        if (Utils.cmdOrCtrlPressed(e) && e.shiftKey && e.keyCode === Constants.KeyCodes.A) {
+            this.toggleAccountSettingsModal(e);
+        }
+    }
+
+    renderCustomEmojiLink() {
+        if (window.mm_config.EnableCustomEmoji !== 'true' || !Utils.canCreateCustomEmoji(this.props.currentUser)) {
+            return null;
+        }
+
+        return (
+            <li>
+                <Link
+                    onClick={this.handleClick}
+                    to={'/' + this.props.teamName + '/emoji'}
+                >
+                    <FormattedMessage
+                        id='navbar_dropdown.emoji'
+                        defaultMessage='Custom Emoji'
+                    />
+                </Link>
+            </li>
+        );
+    }
+
+    render() {
+        const config = global.mm_config;
+        var teamLink = '';
+        var inviteLink = '';
+        var manageLink = '';
+        var sysAdminLink = '';
+        var currentUser = this.props.currentUser;
+        var isAdmin = false;
+        var isSystemAdmin = false;
+        var teamSettings = null;
+        let integrationsLink = null;
+
+        if (!currentUser) {
+            return null;
+        }
+
+        if (currentUser != null) {
+            isAdmin = TeamStore.isTeamAdminForCurrentTeam() || UserStore.isSystemAdminForCurrentUser();
+            isSystemAdmin = UserStore.isSystemAdminForCurrentUser();
+
+            inviteLink = (
+                <li>
+                    <a
+                        href='#'
+                        onClick={this.showInviteMemberModal}
+                    >
+                        <FormattedMessage
+                            id='navbar_dropdown.inviteMember'
+                            defaultMessage='Invite New Member'
+                        />
+                    </a>
+                </li>
+            );
+
+            if (this.props.teamType === Constants.OPEN_TEAM && config.EnableUserCreation === 'true') {
+                teamLink = (
+                    <li>
+                        <a
+                            href='#'
+                            onClick={this.showGetTeamInviteLinkModal}
+                        >
+                            <FormattedMessage
+                                id='navbar_dropdown.teamLink'
+                                defaultMessage='Get Team Invite Link'
+                            />
+                        </a>
+                    </li>
+                );
+            }
+
+            if (global.window.mm_license.IsLicensed === 'true') {
+                if (config.RestrictTeamInvite === Constants.PERMISSIONS_SYSTEM_ADMIN && !isSystemAdmin) {
+                    teamLink = null;
+                    inviteLink = null;
+                } else if (config.RestrictTeamInvite === Constants.PERMISSIONS_TEAM_ADMIN && !isAdmin) {
+                    teamLink = null;
+                    inviteLink = null;
+                }
+            }
+        }
+
+        let membersName = (
+            <FormattedMessage
+                id='navbar_dropdown.manageMembers'
+                defaultMessage='Manage Members'
+            />
+        );
+
+        if (isAdmin) {
+            teamSettings = (
+                <li>
+                    <a
+                        href='#'
+                        data-toggle='modal'
+                        data-target='#team_settings'
+                    >
+                        <FormattedMessage
+                            id='navbar_dropdown.teamSettings'
+                            defaultMessage='Team Settings'
+                        />
+                    </a>
+                </li>
+            );
+        } else {
+            membersName = (
+                <FormattedMessage
+                    id='navbar_dropdown.viewMembers'
+                    defaultMessage='View Members'
+                />
+            );
+        }
+
+        manageLink = (
+            <li>
+                <ToggleModalButton
+                    dialogType={TeamMembersModal}
+                    dialogProps={{isAdmin}}
+                    onClick={this.toggleDropdown}
+                >
+                    {membersName}
+                </ToggleModalButton>
+            </li>
+        );
+
+        const integrationsEnabled =
+            config.EnableIncomingWebhooks === 'true' ||
+            config.EnableOutgoingWebhooks === 'true' ||
+            config.EnableCommands === 'true' ||
+            (config.EnableOAuthServiceProvider === 'true' && (isSystemAdmin || config.EnableOnlyAdminIntegrations !== 'true'));
+        if (integrationsEnabled && (isAdmin || config.EnableOnlyAdminIntegrations !== 'true')) {
+            integrationsLink = (
+                <li>
+                    <Link
+                        to={'/' + this.props.teamName + '/integrations'}
+                        onClick={this.handleClick}
+                    >
+                        <FormattedMessage
+                            id='navbar_dropdown.integrations'
+                            defaultMessage='Integrations'
+                        />
+                    </Link>
+                </li>
+            );
+        }
+
+        if (isSystemAdmin) {
+            sysAdminLink = (
+                <li>
+                    <Link
+                        to={'/admin_console'}
+                        onClick={this.handleClick}
+                    >
+                        <FormattedMessage
+                            id='navbar_dropdown.console'
+                            defaultMessage='System Console'
+                        />
+                    </Link>
+                </li>
+            );
+        }
+
+        var teams = [];
+
+        if (config.EnableTeamCreation === 'true') {
+            teams.push(
+                <li key='newTeam_li'>
+                    <Link
+                        key='newTeam_a'
+                        to='/create_team'
+                        onClick={this.handleClick}
+                    >
+                        <FormattedMessage
+                            id='navbar_dropdown.create'
+                            defaultMessage='Create a New Team'
+                        />
+                    </Link>
+                </li>
+            );
+        }
+
+        teams.push(
+            <li key='leaveTeam_li'>
+                <a
+                    href='#'
+                    onClick={GlobalActions.showLeaveTeamModal}
+                >
+                    <FormattedMessage
+                        id='navbar_dropdown.leave'
+                        defaultMessage='Leave Team'
+                    />
+                </a>
+            </li>
+        );
+
+        if (this.state.teamMembers && this.state.teamMembers.length > 1) {
+            teams.push(
+                <li
+                    key='teamDiv'
+                    className='divider'
+                />
+            );
+
+            for (var index in this.state.teamMembers) {
+                if (this.state.teamMembers.hasOwnProperty(index)) {
+                    var teamMember = this.state.teamMembers[index];
+                    var team = this.state.teams[teamMember.team_id];
+
+                    if (team.name !== this.props.teamName) {
+                        teams.push(
+                            <li key={'team_' + team.name}>
+                                <Link
+                                    to={'/' + team.name + '/channels/town-square'}
+                                >
+                                    <FormattedMessage
+                                        id='navbar_dropdown.switchTo'
+                                        defaultMessage='Switch to '
+                                    />
+                                    {team.display_name}
+                                </Link>
+                            </li>
+                        );
+                    }
+                }
+            }
+        }
+
+        let helpLink = null;
+        if (config.HelpLink) {
+            helpLink = (
+                <li>
+                    <Link
+                        target='_blank'
+                        rel='noopener noreferrer'
+                        to={config.HelpLink}
+                    >
+                        <FormattedMessage
+                            id='navbar_dropdown.help'
+                            defaultMessage='Help'
+                        />
+                    </Link>
+                </li>
+            );
+        }
+
+        let reportLink = null;
+        if (config.ReportAProblemLink) {
+            reportLink = (
+                <li>
+                    <Link
+                        target='_blank'
+                        rel='noopener noreferrer'
+                        to={config.ReportAProblemLink}
+                    >
+                        <FormattedMessage
+                            id='navbar_dropdown.report'
+                            defaultMessage='Report a Problem'
+                        />
+                    </Link>
+                </li>
+            );
+        }
+
+        let nativeAppDivider = null;
+        let nativeAppLink = null;
+        if (global.window.mm_config.AppDownloadLink) {
+            nativeAppDivider = <li className='divider'/>;
+            nativeAppLink = (
+                <li>
+                    <Link
+                        target='_blank'
+                        rel='noopener noreferrer'
+                        to={global.window.mm_config.AppDownloadLink}
+                    >
+                        <FormattedMessage
+                            id='navbar_dropdown.nativeApps'
+                            defaultMessage='Download Apps'
+                        />
+                    </Link>
+                </li>
+            );
+        }
+
+        return (
+            <Dropdown
+                open={this.state.showDropdown}
+                onClose={this.toggleDropdown}
+                className='sidebar-header-dropdown'
+                pullRight={true}
+            >
+                <a
+                    href='#'
+                    className='sidebar-header-dropdown__toggle'
+                    bsRole='toggle'
+                    onClick={this.toggleDropdown}
+                >
+                    <span
+                        className='sidebar-header-dropdown__icon'
+                        dangerouslySetInnerHTML={{__html: Constants.MENU_ICON}}
+                    />
+                </a>
+                <Dropdown.Menu>
+                    <li>
+                        <a
+                            href='#'
+                            onClick={this.toggleAccountSettingsModal}
+                        >
+                            <FormattedMessage
+                                id='navbar_dropdown.accountSettings'
+                                defaultMessage='Account Settings'
+                            />
+                        </a>
+                    </li>
+                    {inviteLink}
+                    {teamLink}
+                    <li>
+                        <a
+                            href='#'
+                            onClick={GlobalActions.emitUserLoggedOutEvent}
+                        >
+                            <FormattedMessage
+                                id='navbar_dropdown.logout'
+                                defaultMessage='Logout'
+                            />
+                        </a>
+                    </li>
+                    <li className='divider'/>
+                    {integrationsLink}
+                    {this.renderCustomEmojiLink()}
+                    <li className='divider'/>
+                    {teamSettings}
+                    {manageLink}
+                    {sysAdminLink}
+                    {teams}
+                    <li className='divider'/>
+                    {helpLink}
+                    {reportLink}
+                    <li>
+                        <a
+                            href='#'
+                            onClick={this.handleAboutModal}
+                        >
+                            <FormattedMessage
+                                id='navbar_dropdown.about'
+                                defaultMessage='About Mattermost'
+                            />
+                        </a>
+                    </li>
+                    {nativeAppDivider}
+                    {nativeAppLink}
+                    <UserSettingsModal
+                        show={this.state.showUserSettingsModal}
+                        onModalDismissed={() => this.setState({showUserSettingsModal: false})}
+                    />
+                    <AboutBuildModal
+                        show={this.state.showAboutModal}
+                        onModalDismissed={this.aboutModalDismissed}
+                    />
+                </Dropdown.Menu>
+            </Dropdown>
+        );
+    }
+}
\ No newline at end of file
diff --git a/webapp/sass/layout/_headers.scss b/webapp/sass/layout/_headers.scss
index ee13e3c54..71dc98804 100644
--- a/webapp/sass/layout/_headers.scss
+++ b/webapp/sass/layout/_headers.scss
@@ -244,14 +244,16 @@
                 @include alpha-property(background, $black, .1);
             }
 
-            a {
-                text-decoration: none;
-            }
-
             .user__name {
                 color: $white;
             }
 
+            .sidebar-header-dropdown {
+                .sidebar-header-dropdown__toggle {
+                    @include opacity(1);
+                }
+            }
+
             .navbar-right {
                 .dropdown-toggle {
                     @include opacity(1);
@@ -259,16 +261,28 @@
             }
         }
 
-        .navbar-right {
+        a {
+            text-decoration: none;
+        }
+
+        .sidebar-header-dropdown,
+        .admin-navbar-dropdown {
             font-size: .85em;
             position: absolute;
+            margin-right: -15px;
             right: 22px;
             top: 10px;
             z-index: 5;
 
-            .dropdown-toggle {
+            .sidebar-header-dropdown__toggle,
+            .admin-navbar-dropdown__toggle {
                 @include opacity(.8);
                 @include single-transition(all, .1s, linear);
+                background: none;
+                color: $white;
+                float: right;
+                font-size: 1em;
+                line-height: 1.8;
                 padding: 10px;
             }
 
@@ -284,9 +298,14 @@
                 }
             }
 
-            .dropdown__icon {
+            .sidebar-header-dropdown__icon,
+            .admin-navbar-dropdown__icon {
                 fill: $white;
             }
+
+            .divider + .divider {
+                display: none;
+            }
         }
 
         .user__picture {
@@ -330,22 +349,6 @@
             font-weight: 400;
             line-height: 18px;
         }
-
-        > .nav {
-            > li {
-                > a {
-                    background: none;
-                    float: right;
-                    padding: 2px;
-                }
-
-                .dropdown-toggle {
-                    color: $white;
-                    font-size: 1em;
-                    line-height: 1.8;
-                }
-            }
-        }
     }
 
     .search__clear {
diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss
index f819bd4d0..c55713058 100644
--- a/webapp/sass/responsive/_mobile.scss
+++ b/webapp/sass/responsive/_mobile.scss
@@ -824,7 +824,7 @@
                 margin: 10px 0;
             }
 
-            .navbar-right {
+            .sidebar-header-dropdown {
                 display: none;
             }
         }
diff --git a/webapp/utils/constants.jsx b/webapp/utils/constants.jsx
index 9e3eac5c0..039d48aaa 100644
--- a/webapp/utils/constants.jsx
+++ b/webapp/utils/constants.jsx
@@ -197,12 +197,20 @@ export const SocketEvents = {
     WEBRTC: 'webrtc'
 };
 
+export const TutorialSteps = {
+    INTRO_SCREENS: 0,
+    POST_POPOVER: 1,
+    CHANNEL_POPOVER: 2,
+    MENU_POPOVER: 3
+};
+
 export const Constants = {
     Preferences,
     SocketEvents,
     ActionTypes,
     WebrtcActionTypes,
     UserStatuses,
+    TutorialSteps,
 
     PayloadSources: keyMirror({
         SERVER_ACTION: null,
@@ -614,12 +622,6 @@ export const Constants = {
         Ubuntu: 'font--ubuntu'
     },
     DEFAULT_FONT: 'Open Sans',
-    TutorialSteps: {
-        INTRO_SCREENS: 0,
-        POST_POPOVER: 1,
-        CHANNEL_POPOVER: 2,
-        MENU_POPOVER: 3
-    },
     KeyCodes: {
         BACKSPACE: 8,
         TAB: 9,
diff --git a/webapp/utils/utils.jsx b/webapp/utils/utils.jsx
index d59687606..ffc676e63 100644
--- a/webapp/utils/utils.jsx
+++ b/webapp/utils/utils.jsx
@@ -522,7 +522,7 @@ export function applyTheme(theme) {
 
     if (theme.sidebarHeaderTextColor) {
         changeCss('.app__body .sidebar--left .team__header .header__info, .app__body .sidebar--menu .team__header .header__info, .app__body .post-list__timestamp > div', 'color:' + theme.sidebarHeaderTextColor, 1);
-        changeCss('.app__body .sidebar--left .team__header .navbar-right .dropdown__icon, .app__body .sidebar--menu .team__header .navbar-right .dropdown__icon', 'fill:' + theme.sidebarHeaderTextColor, 1);
+        changeCss('.app__body .sidebar-header-dropdown__icon', 'fill:' + theme.sidebarHeaderTextColor, 1);
         changeCss('.app__body .sidebar--left .team__header .user__name, .app__body .sidebar--menu .team__header .user__name', 'color:' + changeOpacity(theme.sidebarHeaderTextColor, 0.8), 1);
         changeCss('.app__body .sidebar--left .team__header:hover .user__name, .app__body .sidebar--menu .team__header:hover .user__name', 'color:' + theme.sidebarHeaderTextColor, 1);
         changeCss('.app__body .modal .modal-header .modal-title, .app__body .modal .modal-header .modal-title .name, .app__body .modal .modal-header button.close', 'color:' + theme.sidebarHeaderTextColor, 1);
-- 
cgit v1.2.3-1-g7c22