diff --git a/actions/global_actions.jsx b/actions/global_actions.jsx
index dda4af5726da..91ea2fc45c94 100644
--- a/actions/global_actions.jsx
+++ b/actions/global_actions.jsx
@@ -24,7 +24,8 @@ import {loadChannelsForCurrentUser} from 'actions/channel_actions.jsx';
 import {handleNewPost} from 'actions/post_actions.jsx';
 import {stopPeriodicStatusUpdates} from 'actions/status_actions.jsx';
 import {loadNewDMIfNeeded, loadNewGMIfNeeded, loadProfilesForSidebar} from 'actions/user_actions.jsx';
-import {closeRightHandSide} from 'actions/views/rhs';
+import {closeRightHandSide, closeMenu as closeRhsMenu} from 'actions/views/rhs';
+import {close as closeLhs} from 'actions/views/lhs';
 import * as WebsocketActions from 'actions/websocket_actions.jsx';
 import AppDispatcher from 'dispatcher/app_dispatcher.jsx';
 import BrowserStore from 'stores/browser_store.jsx';
@@ -472,10 +473,8 @@ export function clientLogout(redirectTo = '/') {
 
 export function toggleSideBarRightMenuAction() {
     dispatch(closeRightHandSide());
-
-    document.querySelector('.app__body .inner-wrap').classList.remove('move--right', 'move--left', 'move--left-small');
-    document.querySelector('.app__body .sidebar--left').classList.remove('move--right');
-    document.querySelector('.app__body .sidebar--right').classList.remove('move--left');
+    dispatch(closeLhs());
+    dispatch(closeRhsMenu());
     document.querySelector('.app__body .sidebar--menu').classList.remove('move--left');
 }
 
diff --git a/actions/views/lhs.js b/actions/views/lhs.js
index d07e5b174924..def81cd5cfe9 100644
--- a/actions/views/lhs.js
+++ b/actions/views/lhs.js
@@ -1,15 +1,16 @@
+// Copyright (c) 2018-present Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
 
-import {fetchMyChannelsAndMembers} from 'mattermost-redux/actions/channels';
+import {ActionTypes} from 'utils/constants.jsx';
 
-import {loadProfilesForSidebar} from 'actions/user_actions.jsx';
-import {loadStatusesForChannelAndSidebar} from 'actions/status_actions.jsx';
-import store from 'stores/redux_store.jsx';
+export const toggle = () => (dispatch) => dispatch({
+    type: ActionTypes.TOGGLE_LHS,
+});
 
-const dispatch = store.dispatch;
-const getState = store.getState;
+export const open = () => (dispatch) => dispatch({
+    type: ActionTypes.OPEN_LHS,
+});
 
-export async function initTeamChangeActions(teamId) {
-    await fetchMyChannelsAndMembers(teamId)(dispatch, getState);
-    loadStatusesForChannelAndSidebar();
-    loadProfilesForSidebar();
-}
+export const close = () => (dispatch) => dispatch({
+    type: ActionTypes.CLOSE_LHS,
+});
diff --git a/actions/views/rhs.js b/actions/views/rhs.js
index 34deb460fe5c..f10bc8b5f245 100644
--- a/actions/views/rhs.js
+++ b/actions/views/rhs.js
@@ -261,3 +261,15 @@ export function closeRightHandSide() {
         ]));
     };
 }
+
+export const toggleMenu = () => (dispatch) => dispatch({
+    type: ActionTypes.TOGGLE_RHS_MENU,
+});
+
+export const openMenu = () => (dispatch) => dispatch({
+    type: ActionTypes.OPEN_RHS_MENU,
+});
+
+export const closeMenu = () => (dispatch) => dispatch({
+    type: ActionTypes.CLOSE_RHS_MENU,
+});
diff --git a/actions/views/webrtc.js b/actions/views/webrtc.js
new file mode 100644
index 000000000000..231fb5fd73ed
--- /dev/null
+++ b/actions/views/webrtc.js
@@ -0,0 +1,14 @@
+// Copyright (c) 2018-present Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import {ActionTypes} from 'utils/constants.jsx';
+
+export const initWebrtc = (userId, isCaller) => (dispatch) => dispatch({
+    type: ActionTypes.INIT_WEBRTC,
+    userId,
+    isCaller,
+});
+
+export const closeWebrtc = () => (dispatch) => dispatch({
+    type: ActionTypes.CLOSE_WEBRTC,
+});
diff --git a/components/channel_layout/center_channel/center_channel.jsx b/components/channel_layout/center_channel/center_channel.jsx
index ce1235ccd356..3cdde5a2e98e 100644
--- a/components/channel_layout/center_channel/center_channel.jsx
+++ b/components/channel_layout/center_channel/center_channel.jsx
@@ -4,6 +4,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {Route, Switch, Redirect} from 'react-router-dom';
+import classNames from 'classnames';
 
 import PermalinkView from 'components/permalink_view';
 import Navbar from 'components/navbar';
@@ -14,6 +15,10 @@ export default class CenterChannel extends React.PureComponent {
         match: PropTypes.object.isRequired,
         location: PropTypes.object.isRequired,
         lastChannelPath: PropTypes.string.isRequired,
+        lhsOpen: PropTypes.bool.isRequired,
+        rhsOpen: PropTypes.bool.isRequired,
+        rhsMenuOpen: PropTypes.bool.isRequired,
+        webRtcOpen: PropTypes.bool.isRequired,
     };
 
     constructor(props) {
@@ -34,9 +39,13 @@ export default class CenterChannel extends React.PureComponent {
         const url = this.props.match.url;
         return (
             <div
-                id='inner-wrap-webrtc'
                 key='inner-wrap'
-                className='inner-wrap channel__wrap'
+                className={classNames('inner-wrap', 'channel__wrap', {
+                    'webrtc--show': this.props.webRtcOpen,
+                    'move--right': this.props.lhsOpen,
+                    'move--left': this.props.rhsOpen || this.props.webRtcOpen,
+                    'move--left-small': this.props.rhsMenuOpen,
+                })}
             >
                 <div className='row header'>
                     <div id='navbar'>
diff --git a/components/channel_layout/center_channel/index.js b/components/channel_layout/center_channel/index.js
index 4ddebba0b788..922dda0182dc 100644
--- a/components/channel_layout/center_channel/index.js
+++ b/components/channel_layout/center_channel/index.js
@@ -6,6 +6,9 @@ import {getTeamByName} from 'mattermost-redux/selectors/entities/teams';
 
 import Constants from 'utils/constants';
 import {getGlobalItem} from 'selectors/storage';
+import {getIsRhsOpen, getIsRhsMenuOpen} from 'selectors/rhs';
+import {getIsLhsOpen} from 'selectors/lhs';
+import {getIsWebrtcOpen} from 'selectors/webrtc';
 
 import CenterChannel from './center_channel';
 
@@ -20,6 +23,10 @@ const getLastChannelPath = (state, teamName) => {
 
 const mapStateToProps = (state, ownProps) => ({
     lastChannelPath: `${ownProps.match.url}/channels/${getLastChannelPath(state, ownProps.match.params.team)}`,
+    lhsOpen: getIsLhsOpen(state),
+    rhsOpen: getIsRhsOpen(state),
+    rhsMenuOpen: getIsRhsMenuOpen(state),
+    webRtcOpen: getIsWebrtcOpen(state),
 });
 
 export default connect(mapStateToProps)(CenterChannel);
diff --git a/components/channel_layout/channel_controller.jsx b/components/channel_layout/channel_controller.jsx
index f2badeced736..63b93cbbd886 100644
--- a/components/channel_layout/channel_controller.jsx
+++ b/components/channel_layout/channel_controller.jsx
@@ -22,8 +22,8 @@ import SidebarRightMenu from 'components/sidebar_right_menu';
 import TeamSettingsModal from 'components/team_settings_modal.jsx';
 import ImportThemeModal from 'components/user_settings/import_theme_modal.jsx';
 import UserSettingsModal from 'components/user_settings/modal';
-import WebrtcNotification from 'components/webrtc/webrtc_notification.jsx';
-import WebrtcSidebar from 'components/webrtc/webrtc_sidebar.jsx';
+import WebrtcNotification from 'components/webrtc/notification';
+import WebrtcSidebar from 'components/webrtc/sidebar';
 import ModalController from 'components/modal_controller';
 import TeamSidebar from 'components/team_sidebar';
 import Sidebar from 'components/sidebar';
diff --git a/components/create_post/create_post.jsx b/components/create_post/create_post.jsx
index 5ee4a8ea2887..4ff4603564cb 100644
--- a/components/create_post/create_post.jsx
+++ b/components/create_post/create_post.jsx
@@ -23,7 +23,7 @@ import MsgTyping from 'components/msg_typing';
 import PostDeletedModal from 'components/post_deleted_modal.jsx';
 import EmojiIcon from 'components/svg/emoji_icon';
 import Textbox from 'components/textbox.jsx';
-import TutorialTip from 'components/tutorial/tutorial_tip.jsx';
+import TutorialTip from 'components/tutorial/tutorial_tip';
 
 const KeyCodes = Constants.KeyCodes;
 
diff --git a/components/navbar/index.js b/components/navbar/index.js
index 19d2c9a77478..1d2b313a0fa4 100644
--- a/components/navbar/index.js
+++ b/components/navbar/index.js
@@ -5,7 +5,14 @@ import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
 import {getConfig} from 'mattermost-redux/selectors/entities/general';
 
-import {closeRightHandSide, updateRhsState, showPinnedPosts} from 'actions/views/rhs';
+import {
+    closeRightHandSide as closeRhs,
+    updateRhsState,
+    showPinnedPosts,
+    toggleMenu as toggleRhsMenu,
+    closeMenu as closeRhsMenu,
+} from 'actions/views/rhs';
+import {toggle as toggleLhs, close as closeLhs} from 'actions/views/lhs';
 import {getRhsState} from 'selectors/rhs';
 import {RHSStates} from 'utils/constants.jsx';
 
@@ -26,9 +33,13 @@ function mapStateToProps(state) {
 function mapDispatchToProps(dispatch) {
     return {
         actions: bindActionCreators({
-            closeRightHandSide,
             updateRhsState,
             showPinnedPosts,
+            toggleLhs,
+            closeLhs,
+            closeRhs,
+            toggleRhsMenu,
+            closeRhsMenu,
         }, dispatch),
     };
 }
diff --git a/components/navbar/navbar.jsx b/components/navbar/navbar.jsx
index 527cd63b7b23..49c9be405389 100644
--- a/components/navbar/navbar.jsx
+++ b/components/navbar/navbar.jsx
@@ -45,9 +45,13 @@ export default class Navbar extends React.Component {
         isPinnedPosts: PropTypes.bool,
         enableWebrtc: PropTypes.bool.isRequired,
         actions: PropTypes.shape({
-            closeRightHandSide: PropTypes.func,
             updateRhsState: PropTypes.func,
             showPinnedPosts: PropTypes.func,
+            toggleLhs: PropTypes.func.isRequired,
+            closeLhs: PropTypes.func.isRequired,
+            closeRhs: PropTypes.func.isRequired,
+            toggleRhsMenu: PropTypes.func.isRequired,
+            closeRhsMenu: PropTypes.func.isRequired,
         }),
     };
 
@@ -137,27 +141,22 @@ export default class Navbar extends React.Component {
     hideSidebars = (e) => {
         var windowWidth = $(window).outerWidth();
         if (windowWidth <= 768) {
-            this.props.actions.closeRightHandSide();
+            this.props.actions.closeRhs();
 
             if (e.target.className !== 'navbar-toggle' && e.target.className !== 'icon-bar') {
-                $('.app__body .inner-wrap').removeClass('move--right move--left move--left-small');
-                $('.app__body .sidebar--left').removeClass('move--right');
-                $('.multi-teams .team-sidebar').removeClass('move--right');
-                $('.app__body .sidebar--right').removeClass('move--left');
-                $('.app__body .sidebar--menu').removeClass('move--left');
+                this.props.actions.closeLhs();
+                this.props.actions.closeRhs();
+                this.props.actions.closeRhsMenu();
             }
         }
     }
 
     toggleLeftSidebar = () => {
-        $('.app__body .inner-wrap').toggleClass('move--right');
-        $('.app__body .sidebar--left').toggleClass('move--right');
-        $('.multi-teams .team-sidebar').toggleClass('move--right');
+        this.props.actions.toggleLhs();
     }
 
     toggleRightSidebar = () => {
-        $('.app__body .inner-wrap').toggleClass('move--left-small');
-        $('.app__body .sidebar--menu').toggleClass('move--left');
+        this.props.actions.toggleRhsMenu();
     }
 
     showSearch = () => {
diff --git a/components/permalink_view/permalink_view.jsx b/components/permalink_view/permalink_view.jsx
index b2c8fa06cdee..7c22495187b6 100644
--- a/components/permalink_view/permalink_view.jsx
+++ b/components/permalink_view/permalink_view.jsx
@@ -42,7 +42,9 @@ export default class PermalinkView extends React.PureComponent {
     }
 
     componentWillReceiveProps(nextProps) {
-        this.doPermalinkEvent(nextProps);
+        if (this.props.match.params.postid !== nextProps.match.params.postid) {
+            this.doPermalinkEvent(nextProps);
+        }
     }
 
     doPermalinkEvent = async (props) => {
diff --git a/components/search_bar/index.jsx b/components/search_bar/index.jsx
index ebd8eb701835..ecdbb985cdb7 100644
--- a/components/search_bar/index.jsx
+++ b/components/search_bar/index.jsx
@@ -11,6 +11,7 @@ import {
     showFlaggedPosts,
     closeRightHandSide,
 } from 'actions/views/rhs';
+import {closeWebrtc} from 'actions/views/webrtc';
 import {getRhsState, getSearchTerms, getIsSearchingTerm} from 'selectors/rhs';
 import {RHSStates} from 'utils/constants.jsx';
 
@@ -35,6 +36,7 @@ function mapDispatchToProps(dispatch) {
             showMentions,
             showFlaggedPosts,
             closeRightHandSide,
+            closeWebrtc,
         }, dispatch),
     };
 }
diff --git a/components/search_bar/search_bar.jsx b/components/search_bar/search_bar.jsx
index eea2c674bf9c..ce7139b93759 100644
--- a/components/search_bar/search_bar.jsx
+++ b/components/search_bar/search_bar.jsx
@@ -31,6 +31,7 @@ export default class SearchBar extends React.Component {
             showMentions: PropTypes.func,
             showFlaggedPosts: PropTypes.func,
             closeRightHandSide: PropTypes.func,
+            closeWebrtc: PropTypes.func,
         }),
     };
 
@@ -64,15 +65,7 @@ export default class SearchBar extends React.Component {
     }
 
     handleClose = () => {
-        if (Utils.isMobile()) {
-            setTimeout(() => {
-                document.querySelector('.app__body .sidebar--menu').classList.add('visible');
-                document.querySelector('#sidebar-webrtc').classList.remove('webrtc--show');
-                document.querySelector('#inner-wrap-webrtc').classList.remove('webrtc--show');
-                document.querySelector('#inner-wrap-webrtc').classList.remove('move--left');
-            });
-        }
-
+        this.props.actions.closeWebrtc();
         this.props.actions.closeRightHandSide();
     }
 
diff --git a/components/sidebar/header/sidebar_header.jsx b/components/sidebar/header/sidebar_header.jsx
index 318505f39ffa..13a91375abdb 100644
--- a/components/sidebar/header/sidebar_header.jsx
+++ b/components/sidebar/header/sidebar_header.jsx
@@ -9,7 +9,7 @@ import PreferenceStore from 'stores/preference_store.jsx';
 import {Constants, Preferences, TutorialSteps} from 'utils/constants.jsx';
 import * as Utils from 'utils/utils.jsx';
 import StatusDropdown from 'components/status_dropdown/index.jsx';
-import {createMenuTip} from 'components/tutorial/tutorial_tip.jsx';
+import MenuTutorialTip from 'components/tutorial/menu_tutorial_tip';
 
 import SidebarHeaderDropdown from './dropdown';
 
@@ -89,7 +89,12 @@ export default class SidebarHeader extends React.Component {
 
         let tutorialTip = null;
         if (this.state.showTutorialTip) {
-            tutorialTip = createMenuTip(this.showDropdown);
+            tutorialTip = (
+                <MenuTutorialTip
+                    toggleFunc={this.showDropdown}
+                    onBottom={false}
+                />
+            );
         }
 
         let teamNameWithToolTip = null;
diff --git a/components/sidebar/index.js b/components/sidebar/index.js
index 98142b7530d8..f73a097f2ba6 100644
--- a/components/sidebar/index.js
+++ b/components/sidebar/index.js
@@ -2,6 +2,7 @@
 // See License.txt for license information.
 
 import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
 
 import {Preferences} from 'mattermost-redux/constants/index';
 import {
@@ -25,6 +26,8 @@ import {getCurrentTeam, isCurrentUserCurrentTeamAdmin} from 'mattermost-redux/se
 import {goToChannelById} from 'actions/channel_actions.jsx';
 import {showCreateOption} from 'utils/channel_utils.jsx';
 import {GroupUnreadChannels, Constants} from 'utils/constants.jsx';
+import {close} from 'actions/views/lhs';
+import {getIsLhsOpen} from 'selectors/lhs';
 
 import Sidebar from './sidebar.jsx';
 
@@ -65,6 +68,7 @@ function mapStateToProps(state) {
 
     return {
         config,
+        isOpen: getIsLhsOpen(state),
         showUnreadSection,
         publicChannelIds,
         privateChannelIds,
@@ -81,11 +85,12 @@ function mapStateToProps(state) {
     };
 }
 
-function mapDispatchToProps() {
+function mapDispatchToProps(dispatch) {
     return {
-        actions: {
+        actions: bindActionCreators({
             goToChannelById,
-        },
+            close,
+        }, dispatch),
     };
 }
 
diff --git a/components/sidebar/sidebar.jsx b/components/sidebar/sidebar.jsx
index f84868e2801c..78f5f8489a39 100644
--- a/components/sidebar/sidebar.jsx
+++ b/components/sidebar/sidebar.jsx
@@ -7,6 +7,7 @@ import {OverlayTrigger, Tooltip} from 'react-bootstrap';
 import ReactDOM from 'react-dom';
 import {FormattedMessage} from 'react-intl';
 import {PropTypes} from 'prop-types';
+import classNames from 'classnames';
 
 import {browserHistory} from 'utils/browser_history';
 import {trackEvent} from 'actions/diagnostics_actions.jsx';
@@ -33,6 +34,8 @@ export default class Sidebar extends React.PureComponent {
          */
         config: PropTypes.object.isRequired,
 
+        isOpen: PropTypes.bool.isRequired,
+
         /**
          * List of public channels (ids)
          */
@@ -100,6 +103,7 @@ export default class Sidebar extends React.PureComponent {
 
         actions: PropTypes.shape({
             goToChannelById: PropTypes.func.isRequired,
+            close: PropTypes.func.isRequired,
         }).isRequired,
     };
 
@@ -162,9 +166,7 @@ export default class Sidebar extends React.PureComponent {
             if (this.closedDirectChannel) {
                 this.closedDirectChannel = false;
             } else {
-                $('.app__body .inner-wrap').removeClass('move--right');
-                $('.app__body .sidebar--left').removeClass('move--right');
-                $('.multi-teams .team-sidebar').removeClass('move--right');
+                this.props.actions.close();
             }
         }
 
@@ -657,7 +659,7 @@ export default class Sidebar extends React.PureComponent {
 
         return (
             <div
-                className='sidebar--left'
+                className={classNames('sidebar--left', {'move--right': this.props.isOpen && Utils.isMobile()})}
                 id='sidebar-left'
                 key='sidebar-left'
             >
diff --git a/components/sidebar/sidebar_channel/index.js b/components/sidebar/sidebar_channel/index.js
index 38064e491c8d..632937e0d59b 100644
--- a/components/sidebar/sidebar_channel/index.js
+++ b/components/sidebar/sidebar_channel/index.js
@@ -12,6 +12,7 @@ import {leaveChannel} from 'mattermost-redux/actions/channels';
 import {getConfig} from 'mattermost-redux/selectors/entities/general';
 
 import {Constants, NotificationLevels} from 'utils/constants.jsx';
+import {open as openLhs} from 'actions/views/lhs.js';
 
 import SidebarChannel from './sidebar_channel.jsx';
 
@@ -87,6 +88,7 @@ function mapDispatchToProps(dispatch) {
         actions: bindActionCreators({
             savePreferences,
             leaveChannel,
+            openLhs,
         }, dispatch),
     };
 }
diff --git a/components/sidebar/sidebar_channel/sidebar_channel.jsx b/components/sidebar/sidebar_channel/sidebar_channel.jsx
index b72fc1feb2ae..60801af7bd2b 100644
--- a/components/sidebar/sidebar_channel/sidebar_channel.jsx
+++ b/components/sidebar/sidebar_channel/sidebar_channel.jsx
@@ -7,7 +7,6 @@ import PropTypes from 'prop-types';
 
 import {browserHistory} from 'utils/browser_history';
 import {Constants} from 'utils/constants.jsx';
-import * as Utils from 'utils/utils.jsx';
 import {trackEvent} from 'actions/diagnostics_actions.jsx';
 import * as GlobalActions from 'actions/global_actions.jsx';
 import SidebarChannelButtonOrLink from '../sidebar_channel_button_or_link/sidebar_channel_button_or_link.jsx';
@@ -124,20 +123,12 @@ export default class SidebarChannel extends React.PureComponent {
         actions: PropTypes.shape({
             savePreferences: PropTypes.func.isRequired,
             leaveChannel: PropTypes.func.isRequired,
+            openLhs: PropTypes.func.isRequired,
         }).isRequired,
     }
 
     isLeaving = false;
 
-    openLeftSidebar = () => {
-        if (Utils.isMobile()) {
-            setTimeout(() => {
-                document.querySelector('.app__body .inner-wrap').classList.add('move--right');
-                document.querySelector('.app__body .sidebar--left').classList.add('move--right');
-            });
-        }
-    }
-
     handleLeavePublicChannel = () => {
         this.props.actions.leaveChannel(this.props.channelId);
         trackEvent('ui', 'ui_public_channel_x_button_clicked');
@@ -228,7 +219,7 @@ export default class SidebarChannel extends React.PureComponent {
                     offTopicDisplayName={this.props.offTopicDisplayName}
                 />
             );
-            this.openLeftSidebar();
+            this.props.actions.openLhs();
         }
 
         let link = '';
diff --git a/components/sidebar/sidebar_tutorial_tip.jsx b/components/sidebar/sidebar_tutorial_tip.jsx
index a390e7ee5c8c..841aa6e6c8a2 100644
--- a/components/sidebar/sidebar_tutorial_tip.jsx
+++ b/components/sidebar/sidebar_tutorial_tip.jsx
@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 import {FormattedHTMLMessage} from 'react-intl';
 
 import {Constants} from 'utils/constants.jsx';
-import TutorialTip from 'components/tutorial/tutorial_tip.jsx';
+import TutorialTip from 'components/tutorial/tutorial_tip';
 
 export default class SidebarTutorialTip extends React.PureComponent {
     static propTypes = {
diff --git a/components/sidebar_right/index.js b/components/sidebar_right/index.js
index edcdeb15b873..01c0c0a98406 100644
--- a/components/sidebar_right/index.js
+++ b/components/sidebar_right/index.js
@@ -9,7 +9,7 @@ import {getPost} from 'mattermost-redux/selectors/entities/posts';
 
 import PostStore from 'stores/post_store';
 import {getPinnedPosts, getFlaggedPosts} from 'actions/views/rhs';
-import {getRhsState, getSelectedPostId, getSelectedChannelId, getPreviousRhsState} from 'selectors/rhs';
+import {getRhsState, getSelectedPostId, getSelectedChannelId, getPreviousRhsState, getIsRhsOpen} from 'selectors/rhs';
 import {RHSStates} from 'utils/constants.jsx';
 
 import SidebarRight from './sidebar_right.jsx';
@@ -35,6 +35,7 @@ function mapStateToProps(state) {
     }
 
     return {
+        isOpen: getIsRhsOpen(state),
         channel,
         currentUser: getCurrentUser(state),
         postRightVisible: Boolean(getSelectedPostId(state)),
diff --git a/components/sidebar_right/sidebar_right.jsx b/components/sidebar_right/sidebar_right.jsx
index 09cbbb21e33f..23b9b7a5d943 100644
--- a/components/sidebar_right/sidebar_right.jsx
+++ b/components/sidebar_right/sidebar_right.jsx
@@ -1,9 +1,9 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-import $ from 'jquery';
 import PropTypes from 'prop-types';
 import React from 'react';
+import classNames from 'classnames';
 
 import {trackEvent} from 'actions/diagnostics_actions.jsx';
 import {postListScrollChange} from 'actions/global_actions.jsx';
@@ -19,6 +19,7 @@ import SearchResults from 'components/search_results';
 
 export default class SidebarRight extends React.Component {
     static propTypes = {
+        isOpen: PropTypes.bool.isRequired,
         currentUser: PropTypes.object,
         channel: PropTypes.object,
         postRightVisible: PropTypes.bool,
@@ -47,7 +48,6 @@ export default class SidebarRight extends React.Component {
     componentDidMount() {
         PostStore.addPostPinnedChangeListener(this.onPostPinnedChange);
         PreferenceStore.addChangeListener(this.onPreferenceChange);
-        this.doStrangeThings();
     }
 
     componentWillUnmount() {
@@ -70,30 +70,8 @@ export default class SidebarRight extends React.Component {
         }
     }
 
-    doStrangeThings = () => {
-        // We should have a better way to do this stuff
-        // Hence the function name.
-        $('.app__body .inner-wrap').removeClass('.move--right');
-        $('.app__body .inner-wrap').addClass('move--left');
-        $('.app__body .sidebar--left').removeClass('move--right');
-        $('.multi-teams .team-sidebar').removeClass('move--right');
-        $('.app__body .sidebar--right').addClass('move--left');
-
-        if (!this.props.searchVisible && !this.props.postRightVisible) {
-            $('.app__body .inner-wrap').removeClass('move--left').removeClass('move--right');
-            $('.app__body .sidebar--right').removeClass('move--left');
-            return (
-                <div/>
-            );
-        }
-
-        return null;
-    }
-
     componentDidUpdate(prevProps) {
         const isOpen = this.props.searchVisible || this.props.postRightVisible;
-        WebrtcStore.emitRhsChanged(isOpen);
-        this.doStrangeThings();
 
         const wasOpen = prevProps.searchVisible || prevProps.postRightVisible;
 
@@ -197,7 +175,7 @@ export default class SidebarRight extends React.Component {
 
         return (
             <div
-                className={'sidebar--right ' + expandedClass}
+                className={classNames('sidebar--right', expandedClass, {'move--left': this.props.isOpen})}
                 id='sidebar-right'
             >
                 <div
diff --git a/components/sidebar_right_menu/index.js b/components/sidebar_right_menu/index.js
index 56225629e445..bfe935ec60a9 100644
--- a/components/sidebar_right_menu/index.js
+++ b/components/sidebar_right_menu/index.js
@@ -7,8 +7,8 @@ import {getConfig, getLicense} from 'mattermost-redux/selectors/entities/general
 import {getCurrentUserId} from 'mattermost-redux/selectors/entities/users';
 import {getInt} from 'mattermost-redux/selectors/entities/preferences';
 
-import {showMentions, showFlaggedPosts, closeRightHandSide} from 'actions/views/rhs';
-import {getRhsState} from 'selectors/rhs';
+import {showMentions, showFlaggedPosts, closeRightHandSide, openMenu as openRhsMenu, closeMenu as closeRhsMenu} from 'actions/views/rhs';
+import {getRhsState, getIsRhsMenuOpen} from 'selectors/rhs';
 import {RHSStates, Preferences, TutorialSteps} from 'utils/constants.jsx';
 import {isMobile} from 'utils/utils.jsx';
 
@@ -33,6 +33,7 @@ function mapStateToProps(state) {
     const siteName = config.SiteName;
 
     return {
+        isOpen: getIsRhsMenuOpen(state),
         isMentionSearch: rhsState === RHSStates.MENTION,
         showTutorialTip: enableTutorial && isMobile() && tutorialStep === TutorialSteps.MENU_POPOVER,
         isLicensed,
@@ -53,6 +54,8 @@ function mapDispatchToProps(dispatch) {
             showMentions,
             showFlaggedPosts,
             closeRightHandSide,
+            openRhsMenu,
+            closeRhsMenu,
         }, dispatch),
     };
 }
diff --git a/components/sidebar_right_menu/sidebar_right_menu.jsx b/components/sidebar_right_menu/sidebar_right_menu.jsx
index aa2a76b3a9f6..10abf8be3e41 100644
--- a/components/sidebar_right_menu/sidebar_right_menu.jsx
+++ b/components/sidebar_right_menu/sidebar_right_menu.jsx
@@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import {FormattedMessage} from 'react-intl';
 import {Link} from 'react-router-dom';
+import classNames from 'classnames';
 
 import * as GlobalActions from 'actions/global_actions.jsx';
 import PreferenceStore from 'stores/preference_store.jsx';
@@ -24,10 +25,11 @@ import LeaveTeamIcon from 'components/svg/leave_team_icon';
 import TeamMembersModal from 'components/team_members_modal';
 import ToggleModalButton from 'components/toggle_modal_button.jsx';
 import TeamSettingsModal from 'components/team_settings_modal.jsx';
-import {createMenuTip} from 'components/tutorial/tutorial_tip.jsx';
+import MenuTutorialTip from 'components/tutorial/menu_tutorial_tip';
 
 export default class SidebarRightMenu extends React.Component {
     static propTypes = {
+        isOpen: PropTypes.bool.isRequired,
         teamType: PropTypes.string,
         teamDisplayName: PropTypes.string,
         isMentionSearch: PropTypes.bool,
@@ -44,7 +46,9 @@ export default class SidebarRightMenu extends React.Component {
         actions: PropTypes.shape({
             showMentions: PropTypes.func,
             showFlaggedPosts: PropTypes.func,
-            closeRightHandSide: PropTypes.func,
+            closeRightHandSide: PropTypes.func.isRequired,
+            openRhsMenu: PropTypes.func.isRequired,
+            closeRhsMenu: PropTypes.func.isRequired,
         }),
     };
 
@@ -115,7 +119,7 @@ export default class SidebarRightMenu extends React.Component {
     getFlagged = (e) => {
         e.preventDefault();
         this.props.actions.showFlaggedPosts();
-        this.closeRightSidebar();
+        this.props.actions.closeRhsMenu();
     }
 
     getStateFromStores = () => {
@@ -136,38 +140,11 @@ export default class SidebarRightMenu extends React.Component {
         if (this.props.isMentionSearch) {
             this.props.actions.closeRightHandSide();
         } else {
-            this.closeRightSidebar();
+            this.props.actions.closeRhsMenu();
             this.props.actions.showMentions();
         }
     }
 
-    closeLeftSidebar = () => {
-        if (Utils.isMobile()) {
-            setTimeout(() => {
-                document.querySelector('.app__body .inner-wrap').classList.remove('move--right');
-                document.querySelector('.app__body .sidebar--left').classList.remove('move--right');
-            });
-        }
-    }
-
-    openRightSidebar = () => {
-        if (Utils.isMobile()) {
-            setTimeout(() => {
-                document.querySelector('.app__body .inner-wrap').classList.add('move--left-small');
-                document.querySelector('.app__body .sidebar--menu').classList.add('move--left');
-            });
-        }
-    }
-
-    closeRightSidebar = () => {
-        if (Utils.isMobile()) {
-            setTimeout(() => {
-                document.querySelector('.app__body .inner-wrap').classList.remove('move--left-small');
-                document.querySelector('.app__body .sidebar--menu').classList.remove('move--left');
-            });
-        }
-    }
-
     showAccountSettingsModal = () => {
         GlobalActions.showAccountSettingsModal();
     }
@@ -428,9 +405,8 @@ export default class SidebarRightMenu extends React.Component {
 
         let tutorialTip = null;
         if (this.props.showTutorialTip) {
-            tutorialTip = createMenuTip((e) => e.preventDefault(), true);
-            this.closeLeftSidebar();
-            this.openRightSidebar();
+            tutorialTip = <MenuTutorialTip onBottom={true}/>;
+            this.props.actions.openRhsMenu();
         }
 
         let nativeAppLink = null;
@@ -473,7 +449,7 @@ export default class SidebarRightMenu extends React.Component {
 
         return (
             <div
-                className='sidebar--menu'
+                className={classNames('sidebar--menu', {'move--left': this.props.isOpen && Utils.isMobile()})}
                 id='sidebar-menu'
             >
                 <div className='team__header theme'>
diff --git a/components/team_sidebar/index.js b/components/team_sidebar/index.js
index 790a75579672..cc0bc18ffaf2 100644
--- a/components/team_sidebar/index.js
+++ b/components/team_sidebar/index.js
@@ -7,6 +7,8 @@ import {getTeams} from 'mattermost-redux/actions/teams';
 import {withRouter} from 'react-router-dom';
 import {getConfig} from 'mattermost-redux/selectors/entities/general';
 
+import {getIsLhsOpen} from 'selectors/lhs';
+
 import TeamSidebar from './team_sidebar_controller.jsx';
 
 function mapStateToProps(state) {
@@ -16,6 +18,7 @@ function mapStateToProps(state) {
     const enableTeamCreation = config.EnableTeamCreation === 'true';
 
     return {
+        isOpen: getIsLhsOpen(state),
         experimentalPrimaryTeam,
         enableTeamCreation,
     };
diff --git a/components/team_sidebar/team_sidebar_controller.jsx b/components/team_sidebar/team_sidebar_controller.jsx
index d5e6e0849478..e4d1d37febd8 100644
--- a/components/team_sidebar/team_sidebar_controller.jsx
+++ b/components/team_sidebar/team_sidebar_controller.jsx
@@ -5,6 +5,7 @@ import $ from 'jquery';
 import PropTypes from 'prop-types';
 import React from 'react';
 import {FormattedMessage} from 'react-intl';
+import classNames from 'classnames';
 
 import TeamStore from 'stores/team_store.jsx';
 import UserStore from 'stores/user_store.jsx';
@@ -16,6 +17,7 @@ import TeamButton from './components/team_button.jsx';
 
 export default class TeamSidebar extends React.Component {
     static propTypes = {
+        isOpen: PropTypes.bool.isRequired,
         experimentalPrimaryTeam: PropTypes.string,
         enableTeamCreation: PropTypes.bool.isRequired,
         actions: PropTypes.shape({
@@ -176,7 +178,7 @@ export default class TeamSidebar extends React.Component {
         }
 
         return (
-            <div className='team-sidebar'>
+            <div className={classNames('team-sidebar', {'move--right': this.props.isOpen})}>
                 <div className='team-wrapper'>
                     {teams}
                 </div>
diff --git a/components/tutorial/menu_tutorial_tip.jsx b/components/tutorial/menu_tutorial_tip.jsx
new file mode 100644
index 000000000000..a28f6207924f
--- /dev/null
+++ b/components/tutorial/menu_tutorial_tip.jsx
@@ -0,0 +1,50 @@
+// Copyright (c) 2018-present Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+//
+import React from 'react';
+import PropTypes from 'prop-types';
+import {FormattedHTMLMessage} from 'react-intl';
+
+import TutorialTip from './tutorial_tip';
+
+const MenuTutorialTip = ({toggleFunc, onBottom}) => {
+    const screens = [];
+
+    screens.push(
+        <div>
+            <FormattedHTMLMessage
+                id='sidebar_header.tutorial'
+                defaultMessage='<h4>Main Menu</h4>
+                <p>The <strong>Main Menu</strong> is where you can <strong>Invite New Members</strong>, access your <strong>Account Settings</strong> and set your <strong>Theme Color</strong>.</p>
+                <p>Team administrators can also access their <strong>Team Settings</strong> from this menu.</p><p>System administrators will find a <strong>System Console</strong> option to administrate the entire system.</p>'
+            />
+        </div>
+    );
+
+    let placement = 'right';
+    let arrow = 'left';
+    if (onBottom) {
+        placement = 'bottom';
+        arrow = 'up';
+    }
+
+    return (
+        <div
+            onClick={toggleFunc}
+        >
+            <TutorialTip
+                placement={placement}
+                screens={screens}
+                overlayClass={'tip-overlay--header--' + arrow}
+                diagnosticsTag='tutorial_tip_3_main_menu'
+            />
+        </div>
+    );
+};
+
+MenuTutorialTip.propTypes = {
+    toggleFunc: PropTypes.func,
+    onBottom: PropTypes.bool.isRequired,
+};
+
+export default MenuTutorialTip;
diff --git a/components/tutorial/tutorial_tip/index.js b/components/tutorial/tutorial_tip/index.js
new file mode 100644
index 000000000000..48641b2f48e1
--- /dev/null
+++ b/components/tutorial/tutorial_tip/index.js
@@ -0,0 +1,16 @@
+import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
+
+import {closeMenu as closeRhsMenu} from 'actions/views/rhs';
+
+import TutorialTip from './tutorial_tip.jsx';
+
+function mapDispatchToProps(dispatch) {
+    return {
+        actions: bindActionCreators({
+            closeRhsMenu,
+        }, dispatch),
+    };
+}
+
+export default connect(null, mapDispatchToProps)(TutorialTip);
diff --git a/components/tutorial/tutorial_tip.jsx b/components/tutorial/tutorial_tip/tutorial_tip.jsx
similarity index 80%
rename from components/tutorial/tutorial_tip.jsx
rename to components/tutorial/tutorial_tip/tutorial_tip.jsx
index 55196accd5d8..4f0ccfaf2f31 100644
--- a/components/tutorial/tutorial_tip.jsx
+++ b/components/tutorial/tutorial_tip/tutorial_tip.jsx
@@ -4,14 +4,13 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import {Overlay} from 'react-bootstrap';
-import {FormattedHTMLMessage, FormattedMessage} from 'react-intl';
+import {FormattedMessage} from 'react-intl';
 
 import {trackEvent} from 'actions/diagnostics_actions.jsx';
 import {savePreference} from 'actions/user_actions.jsx';
 import PreferenceStore from 'stores/preference_store.jsx';
 import UserStore from 'stores/user_store.jsx';
 import Constants from 'utils/constants.jsx';
-import * as Utils from 'utils/utils.jsx';
 import tutorialGif from 'images/tutorialTip.gif';
 import tutorialGifWhite from 'images/tutorialTipWhite.gif';
 
@@ -55,7 +54,7 @@ export default class TutorialTip extends React.Component {
             trackEvent('tutorial', tag);
         }
 
-        this.closeRightSidebar();
+        this.props.actions.closeRhsMenu();
         this.hide();
 
         const step = PreferenceStore.getInt(Preferences.TUTORIAL_STEP, UserStore.getCurrentId(), 0);
@@ -66,15 +65,6 @@ export default class TutorialTip extends React.Component {
         );
     }
 
-    closeRightSidebar() {
-        if (Utils.isMobile()) {
-            setTimeout(() => {
-                document.querySelector('.app__body .inner-wrap').classList.remove('move--left-small');
-                document.querySelector('.app__body .sidebar--menu').classList.remove('move--left');
-            });
-        }
-    }
-
     skipTutorial = (e) => {
         e.preventDefault();
 
@@ -214,40 +204,7 @@ TutorialTip.propTypes = {
     placement: PropTypes.string.isRequired,
     overlayClass: PropTypes.string,
     diagnosticsTag: PropTypes.string,
+    actions: PropTypes.shape({
+        closeRhsMenu: PropTypes.func.isRequired,
+    }),
 };
-
-export function createMenuTip(toggleFunc, onBottom) {
-    const screens = [];
-
-    screens.push(
-        <div>
-            <FormattedHTMLMessage
-                id='sidebar_header.tutorial'
-                defaultMessage='<h4>Main Menu</h4>
-                <p>The <strong>Main Menu</strong> is where you can <strong>Invite New Members</strong>, access your <strong>Account Settings</strong> and set your <strong>Theme Color</strong>.</p>
-                <p>Team administrators can also access their <strong>Team Settings</strong> from this menu.</p><p>System administrators will find a <strong>System Console</strong> option to administrate the entire system.</p>'
-            />
-        </div>
-    );
-
-    let placement = 'right';
-    let arrow = 'left';
-    if (onBottom) {
-        placement = 'bottom';
-        arrow = 'up';
-    }
-
-    return (
-        <div
-            onClick={toggleFunc}
-        >
-            <TutorialTip
-                ref='tip'
-                placement={placement}
-                screens={screens}
-                overlayClass={'tip-overlay--header--' + arrow}
-                diagnosticsTag='tutorial_tip_3_main_menu'
-            />
-        </div>
-    );
-}
diff --git a/components/webrtc/controller/index.js b/components/webrtc/controller/index.js
index f95bda1a88a7..34cb0ef9e53c 100644
--- a/components/webrtc/controller/index.js
+++ b/components/webrtc/controller/index.js
@@ -2,8 +2,11 @@
 // See License.txt for license information.
 
 import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
 import {getConfig} from 'mattermost-redux/selectors/entities/general';
 
+import {closeRightHandSide as closeRhs} from 'actions/views/rhs';
+
 import WebrtcController from './webrtc_controller.jsx';
 
 function mapStateToProps(state) {
@@ -15,4 +18,12 @@ function mapStateToProps(state) {
     };
 }
 
-export default connect(mapStateToProps)(WebrtcController);
+function mapDispatchToProps(dispatch) {
+    return {
+        actions: bindActionCreators({
+            closeRhs,
+        }, dispatch),
+    };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(WebrtcController);
diff --git a/components/webrtc/controller/webrtc_controller.jsx b/components/webrtc/controller/webrtc_controller.jsx
index 26e1767bc145..ac02166edf77 100644
--- a/components/webrtc/controller/webrtc_controller.jsx
+++ b/components/webrtc/controller/webrtc_controller.jsx
@@ -768,7 +768,7 @@ export default class WebrtcController extends React.Component {
         }
 
         WebrtcStore.setVideoCallWith(null);
-        WebrtcStore.emitRhsChanged(false);
+        this.props.actions.closeRhs();
 
         if (manual) {
             return this.close();
@@ -1240,4 +1240,7 @@ WebrtcController.propTypes = {
     expanded: PropTypes.bool.isRequired,
     toggleSize: PropTypes.func,
     enableDeveloper: PropTypes.bool.isRequired,
+    actions: PropTypes.shape({
+        closeRhs: PropTypes.func.isRequired,
+    }).isRequired,
 };
diff --git a/components/webrtc/notification/index.js b/components/webrtc/notification/index.js
new file mode 100644
index 000000000000..7b0d4f7f52d2
--- /dev/null
+++ b/components/webrtc/notification/index.js
@@ -0,0 +1,26 @@
+// Copyright (c) 2017 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
+
+import {closeRightHandSide as closeRhs} from 'actions/views/rhs';
+import {getIsRhsOpen} from 'selectors/rhs';
+
+import WebrtcNotification from './webrtc_notification';
+
+function mapStateToProps(state) {
+    return {
+        isRhsOpen: getIsRhsOpen(state),
+    };
+}
+
+function mapDispatchToProps(dispatch) {
+    return {
+        actions: bindActionCreators({
+            closeRhs,
+        }, dispatch),
+    };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(WebrtcNotification);
diff --git a/components/webrtc/webrtc_notification.jsx b/components/webrtc/notification/webrtc_notification.jsx
similarity index 95%
rename from components/webrtc/webrtc_notification.jsx
rename to components/webrtc/notification/webrtc_notification.jsx
index 036ef567e2dd..f5fe71736208 100644
--- a/components/webrtc/webrtc_notification.jsx
+++ b/components/webrtc/notification/webrtc_notification.jsx
@@ -1,8 +1,8 @@
 // Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-import $ from 'jquery';
 import React from 'react';
+import PropTypes from 'prop-types';
 import {FormattedMessage} from 'react-intl';
 
 import * as GlobalActions from 'actions/global_actions.jsx';
@@ -17,6 +17,13 @@ import ring from 'images/ring.mp3';
 const PreReleaseFeatures = Constants.PRE_RELEASE_FEATURES;
 
 export default class WebrtcNotification extends React.Component {
+    static propTypes = {
+        isRhsOpen: PropTypes.bool.isRequired,
+        actions: PropTypes.shape({
+            closeRhs: PropTypes.func.isRequired,
+        }).isRequired,
+    }
+
     constructor() {
         super();
 
@@ -25,30 +32,25 @@ export default class WebrtcNotification extends React.Component {
         this.closeNotification = this.closeNotification.bind(this);
         this.onIncomingCall = this.onIncomingCall.bind(this);
         this.onCancelCall = this.onCancelCall.bind(this);
-        this.onRhs = this.onRhs.bind(this);
         this.handleClose = this.handleClose.bind(this);
         this.handleAnswer = this.handleAnswer.bind(this);
         this.handleTimeout = this.handleTimeout.bind(this);
         this.stopRinging = this.stopRinging.bind(this);
-        this.closeRightHandSide = this.closeRightHandSide.bind(this);
 
         this.state = {
             userCalling: null,
-            rhsOpened: false,
         };
     }
 
     componentDidMount() {
         WebrtcStore.addNotifyListener(this.onIncomingCall);
         WebrtcStore.addChangedListener(this.onCancelCall);
-        WebrtcStore.addRhsChangedListener(this.onRhs);
         this.mounted = true;
     }
 
     componentWillUnmount() {
         WebrtcStore.removeNotifyListener(this.onIncomingCall);
         WebrtcStore.removeChangedListener(this.onCancelCall);
-        WebrtcStore.removeRhsChangedListener(this.onRhs);
         if (this.refs.ring) {
             this.refs.ring.removeListener('ended', this.handleTimeout);
         }
@@ -75,12 +77,10 @@ export default class WebrtcNotification extends React.Component {
         this.setState({userCalling: null});
     }
 
-    closeRightHandSide(e) {
+    closeRightHandSide = (e) => {
         e.preventDefault();
         GlobalActions.emitCloseRightHandSide();
-        setTimeout(() => {
-            $('.app__body .inner-wrap').addClass('move--left');
-        }, 0);
+        this.props.actions.closeRhs();
     }
 
     onIncomingCall(incoming) {
@@ -140,10 +140,6 @@ export default class WebrtcNotification extends React.Component {
         this.closeNotification();
     }
 
-    onRhs(rhsOpened) {
-        this.setState({rhsOpened});
-    }
-
     handleTimeout() {
         WebSocketClient.sendMessage('webrtc', {
             action: WebrtcActionTypes.NO_ANSWER,
@@ -320,7 +316,7 @@ export default class WebrtcNotification extends React.Component {
                     {msg}
                 </div>
             );
-        } else if (this.state.rhsOpened && WebrtcStore.isBusy()) {
+        } else if (this.props.isRhsOpen && WebrtcStore.isBusy()) {
             return (
                 <div
                     className='webrtc__notification--rhs'
diff --git a/components/webrtc/sidebar/index.js b/components/webrtc/sidebar/index.js
new file mode 100644
index 000000000000..debf1fd4208c
--- /dev/null
+++ b/components/webrtc/sidebar/index.js
@@ -0,0 +1,18 @@
+// Copyright (c) 2017 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import {connect} from 'react-redux';
+import {getCurrentUser} from 'mattermost-redux/selectors/entities/users';
+
+import {getIsWebrtcOpen} from 'selectors/webrtc';
+
+import WebrtcSidebar from './webrtc_sidebar';
+
+function mapStateToProps(state) {
+    return {
+        isOpen: getIsWebrtcOpen(state),
+        currentUser: getCurrentUser(state),
+    };
+}
+
+export default connect(mapStateToProps)(WebrtcSidebar);
diff --git a/components/webrtc/sidebar/webrtc_sidebar.jsx b/components/webrtc/sidebar/webrtc_sidebar.jsx
new file mode 100644
index 000000000000..775c9b7c02ac
--- /dev/null
+++ b/components/webrtc/sidebar/webrtc_sidebar.jsx
@@ -0,0 +1,96 @@
+// Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import React from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+import WebrtcStore from 'stores/webrtc_store.jsx';
+
+import WebrtcController from '../controller';
+
+export default class WebrtcSidebar extends React.Component {
+    static propTypes = {
+        currentUser: PropTypes.object,
+        isOpen: PropTypes.bool.isRequired,
+    }
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            expanded: false,
+            videoCallVisible: false,
+            isCaller: false,
+            userId: null,
+        };
+    }
+
+    componentDidMount() {
+        WebrtcStore.addInitListener(this.onInitializeVideoCall);
+    }
+
+    componentWillUnmount() {
+        WebrtcStore.removeInitListener(this.onInitializeVideoCall);
+    }
+
+    onShrink = () => {
+        this.setState({expanded: false});
+    }
+
+    toggleSize = (e) => {
+        if (e) {
+            e.preventDefault();
+        }
+        this.setState((prevState) => {
+            return {expanded: !prevState.expanded};
+        });
+    }
+
+    onInitializeVideoCall = (userId, isCaller) => {
+        let expanded = this.state.expanded;
+        if (userId === null) {
+            expanded = false;
+        }
+        this.setState({
+            videoCallVisible: (userId !== null),
+            isCaller,
+            userId,
+            expanded,
+        });
+    }
+
+    render() {
+        let content = null;
+
+        if (this.state.videoCallVisible) {
+            content = (
+                <WebrtcController
+                    currentUser={this.state.currentUser}
+                    userId={this.state.userId}
+                    isCaller={this.state.isCaller}
+                    expanded={this.state.expanded}
+                    toggleSize={this.toggleSize}
+                />
+            );
+        }
+
+        return (
+            <div
+                className={classNames('sidebar--right', 'webrtc', {
+                    'webrtc--show': this.props.isOpen,
+                    'sidebar--right--expanded': this.state.expanded,
+                    'move--left': this.props.isOpen,
+                })}
+            >
+                <div
+                    onClick={this.onShrink}
+                    className='sidebar--right__bg'
+                />
+                <div className='sidebar-right-container'>
+                    {content}
+                </div>
+            </div>
+        );
+    }
+}
diff --git a/components/webrtc/webrtc_sidebar.jsx b/components/webrtc/webrtc_sidebar.jsx
deleted file mode 100644
index fe1ef436f24b..000000000000
--- a/components/webrtc/webrtc_sidebar.jsx
+++ /dev/null
@@ -1,128 +0,0 @@
-// Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
-// See License.txt for license information.
-
-import $ from 'jquery';
-import React from 'react';
-
-import UserStore from 'stores/user_store.jsx';
-import WebrtcStore from 'stores/webrtc_store.jsx';
-import * as Utils from 'utils/utils.jsx';
-
-import WebrtcController from './controller';
-
-export default class SidebarRight extends React.Component {
-    constructor(props) {
-        super(props);
-
-        this.onShrink = this.onShrink.bind(this);
-        this.toggleSize = this.toggleSize.bind(this);
-        this.onInitializeVideoCall = this.onInitializeVideoCall.bind(this);
-
-        this.state = {
-            expanded: false,
-            currentUser: UserStore.getCurrentUser(),
-            videoCallVisible: false,
-            isCaller: false,
-            videoCallWithUserId: null,
-        };
-    }
-
-    componentDidMount() {
-        WebrtcStore.addInitListener(this.onInitializeVideoCall);
-        this.doStrangeThings();
-    }
-
-    componentWillUnmount() {
-        WebrtcStore.removeInitListener(this.onInitializeVideoCall);
-    }
-
-    shouldComponentUpdate(nextProps, nextState) {
-        return !Utils.areObjectsEqual(nextState, this.state);
-    }
-
-    doStrangeThings = () => {
-        // We should have a better way to do this stuff
-        // Hence the function name.
-        $('.app__body .inner-wrap').removeClass('move--right');
-        $('.app__body .inner-wrap').addClass('webrtc--show move--left');
-        $('.app__body .sidebar--left').removeClass('move--right');
-        $('.multi-teams .team-sidebar').removeClass('move--right');
-        $('.app__body .webrtc').addClass('webrtc--show');
-
-        //$('.sidebar--right').prepend('<div class="sidebar__overlay"></div>');
-        if (!this.state.videoCallVisible) {
-            $('.app__body .inner-wrap').removeClass('webrtc--show move--left move--right');
-            $('.app__body .webrtc').removeClass('webrtc--show');
-            return (
-                <div/>
-            );
-        }
-        return null;
-    }
-
-    componentDidUpdate() {
-        this.doStrangeThings();
-    }
-
-    onShrink() {
-        this.setState({expanded: false});
-    }
-
-    toggleSize(e) {
-        if (e) {
-            e.preventDefault();
-        }
-        this.setState((prevState) => {
-            return {expanded: !prevState.expanded};
-        });
-    }
-
-    onInitializeVideoCall(userId, isCaller) {
-        let expanded = this.state.expanded;
-        if (userId === null) {
-            expanded = false;
-        }
-        this.setState({
-            videoCallVisible: (userId !== null),
-            isCaller,
-            videoCallWithUserId: userId,
-            expanded,
-        });
-    }
-
-    render() {
-        let content = null;
-        let expandedClass = '';
-
-        if (this.state.expanded) {
-            expandedClass = 'sidebar--right--expanded';
-        }
-
-        if (this.state.videoCallVisible) {
-            content = (
-                <WebrtcController
-                    currentUser={this.state.currentUser}
-                    userId={this.state.videoCallWithUserId}
-                    isCaller={this.state.isCaller}
-                    expanded={this.state.expanded}
-                    toggleSize={this.toggleSize}
-                />
-            );
-        }
-
-        return (
-            <div
-                className={'sidebar--right webrtc ' + expandedClass}
-                id='sidebar-webrtc'
-            >
-                <div
-                    onClick={this.onShrink}
-                    className='sidebar--right__bg'
-                />
-                <div className='sidebar-right-container'>
-                    {content}
-                </div>
-            </div>
-        );
-    }
-}
diff --git a/reducers/views/index.js b/reducers/views/index.js
index 5f8db20e3b44..438727328a05 100644
--- a/reducers/views/index.js
+++ b/reducers/views/index.js
@@ -9,6 +9,8 @@ import rhs from './rhs';
 import posts from './posts';
 import modals from './modals';
 import emoji from './emoji';
+import lhs from './lhs';
+import webrtc from './webrtc';
 
 export default combineReducers({
     admin,
@@ -17,4 +19,6 @@ export default combineReducers({
     posts,
     modals,
     emoji,
+    lhs,
+    webrtc,
 });
diff --git a/reducers/views/lhs.js b/reducers/views/lhs.js
new file mode 100644
index 000000000000..9dc6f55e4bea
--- /dev/null
+++ b/reducers/views/lhs.js
@@ -0,0 +1,30 @@
+// Copyright (c) 2018-present Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import {combineReducers} from 'redux';
+import {TeamTypes} from 'mattermost-redux/action_types';
+
+import {ActionTypes} from 'utils/constants.jsx';
+
+function isOpen(state = false, action) {
+    switch (action.type) {
+    case ActionTypes.TOGGLE_LHS:
+        return !state;
+    case ActionTypes.OPEN_LHS:
+        return true;
+    case ActionTypes.CLOSE_LHS:
+        return false;
+    case ActionTypes.TOGGLE_RHS_MENU:
+        return false;
+    case ActionTypes.OPEN_RHS_MENU:
+        return false;
+    case TeamTypes.SELECT_TEAM:
+        return false;
+    default:
+        return state;
+    }
+}
+
+export default combineReducers({
+    isOpen,
+});
diff --git a/reducers/views/rhs.js b/reducers/views/rhs.js
index f4ce256b98f8..21e4d4c764f0 100644
--- a/reducers/views/rhs.js
+++ b/reducers/views/rhs.js
@@ -2,7 +2,7 @@
 // See License.txt for license information.
 
 import {combineReducers} from 'redux';
-import {PostTypes, SearchTypes} from 'mattermost-redux/action_types';
+import {PostTypes, SearchTypes, TeamTypes} from 'mattermost-redux/action_types';
 
 import {ActionTypes, RHSStates} from 'utils/constants.jsx';
 
@@ -104,6 +104,46 @@ function isSearchingPinnedPost(state = false, action) {
     }
 }
 
+function isSidebarOpen(state = false, action) {
+    switch (action.type) {
+    case ActionTypes.UPDATE_RHS_STATE:
+        return Boolean(action.state);
+    case ActionTypes.SELECT_POST:
+        return Boolean(action.postId);
+    case ActionTypes.TOGGLE_RHS_MENU:
+        return false;
+    case ActionTypes.OPEN_RHS_MENU:
+        return false;
+    case ActionTypes.TOGGLE_LHS:
+        return false;
+    case ActionTypes.OPEN_LHS:
+        return false;
+    case TeamTypes.SELECT_TEAM:
+        return false;
+    default:
+        return state;
+    }
+}
+
+function isMenuOpen(state = false, action) {
+    switch (action.type) {
+    case ActionTypes.TOGGLE_RHS_MENU:
+        return !state;
+    case ActionTypes.OPEN_RHS_MENU:
+        return true;
+    case ActionTypes.CLOSE_RHS_MENU:
+        return false;
+    case ActionTypes.TOGGLE_LHS:
+        return false;
+    case ActionTypes.OPEN_LHS:
+        return false;
+    case TeamTypes.SELECT_TEAM:
+        return false;
+    default:
+        return state;
+    }
+}
+
 export default combineReducers({
     selectedPostId,
     selectedChannelId,
@@ -113,4 +153,6 @@ export default combineReducers({
     isSearchingTerm,
     isSearchingFlaggedPost,
     isSearchingPinnedPost,
+    isSidebarOpen,
+    isMenuOpen,
 });
diff --git a/reducers/views/webrtc.js b/reducers/views/webrtc.js
new file mode 100644
index 000000000000..0690ff0a588f
--- /dev/null
+++ b/reducers/views/webrtc.js
@@ -0,0 +1,30 @@
+// Copyright (c) 2018-present Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import {combineReducers} from 'redux';
+import {TeamTypes} from 'mattermost-redux/action_types';
+
+import {ActionTypes} from 'utils/constants.jsx';
+
+function isOpen(state = false, action) {
+    switch (action.type) {
+    case ActionTypes.INIT_WEBRTC:
+        return Boolean(action.userId);
+    case ActionTypes.CLOSE_WEBRTC:
+        return false;
+    case ActionTypes.CLOSE_RHS:
+        return false;
+    case ActionTypes.TOGGLE_LHS:
+        return false;
+    case ActionTypes.OPEN_LHS:
+        return false;
+    case TeamTypes.SELECT_TEAM:
+        return false;
+    default:
+        return state;
+    }
+}
+
+export default combineReducers({
+    isOpen,
+});
diff --git a/selectors/lhs.jsx b/selectors/lhs.jsx
new file mode 100644
index 000000000000..f09a04a195ea
--- /dev/null
+++ b/selectors/lhs.jsx
@@ -0,0 +1,6 @@
+// Copyright (c) 2018 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+export function getIsLhsOpen(state) {
+    return state.views.lhs.isOpen;
+}
diff --git a/selectors/rhs.jsx b/selectors/rhs.jsx
index 3476d334980a..5ead3c08644a 100644
--- a/selectors/rhs.jsx
+++ b/selectors/rhs.jsx
@@ -97,3 +97,11 @@ export function makeGetPostsEmbedVisibleObj() {
         }
     );
 }
+
+export function getIsRhsOpen(state) {
+    return state.views.rhs.isSidebarOpen;
+}
+
+export function getIsRhsMenuOpen(state) {
+    return state.views.rhs.isMenuOpen;
+}
diff --git a/selectors/webrtc.jsx b/selectors/webrtc.jsx
new file mode 100644
index 000000000000..e5e17859fd29
--- /dev/null
+++ b/selectors/webrtc.jsx
@@ -0,0 +1,6 @@
+// Copyright (c) 2018 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+export function getIsWebrtcOpen(state) {
+    return state.views.webrtc.isOpen;
+}
diff --git a/stores/webrtc_store.jsx b/stores/webrtc_store.jsx
index 571a321a111b..25e7c0175d29 100644
--- a/stores/webrtc_store.jsx
+++ b/stores/webrtc_store.jsx
@@ -5,6 +5,10 @@ import EventEmitter from 'events';
 
 import AppDispatcher from 'dispatcher/app_dispatcher.jsx';
 import {WebrtcActionTypes} from 'utils/constants.jsx';
+import {initWebrtc} from 'actions/views/webrtc';
+import store from 'stores/redux_store.jsx';
+
+const dispatch = store.dispatch;
 
 class WebrtcStoreClass extends EventEmitter {
     constructor() {
@@ -28,6 +32,7 @@ class WebrtcStoreClass extends EventEmitter {
 
     emitInit(userId, isCaller) {
         this.emit(WebrtcActionTypes.INITIALIZE, userId, isCaller);
+        dispatch(initWebrtc(userId, isCaller));
     }
 
     addInitListener(callback) {
@@ -73,18 +78,6 @@ class WebrtcStoreClass extends EventEmitter {
     removeChangedListener(callback) {
         this.removeListener(WebrtcActionTypes.CHANGED, callback);
     }
-
-    emitRhsChanged(isOpen) {
-        this.emit(WebrtcActionTypes.RHS, isOpen);
-    }
-
-    addRhsChangedListener(callback) {
-        this.on(WebrtcActionTypes.RHS, callback);
-    }
-
-    removeRhsChangedListener(callback) {
-        this.removeListener(WebrtcActionTypes.RHS, callback);
-    }
 }
 
 var WebrtcStore = new WebrtcStoreClass();
diff --git a/tests/components/create_post/__snapshots__/create_post.test.jsx.snap b/tests/components/create_post/__snapshots__/create_post.test.jsx.snap
index de9b6d6b69f1..332b875fca61 100644
--- a/tests/components/create_post/__snapshots__/create_post.test.jsx.snap
+++ b/tests/components/create_post/__snapshots__/create_post.test.jsx.snap
@@ -1,5 +1,146 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`components/create_post Show tutorial 1`] = `
+<form
+  className=""
+  id="create_post"
+  onSubmit={[Function]}
+  role="form"
+>
+  <div
+    className="post-create"
+  >
+    <div
+      className="post-create-body"
+    >
+      <div
+        className="post-body__cell"
+      >
+        <Textbox
+          channelId="owsyt8n43jfxjpzh9np93mx1wa"
+          characterLimit={4000}
+          createMessage="Write a message..."
+          disabled={false}
+          emojiEnabled={true}
+          handlePostError={[Function]}
+          id="post_textbox"
+          isRHS={false}
+          onBlur={[Function]}
+          onChange={[Function]}
+          onKeyDown={[Function]}
+          onKeyPress={[Function]}
+          popoverMentionKeyClick={true}
+          supportsCommands={true}
+          value=""
+        />
+        <span
+          className="post-body__actions"
+        >
+          <Connect(FileUpload)
+            fileCount={0}
+            getTarget={[Function]}
+            onFileUpload={[Function]}
+            onFileUploadChange={[Function]}
+            onUploadError={[Function]}
+            onUploadStart={[Function]}
+            postType="post"
+          />
+          <span
+            className="emoji-picker__container"
+          >
+            <EmojiPickerOverlay
+              onEmojiClick={[Function]}
+              onHide={[Function]}
+              rightOffset={15}
+              show={false}
+              spaceRequiredAbove={422}
+              spaceRequiredBelow={436}
+              target={[Function]}
+              topOffset={-7}
+            />
+            <EmojiIcon
+              className="icon icon--emoji "
+              id="emojiPickerButton"
+              onClick={[Function]}
+            />
+          </span>
+          <a
+            className="send-button theme disabled"
+            onClick={[Function]}
+          >
+            <i
+              className="fa fa-paper-plane"
+            />
+          </a>
+        </span>
+      </div>
+      <Connect(TutorialTip)
+        diagnosticsTag="tutorial_tip_1_sending_messages"
+        id="postTextboxTipMessage"
+        overlayClass="tip-overlay--chat"
+        placement="top"
+        screens={
+          Array [
+            <div>
+              <FormattedHTMLMessage
+                defaultMessage="<h4>Sending Messages</h4><p>Type here to write a message and press <strong>Enter</strong> to post it.</p><p>Click the <strong>Attachment</strong> button to upload an image or a file.</p>"
+                id="create_post.tutorialTip"
+                values={Object {}}
+              />
+            </div>,
+          ]
+        }
+      />
+    </div>
+    <div
+      className="post-create-footer"
+      id="postCreateFooter"
+    >
+      <Connect(MsgTyping)
+        channelId="owsyt8n43jfxjpzh9np93mx1wa"
+        postId=""
+      />
+    </div>
+  </div>
+  <PostDeletedModal
+    onHide={[Function]}
+    show={false}
+  />
+  <ConfirmModal
+    confirmButtonClass="btn btn-primary"
+    confirmButtonText={
+      <FormattedMessage
+        defaultMessage="Confirm"
+        id="notify_all.confirm"
+        values={Object {}}
+      />
+    }
+    message={
+      <FormattedMessage
+        defaultMessage="By using @all or @channel you are about to send notifications to {totalMembers} people. Are you sure you want to do this?"
+        id="notify_all.question"
+        values={
+          Object {
+            "totalMembers": 8,
+          }
+        }
+      />
+    }
+    modalClass=""
+    onCancel={[Function]}
+    onConfirm={[Function]}
+    show={false}
+    title={
+      <FormattedMessage
+        defaultMessage="Confirm sending notifications to entire channel"
+        id="notify_all.title.confirm"
+        values={Object {}}
+      />
+    }
+  />
+</form>
+`;
+
 exports[`components/create_post should match snapshot for center textbox 1`] = `
 <form
   className="center"
diff --git a/tests/components/create_post/create_post.test.jsx b/tests/components/create_post/create_post.test.jsx
index 228e042836dc..98412c79b05c 100644
--- a/tests/components/create_post/create_post.test.jsx
+++ b/tests/components/create_post/create_post.test.jsx
@@ -606,7 +606,7 @@ describe('components/create_post', () => {
         const wrapper = shallow(createPost({
             showTutorialTip: true,
         }));
-        expect(wrapper.find('TutorialTip').length).toBe(1);
+        expect(wrapper).toMatchSnapshot();
     });
 
     it('Toggle showPostDeletedModal state', () => {
diff --git a/tests/components/sidebar/__snapshots__/sidebar_tutorial_tip.test.jsx.snap b/tests/components/sidebar/__snapshots__/sidebar_tutorial_tip.test.jsx.snap
index 916ac88dc156..861c67ed021d 100644
--- a/tests/components/sidebar/__snapshots__/sidebar_tutorial_tip.test.jsx.snap
+++ b/tests/components/sidebar/__snapshots__/sidebar_tutorial_tip.test.jsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`component/sidebar/SidebarTutorialTip should match snapshot, with townSquare and with offTopic 1`] = `
-<TutorialTip
+<Connect(TutorialTip)
   diagnosticsTag="tutorial_tip_2_channels"
   overlayClass="tip-overlay--sidebar"
   placement="right"
@@ -39,7 +39,7 @@ exports[`component/sidebar/SidebarTutorialTip should match snapshot, with townSq
 `;
 
 exports[`component/sidebar/SidebarTutorialTip should match snapshot, with townSquare and without offTopic 1`] = `
-<TutorialTip
+<Connect(TutorialTip)
   diagnosticsTag="tutorial_tip_2_channels"
   overlayClass="tip-overlay--sidebar"
   placement="right"
@@ -77,7 +77,7 @@ exports[`component/sidebar/SidebarTutorialTip should match snapshot, with townSq
 `;
 
 exports[`component/sidebar/SidebarTutorialTip should match snapshot, without townSquare and with offTopic 1`] = `
-<TutorialTip
+<Connect(TutorialTip)
   diagnosticsTag="tutorial_tip_2_channels"
   overlayClass="tip-overlay--sidebar"
   placement="right"
@@ -115,7 +115,7 @@ exports[`component/sidebar/SidebarTutorialTip should match snapshot, without tow
 `;
 
 exports[`component/sidebar/SidebarTutorialTip should match snapshot, without townSquare and without offTopic 1`] = `
-<TutorialTip
+<Connect(TutorialTip)
   diagnosticsTag="tutorial_tip_2_channels"
   overlayClass="tip-overlay--sidebar"
   placement="right"
diff --git a/tests/components/sidebar/sidebar_channel.test.jsx b/tests/components/sidebar/sidebar_channel.test.jsx
index 76bd55ab7b7d..3c08db0906f3 100644
--- a/tests/components/sidebar/sidebar_channel.test.jsx
+++ b/tests/components/sidebar/sidebar_channel.test.jsx
@@ -64,14 +64,21 @@ describe('component/sidebar/sidebar_channel/SidebarChannel', () => {
         actions: {
             savePreferences: jest.fn(),
             leaveChannel: jest.fn(),
+            openLhs: jest.fn(),
         },
     };
 
+    beforeEach(() => {
+        defaultProps.actions.openLhs = jest.fn();
+    });
+
     test('should match snapshot, on channel show', () => {
+        const props = defaultProps;
         const wrapper = shallow(
-            <SidebarChannel {...defaultProps}/>
+            <SidebarChannel {...props}/>
         );
         expect(wrapper).toMatchSnapshot();
+        expect(props.actions.openLhs).not.toBeCalled();
     });
 
     test('should match snapshot, on fake channel show', () => {
@@ -83,367 +90,331 @@ describe('component/sidebar/sidebar_channel/SidebarChannel', () => {
             status: 'test',
             fake: true,
         };
-        const wrapper = shallow(
-            <SidebarChannel
-                {...{
-                    ...defaultProps,
-                    channelDisplayName: channel.display_name,
-                    channelName: channel.name,
-                    channelType: channel.type,
-                    channelId: channel.id,
-                    channelStatus: channel.status,
-                    channelFake: true,
-                    channelStringified: JSON.stringify(channel),
-                }}
-            />
-        );
+        const props = {
+            ...defaultProps,
+            channelDisplayName: channel.display_name,
+            channelName: channel.name,
+            channelType: channel.type,
+            channelId: channel.id,
+            channelStatus: channel.status,
+            channelFake: true,
+            channelStringified: JSON.stringify(channel),
+        };
+
+        const wrapper = shallow(<SidebarChannel {...props}/>);
         expect(wrapper).toMatchSnapshot();
+        expect(props.actions.openLhs).not.toBeCalled();
     });
 
     test('should match snapshot, on active channel show', () => {
-        const wrapper = shallow(
-            <SidebarChannel
-                {...{
-                    ...defaultProps,
-                    active: true,
-                }}
-            />
-        );
+        const props = {
+            ...defaultProps,
+            active: true,
+        };
+        const wrapper = shallow(<SidebarChannel {...props}/>);
         expect(wrapper).toMatchSnapshot();
+        expect(props.actions.openLhs).not.toBeCalled();
     });
 
     test('should match snapshot, on myself channel show', () => {
-        const wrapper = shallow(
-            <SidebarChannel
-                {...{
-                    ...defaultProps,
-                    currentUserId: 'myself',
-                    channelTeammateId: 'myself',
-                }}
-            />
-        );
+        const props = {
+            ...defaultProps,
+            currentUserId: 'myself',
+            channelTeammateId: 'myself',
+        };
+        const wrapper = shallow(<SidebarChannel {...props}/>);
         expect(wrapper).toMatchSnapshot();
+        expect(props.actions.openLhs).not.toBeCalled();
     });
 
     test('should match snapshot, on channel show with tutorial tip', () => {
-        const wrapper = shallow(
-            <SidebarChannel
-                {...{
-                    ...defaultProps,
-                    showTutorialTip: true,
-                    channelId: 'test',
-                    channelName: Constants.DEFAULT_CHANNEL,
-                    channelType: Constants.OPEN_CHANNEL,
-                    channelDisplayName: 'Town Square',
-                }}
-            />
-        );
+        const props = {
+            ...defaultProps,
+            showTutorialTip: true,
+            channelId: 'test',
+            channelName: Constants.DEFAULT_CHANNEL,
+            channelType: Constants.OPEN_CHANNEL,
+            channelDisplayName: 'Town Square',
+        };
+        const wrapper = shallow(<SidebarChannel {...props}/>);
         expect(wrapper).toMatchSnapshot();
+        expect(props.actions.openLhs).toBeCalled();
     });
 
     test('should match snapshot, on channel show with unread mentions (must have mentions badge)', () => {
-        const wrapper = shallow(
-            <SidebarChannel
-                {...{
-                    ...defaultProps,
-                    membership: {mention_count: 3},
-                    unreadMentions: 4,
-                }}
-            />
-        );
+        const props = {
+            ...defaultProps,
+            membership: {mention_count: 3},
+            unreadMentions: 4,
+        };
+        const wrapper = shallow(<SidebarChannel {...props}/>);
         expect(wrapper).toMatchSnapshot();
+        expect(props.actions.openLhs).not.toBeCalled();
     });
 
     test('should match snapshot, on channel show without unread mentions (must have no badge)', () => {
-        const wrapper = shallow(
-            <SidebarChannel
-                {...{
-                    ...defaultProps,
-                    membership: {mention_count: 3},
-                    unreadMentions: 0,
-                }}
-            />
-        );
+        const props = {
+            ...defaultProps,
+            membership: {mention_count: 3},
+            unreadMentions: 0,
+        };
+        const wrapper = shallow(<SidebarChannel {...props}/>);
         expect(wrapper).toMatchSnapshot();
+        expect(props.actions.openLhs).not.toBeCalled();
     });
 
     test('should match snapshot, on public channel show', () => {
-        const wrapper = shallow(
-            <SidebarChannel
-                {...{
-                    ...defaultProps,
-                    channelDisplayName: 'Channel display name',
-                    channelName: 'channel-name',
-                    channelType: Constants.OPEN_CHANNEL,
-                    channelId: 'test-channel-id',
-                    channelStatus: 'test',
-                    channelFake: false,
-                }}
-            />
-        );
+        const props = {
+            ...defaultProps,
+            channelDisplayName: 'Channel display name',
+            channelName: 'channel-name',
+            channelType: Constants.OPEN_CHANNEL,
+            channelId: 'test-channel-id',
+            channelStatus: 'test',
+            channelFake: false,
+        };
+        const wrapper = shallow(<SidebarChannel {...props}/>);
         expect(wrapper).toMatchSnapshot();
+        expect(props.actions.openLhs).not.toBeCalled();
     });
 
     test('should match snapshot, on private channel show', () => {
-        const wrapper = shallow(
-            <SidebarChannel
-                {...{
-                    ...defaultProps,
-                    channelDisplayName: 'Channel display name',
-                    channelName: 'channel-name',
-                    channelType: Constants.PRIVATE_CHANNEL,
-                    channelId: 'test-channel-id',
-                    channelStatus: 'test',
-                    channelFake: false,
-                }}
-            />
-        );
+        const props = {
+            ...defaultProps,
+            channelDisplayName: 'Channel display name',
+            channelName: 'channel-name',
+            channelType: Constants.PRIVATE_CHANNEL,
+            channelId: 'test-channel-id',
+            channelStatus: 'test',
+            channelFake: false,
+        };
+        const wrapper = shallow(<SidebarChannel {...props}/>);
         expect(wrapper).toMatchSnapshot();
+        expect(props.actions.openLhs).not.toBeCalled();
     });
 
     test('should match snapshot, on group channel show', () => {
-        const wrapper = shallow(
-            <SidebarChannel
-                {...{
-                    ...defaultProps,
-                    channelDisplayName: 'Channel display name',
-                    channelName: 'channel-name',
-                    channelType: Constants.PRIVATE_CHANNEL,
-                    channelId: 'test-channel-id',
-                    channelStatus: 'test',
-                    channelFake: false,
-                }}
-            />
-        );
+        const props = {
+            ...defaultProps,
+            channelDisplayName: 'Channel display name',
+            channelName: 'channel-name',
+            channelType: Constants.PRIVATE_CHANNEL,
+            channelId: 'test-channel-id',
+            channelStatus: 'test',
+            channelFake: false,
+        };
+        const wrapper = shallow(<SidebarChannel {...props}/>);
         expect(wrapper).toMatchSnapshot();
+        expect(props.actions.openLhs).not.toBeCalled();
     });
 
     test('should match snapshot, on default channel show', () => {
-        const wrapper = shallow(
-            <SidebarChannel
-                {...{
-                    ...defaultProps,
-                    channelDisplayName: 'Channel display name',
-                    channelName: Constants.DEFAULT_CHANNEL,
-                    channelType: Constants.PRIVATE_CHANNEL,
-                    channelId: 'test-channel-id',
-                    channelStatus: 'test',
-                    channelFake: false,
-                }}
-            />
-        );
+        const props = {
+            ...defaultProps,
+            channelDisplayName: 'Channel display name',
+            channelName: Constants.DEFAULT_CHANNEL,
+            channelType: Constants.PRIVATE_CHANNEL,
+            channelId: 'test-channel-id',
+            channelStatus: 'test',
+            channelFake: false,
+        };
+        const wrapper = shallow(<SidebarChannel {...props}/>);
         expect(wrapper).toMatchSnapshot();
+        expect(props.actions.openLhs).not.toBeCalled();
     });
 
     test('should match snapshot, on public channel show with enable X to close', () => {
-        const wrapper = shallow(
-            <SidebarChannel
-                {...{
-                    ...defaultProps,
-                    config: {
-                        EnableXToLeaveChannelsFromLHS: 'true',
-                    },
-                    channelDisplayName: 'Channel display name',
-                    channelName: 'channel-name',
-                    channelType: Constants.OPEN_CHANNEL,
-                    channelId: 'test-channel-id',
-                    channelStatus: 'test',
-                    channelFake: false,
-                }}
-            />
-        );
+        const props = {
+            ...defaultProps,
+            config: {
+                EnableXToLeaveChannelsFromLHS: 'true',
+            },
+            channelDisplayName: 'Channel display name',
+            channelName: 'channel-name',
+            channelType: Constants.OPEN_CHANNEL,
+            channelId: 'test-channel-id',
+            channelStatus: 'test',
+            channelFake: false,
+        };
+        const wrapper = shallow(<SidebarChannel {...props}/>);
         expect(wrapper).toMatchSnapshot();
+        expect(props.actions.openLhs).not.toBeCalled();
     });
 
     test('should match snapshot, on private channel show with enable X to close', () => {
-        const wrapper = shallow(
-            <SidebarChannel
-                {...{
-                    ...defaultProps,
-                    config: {
-                        EnableXToLeaveChannelsFromLHS: 'true',
-                    },
-                    channelDisplayName: 'Channel display name',
-                    channelName: 'channel-name',
-                    channelType: Constants.PRIVATE_CHANNEL,
-                    channelId: 'test-channel-id',
-                    channelStatus: 'test',
-                    channelFake: false,
-                }}
-            />
-        );
+        const props = {
+            ...defaultProps,
+            config: {
+                EnableXToLeaveChannelsFromLHS: 'true',
+            },
+            channelDisplayName: 'Channel display name',
+            channelName: 'channel-name',
+            channelType: Constants.PRIVATE_CHANNEL,
+            channelId: 'test-channel-id',
+            channelStatus: 'test',
+            channelFake: false,
+        };
+        const wrapper = shallow(<SidebarChannel {...props}/>);
         expect(wrapper).toMatchSnapshot();
+        expect(props.actions.openLhs).not.toBeCalled();
     });
 
     test('should match snapshot, on group channel show with enable X to close', () => {
-        const wrapper = shallow(
-            <SidebarChannel
-                {...{
-                    ...defaultProps,
-                    config: {
-                        EnableXToLeaveChannelsFromLHS: 'true',
-                    },
-                    channelDisplayName: 'Channel display name',
-                    channelName: 'channel-name',
-                    channelType: Constants.PRIVATE_CHANNEL,
-                    channelId: 'test-channel-id',
-                    channelStatus: 'test',
-                    channelFake: false,
-                }}
-            />
-        );
+        const props = {
+            ...defaultProps,
+            config: {
+                EnableXToLeaveChannelsFromLHS: 'true',
+            },
+            channelDisplayName: 'Channel display name',
+            channelName: 'channel-name',
+            channelType: Constants.PRIVATE_CHANNEL,
+            channelId: 'test-channel-id',
+            channelStatus: 'test',
+            channelFake: false,
+        };
+        const wrapper = shallow(<SidebarChannel {...props}/>);
         expect(wrapper).toMatchSnapshot();
+        expect(props.actions.openLhs).not.toBeCalled();
     });
 
     test('should match snapshot, on default channel show with enable X to close', () => {
-        const wrapper = shallow(
-            <SidebarChannel
-                {...{
-                    ...defaultProps,
-                    config: {
-                        EnableXToLeaveChannelsFromLHS: 'true',
-                    },
-                    channelDisplayName: 'Channel display name',
-                    channelName: Constants.DEFAULT_CHANNEL,
-                    channelType: Constants.OPEN_CHANNEL,
-                    channelId: 'test-channel-id',
-                    channelStatus: 'test',
-                    channelFake: false,
-                }}
-            />
-        );
+        const props = {
+            ...defaultProps,
+            config: {
+                EnableXToLeaveChannelsFromLHS: 'true',
+            },
+            channelDisplayName: 'Channel display name',
+            channelName: Constants.DEFAULT_CHANNEL,
+            channelType: Constants.OPEN_CHANNEL,
+            channelId: 'test-channel-id',
+            channelStatus: 'test',
+            channelFake: false,
+        };
+        const wrapper = shallow(<SidebarChannel {...props}/>);
         expect(wrapper).toMatchSnapshot();
+        expect(props.actions.openLhs).not.toBeCalled();
     });
 
     test('should leave the direct channel', () => {
         const savePreferences = jest.fn(() => Promise.resolve());
         const trackEvent = require('actions/diagnostics_actions.jsx').trackEvent;
 
-        const wrapper = shallow(
-            <SidebarChannel
-                {...{
-                    ...defaultProps,
-                    channelType: Constants.DM_CHANNEL,
-                    channelId: 'test-channel-id',
-                    actions: {
-                        savePreferences,
-                        leaveChannel: jest.fn(),
-                    },
-                }}
-            />
-        );
+        const props = {
+            ...defaultProps,
+            channelType: Constants.DM_CHANNEL,
+            channelId: 'test-channel-id',
+            actions: {
+                ...defaultProps.actions,
+                savePreferences,
+            },
+        };
+
+        const wrapper = shallow(<SidebarChannel {...props}/>);
         wrapper.instance().handleLeaveDirectChannel();
         expect(savePreferences).toBeCalledWith('user-id', [{user_id: 'user-id', category: Constants.Preferences.CATEGORY_DIRECT_CHANNEL_SHOW, name: 'teammate-id', value: 'false'}]);
         expect(trackEvent).toBeCalledWith('ui', 'ui_direct_channel_x_button_clicked');
+        expect(props.actions.openLhs).not.toBeCalled();
     });
 
     test('should leave the group channel', () => {
         const savePreferences = jest.fn(() => Promise.resolve());
         const trackEvent = require('actions/diagnostics_actions.jsx').trackEvent;
+        const props = {
+            ...defaultProps,
+            channelType: Constants.GM_CHANNEL,
+            channelId: 'test-channel-id',
+            actions: {
+                ...defaultProps.actions,
+                savePreferences,
+                leaveChannel: jest.fn(),
+            },
+        };
 
-        const wrapper = shallow(
-            <SidebarChannel
-                {...{
-                    ...defaultProps,
-                    channelType: Constants.GM_CHANNEL,
-                    channelId: 'test-channel-id',
-                    actions: {
-                        savePreferences,
-                        leaveChannel: jest.fn(),
-                    },
-                }}
-            />
-        );
+        const wrapper = shallow(<SidebarChannel {...props}/>);
         wrapper.instance().handleLeaveDirectChannel();
         expect(savePreferences).toBeCalledWith('user-id', [{user_id: 'user-id', category: Constants.Preferences.CATEGORY_GROUP_CHANNEL_SHOW, name: 'test-channel-id', value: 'false'}]);
         expect(trackEvent).toBeCalledWith('ui', 'ui_direct_channel_x_button_clicked');
+        expect(props.actions.openLhs).not.toBeCalled();
     });
 
     test('should leave the active channel', () => {
         const savePreferences = jest.fn(() => Promise.resolve());
         const trackEvent = require('actions/diagnostics_actions.jsx').trackEvent;
         const browserHistory = require('utils/browser_history').browserHistory;
+        const props = {
+            ...defaultProps,
+            channelType: Constants.GM_CHANNEL,
+            channelId: 'test-channel-id',
+            actions: {
+                ...defaultProps.actions,
+                savePreferences,
+                leaveChannel: jest.fn(),
+            },
+            active: true,
+        };
 
-        const wrapper = shallow(
-            <SidebarChannel
-                {...{
-                    ...defaultProps,
-                    channelType: Constants.GM_CHANNEL,
-                    channelId: 'test-channel-id',
-                    actions: {
-                        savePreferences,
-                        leaveChannel: jest.fn(),
-                    },
-                    active: true,
-                }}
-            />
-        );
+        const wrapper = shallow(<SidebarChannel {...props}/>);
         wrapper.instance().handleLeaveDirectChannel();
         expect(savePreferences).toBeCalledWith('user-id', [{user_id: 'user-id', category: Constants.Preferences.CATEGORY_GROUP_CHANNEL_SHOW, name: 'test-channel-id', value: 'false'}]);
         expect(trackEvent).toBeCalledWith('ui', 'ui_direct_channel_x_button_clicked');
         expect(browserHistory.push).toBeCalledWith('/current-team/channels/town-square');
+        expect(props.actions.openLhs).not.toBeCalled();
     });
 
     test('do not leave the channel if it is already leaving', () => {
         const savePreferences = jest.fn(() => Promise.resolve());
+        const props = {
+            ...defaultProps,
+            channelType: Constants.GM_CHANNEL,
+            channelId: 'test-channel-id',
+            actions: {
+                ...defaultProps.actions,
+                savePreferences,
+            },
+            active: true,
+        };
 
-        const wrapper = shallow(
-            <SidebarChannel
-                {...{
-                    ...defaultProps,
-                    channelType: Constants.GM_CHANNEL,
-                    channelId: 'test-channel-id',
-                    actions: {
-                        savePreferences,
-                        leaveChannel: jest.fn(),
-                    },
-                    active: true,
-                }}
-            />
-        );
+        const wrapper = shallow(<SidebarChannel {...props}/>);
         const instance = wrapper.instance();
         instance.isLeaving = true;
         instance.handleLeaveDirectChannel();
         expect(savePreferences).not.toBeCalled();
+        expect(props.actions.openLhs).not.toBeCalled();
     });
 
     test('should leave the public channel', () => {
         const leaveChannel = jest.fn();
         const trackEvent = require('actions/diagnostics_actions.jsx').trackEvent;
+        const props = {
+            ...defaultProps,
+            channelType: Constants.OPEN_CHANNEL,
+            channelId: 'test-channel-id',
+            actions: {
+                ...defaultProps.actions,
+                leaveChannel,
+            },
+        };
 
-        const wrapper = shallow(
-            <SidebarChannel
-                {...{
-                    ...defaultProps,
-                    channelType: Constants.OPEN_CHANNEL,
-                    channelId: 'test-channel-id',
-                    actions: {
-                        savePreferences: jest.fn(),
-                        leaveChannel,
-                    },
-                }}
-            />
-        );
+        const wrapper = shallow(<SidebarChannel {...props}/>);
         wrapper.instance().handleLeavePublicChannel();
         expect(leaveChannel).toBeCalledWith('test-channel-id');
         expect(trackEvent).toBeCalledWith('ui', 'ui_public_channel_x_button_clicked');
+        expect(props.actions.openLhs).not.toBeCalled();
     });
 
     test('should leave the private channel', () => {
         const trackEvent = require('actions/diagnostics_actions.jsx').trackEvent;
         const showLeavePrivateChannelModal = require('actions/global_actions.jsx').showLeavePrivateChannelModal;
+        const props = {
+            ...defaultProps,
+            channelId: 'test-channel-id',
+            channelDisplayName: 'Channel display name',
+        };
 
-        const wrapper = shallow(
-            <SidebarChannel
-                {...{
-                    ...defaultProps,
-                    channelId: 'test-channel-id',
-                    channelDisplayName: 'Channel display name',
-                }}
-            />
-        );
+        const wrapper = shallow(<SidebarChannel {...props}/>);
         wrapper.instance().handleLeavePrivateChannel();
         expect(showLeavePrivateChannelModal).toBeCalledWith({id: 'test-channel-id', display_name: 'Channel display name'});
         expect(trackEvent).toBeCalledWith('ui', 'ui_private_channel_x_button_clicked');
+        expect(props.actions.openLhs).not.toBeCalled();
     });
 });
diff --git a/tests/redux/actions/views/lhs.test.js b/tests/redux/actions/views/lhs.test.js
index cb5fe66fff41..089e251deb19 100644
--- a/tests/redux/actions/views/lhs.test.js
+++ b/tests/redux/actions/views/lhs.test.js
@@ -1,18 +1,63 @@
+// Copyright (c) 2017 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
 
-import {initTeamChangeActions} from 'actions/views/lhs';
-import {loadProfilesForSidebar} from 'actions/user_actions.jsx';
-import {loadStatusesForChannelAndSidebar} from 'actions/status_actions.jsx';
+import configureStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
 
-jest.mock('actions/status_actions.jsx', () => ({
-    loadStatusesForChannelAndSidebar: jest.fn(),
-}));
+import {
+    toggle,
+    open,
+    close,
+} from 'actions/views/lhs';
+import {ActionTypes} from 'utils/constants.jsx';
 
-jest.mock('actions/user_actions.jsx', () => ({
-    loadProfilesForSidebar: jest.fn(),
-}));
+const mockStore = configureStore([thunk]);
 
-it('Check for sidebar init actions', async () => {
-    await initTeamChangeActions();
-    expect(loadStatusesForChannelAndSidebar).toHaveBeenCalled();
-    expect(loadProfilesForSidebar).toHaveBeenCalled();
+describe('lhs view actions', () => {
+    const initialState = {
+        views: {
+            lhs: {
+                isOpen: false,
+            },
+        },
+    };
+
+    let store;
+
+    beforeEach(() => {
+        store = mockStore(initialState);
+    });
+
+    it('toggle dispatches the right action', () => {
+        store.dispatch(toggle());
+
+        const compareStore = mockStore(initialState);
+        compareStore.dispatch({
+            type: ActionTypes.TOGGLE_LHS,
+        });
+
+        expect(store.getActions()).toEqual(compareStore.getActions());
+    });
+
+    it('open dispatches the right action', () => {
+        store.dispatch(open());
+
+        const compareStore = mockStore(initialState);
+        compareStore.dispatch({
+            type: ActionTypes.OPEN_LHS,
+        });
+
+        expect(store.getActions()).toEqual(compareStore.getActions());
+    });
+
+    it('close dispatches the right action', () => {
+        store.dispatch(close());
+
+        const compareStore = mockStore(initialState);
+        compareStore.dispatch({
+            type: ActionTypes.CLOSE_LHS,
+        });
+
+        expect(store.getActions()).toEqual(compareStore.getActions());
+    });
 });
diff --git a/tests/redux/actions/views/rhs.test.js b/tests/redux/actions/views/rhs.test.js
index 86b767e26ee8..f81acbb384a2 100644
--- a/tests/redux/actions/views/rhs.test.js
+++ b/tests/redux/actions/views/rhs.test.js
@@ -21,6 +21,9 @@ import {
     showPinnedPosts,
     showMentions,
     closeRightHandSide,
+    toggleMenu,
+    openMenu,
+    closeMenu,
 } from 'actions/views/rhs';
 import {trackEvent} from 'actions/diagnostics_actions.jsx';
 import {ActionTypes, RHSStates} from 'utils/constants.jsx';
@@ -411,4 +414,37 @@ describe('rhs view actions', () => {
             expect(store.getActions()).toEqual(compareStore.getActions());
         });
     });
+
+    it('toggleMenu dispatches the right action', () => {
+        store.dispatch(toggleMenu());
+
+        const compareStore = mockStore(initialState);
+        compareStore.dispatch({
+            type: ActionTypes.TOGGLE_RHS_MENU,
+        });
+
+        expect(store.getActions()).toEqual(compareStore.getActions());
+    });
+
+    it('openMenu dispatches the right action', () => {
+        store.dispatch(openMenu());
+
+        const compareStore = mockStore(initialState);
+        compareStore.dispatch({
+            type: ActionTypes.OPEN_RHS_MENU,
+        });
+
+        expect(store.getActions()).toEqual(compareStore.getActions());
+    });
+
+    it('closeMenu dispatches the right action', () => {
+        store.dispatch(closeMenu());
+
+        const compareStore = mockStore(initialState);
+        compareStore.dispatch({
+            type: ActionTypes.CLOSE_RHS_MENU,
+        });
+
+        expect(store.getActions()).toEqual(compareStore.getActions());
+    });
 });
diff --git a/tests/redux/reducers/views/lhs.test.js b/tests/redux/reducers/views/lhs.test.js
new file mode 100644
index 000000000000..ef575eff449f
--- /dev/null
+++ b/tests/redux/reducers/views/lhs.test.js
@@ -0,0 +1,110 @@
+// Copyright (c) 2017-present Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import {TeamTypes} from 'mattermost-redux/action_types';
+
+import lhsReducer from 'reducers/views/lhs';
+import {ActionTypes} from 'utils/constants.jsx';
+
+describe('Reducers.LHS', () => {
+    const initialState = {
+        isOpen: false,
+    };
+
+    test('Initial state', () => {
+        const nextState = lhsReducer(
+            {},
+            {}
+        );
+
+        expect(nextState).toEqual(initialState);
+    });
+
+    test(`should close on ${ActionTypes.TOGGLE_LHS}`, () => {
+        const nextState = lhsReducer(
+            {
+                isOpen: true,
+            },
+            {
+                type: ActionTypes.TOGGLE_LHS,
+            }
+        );
+
+        expect(nextState).toEqual({
+            ...initialState,
+            isOpen: false,
+        });
+    });
+
+    test(`should open on ${ActionTypes.TOGGLE_LHS}`, () => {
+        const nextState = lhsReducer(
+            {
+                isOpen: false,
+            },
+            {
+                type: ActionTypes.TOGGLE_LHS,
+            }
+        );
+
+        expect(nextState).toEqual({
+            ...initialState,
+            isOpen: true,
+        });
+    });
+
+    test(`should open on ${ActionTypes.OPEN_LHS}`, () => {
+        const nextState = lhsReducer(
+            {
+                isOpen: false,
+            },
+            {
+                type: ActionTypes.OPEN_LHS,
+            }
+        );
+
+        expect(nextState).toEqual({
+            ...initialState,
+            isOpen: true,
+        });
+    });
+
+    test(`should close on ${ActionTypes.CLOSE_LHS}`, () => {
+        const nextState = lhsReducer(
+            {
+                isOpen: true,
+            },
+            {
+                type: ActionTypes.CLOSE_LHS,
+            }
+        );
+
+        expect(nextState).toEqual({
+            ...initialState,
+            isOpen: false,
+        });
+    });
+
+    describe('should close', () => {
+        [
+            ActionTypes.TOGGLE_RHS_MENU,
+            ActionTypes.OPEN_RHS_MENU,
+            TeamTypes.SELECT_TEAM,
+        ].forEach((action) => {
+            it(`on ${action}`, () => {
+                const nextState = lhsReducer(
+                    {
+                        isOpen: true,
+                    },
+                    {
+                        type: action,
+                    }
+                );
+
+                expect(nextState).toEqual({
+                    ...initialState,
+                    isOpen: false,
+                });
+            });
+        });
+    });
+});
diff --git a/tests/redux/reducers/views/rhs.test.js b/tests/redux/reducers/views/rhs.test.js
index a481d230cdb9..5a070b05699c 100644
--- a/tests/redux/reducers/views/rhs.test.js
+++ b/tests/redux/reducers/views/rhs.test.js
@@ -1,7 +1,7 @@
 // Copyright (c) 2017-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-import {SearchTypes} from 'mattermost-redux/action_types';
+import {SearchTypes, TeamTypes} from 'mattermost-redux/action_types';
 
 import rhsReducer from 'reducers/views/rhs';
 import {ActionTypes, RHSStates} from 'utils/constants.jsx';
@@ -16,6 +16,8 @@ describe('Reducers.RHS', () => {
         isSearchingTerm: false,
         isSearchingFlaggedPost: false,
         isSearchingPinnedPost: false,
+        isMenuOpen: false,
+        isSidebarOpen: false,
     };
 
     test('Initial state', () => {
@@ -41,6 +43,7 @@ describe('Reducers.RHS', () => {
             ...initialState,
             selectedChannelId: '123',
             rhsState: RHSStates.PIN,
+            isSidebarOpen: true,
         });
     });
 
@@ -59,6 +62,7 @@ describe('Reducers.RHS', () => {
             ...initialState,
             selectedPostId: '',
             rhsState: RHSStates.SEARCH,
+            isSidebarOpen: true,
         });
     });
 
@@ -165,6 +169,7 @@ describe('Reducers.RHS', () => {
             ...initialState,
             selectedPostId: '123',
             selectedChannelId: '321',
+            isSidebarOpen: true,
         });
 
         const nextState2 = rhsReducer(
@@ -184,6 +189,7 @@ describe('Reducers.RHS', () => {
             selectedPostId: '123',
             selectedChannelId: '321',
             previousRhsState: RHSStates.SEARCH,
+            isSidebarOpen: true,
         });
 
         const nextState3 = rhsReducer(
@@ -204,6 +210,7 @@ describe('Reducers.RHS', () => {
             selectedPostId: '123',
             selectedChannelId: '321',
             previousRhsState: RHSStates.FLAG,
+            isSidebarOpen: true,
         });
     });
 
@@ -226,6 +233,105 @@ describe('Reducers.RHS', () => {
             selectedPostId: '123',
             selectedChannelId: '321',
             previousRhsState: RHSStates.PIN,
+            isSidebarOpen: true,
+        });
+    });
+
+    test(`should open menu, closing sidebar on ${ActionTypes.TOGGLE_RHS_MENU}`, () => {
+        const nextState = rhsReducer(
+            {
+                isSidebarOpen: true,
+                isMenuOpen: false,
+            },
+            {
+                type: ActionTypes.TOGGLE_RHS_MENU,
+            }
+        );
+
+        expect(nextState).toEqual({
+            ...initialState,
+            isSidebarOpen: false,
+            isMenuOpen: true,
+        });
+    });
+
+    test(`should close menu on ${ActionTypes.TOGGLE_RHS_MENU}`, () => {
+        const nextState = rhsReducer(
+            {
+                isSidebarOpen: false,
+                isMenuOpen: true,
+            },
+            {
+                type: ActionTypes.TOGGLE_RHS_MENU,
+            }
+        );
+
+        expect(nextState).toEqual({
+            ...initialState,
+            isSidebarOpen: false,
+            isMenuOpen: false,
+        });
+    });
+
+    test(`should open menu, closing sidebar on ${ActionTypes.OPEN_RHS_MENU}`, () => {
+        const nextState = rhsReducer(
+            {
+                isSidebarOpen: true,
+                isMenuOpen: false,
+            },
+            {
+                type: ActionTypes.OPEN_RHS_MENU,
+            }
+        );
+
+        expect(nextState).toEqual({
+            ...initialState,
+            isSidebarOpen: false,
+            isMenuOpen: true,
+        });
+    });
+
+    test(`should close menu on ${ActionTypes.CLOSE_RHS_MENU}`, () => {
+        const nextState = rhsReducer(
+            {
+                isSidebarOpen: false,
+                isMenuOpen: true,
+            },
+            {
+                type: ActionTypes.CLOSE_RHS_MENU,
+            }
+        );
+
+        expect(nextState).toEqual({
+            ...initialState,
+            isSidebarOpen: false,
+            isMenuOpen: false,
+        });
+    });
+
+    describe('should close menu and sidebar', () => {
+        [
+            ActionTypes.TOGGLE_LHS,
+            ActionTypes.OPEN_LHS,
+            TeamTypes.SELECT_TEAM,
+        ].forEach((action) => {
+            it(`on ${action}`, () => {
+                const nextState = rhsReducer(
+                    {
+                        isSidebarOpen: true,
+                        isMenuOpen: true,
+                    },
+                    {
+                        type: action,
+                    }
+                );
+
+                expect(nextState).toEqual({
+                    ...initialState,
+                    isSidebarOpen: false,
+                    isMenuOpen: false,
+                });
+            });
         });
     });
 });
diff --git a/tests/redux/selectors/lhs.test.js b/tests/redux/selectors/lhs.test.js
new file mode 100644
index 000000000000..2f4d6e49e351
--- /dev/null
+++ b/tests/redux/selectors/lhs.test.js
@@ -0,0 +1,26 @@
+// Copyright (c) 2017 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import assert from 'assert';
+
+import * as Selectors from 'selectors/lhs';
+
+describe('Selectors.makeGetPostsEmbedVisibleObj', () => {
+    let state;
+
+    beforeEach(() => {
+        state = {};
+    });
+
+    describe('should return the open state of the sidebar menu', () => {
+        [true, false].forEach((expected) => {
+            it(`when open is ${expected}`, () => {
+                state = {views: {lhs: {
+                    isOpen: expected,
+                }}};
+
+                assert.deepEqual(expected, Selectors.getIsLhsOpen(state));
+            });
+        });
+    });
+});
diff --git a/tests/redux/selectors/rhs.test.js b/tests/redux/selectors/rhs.test.js
index 33922e84cae3..9fd7628016b5 100644
--- a/tests/redux/selectors/rhs.test.js
+++ b/tests/redux/selectors/rhs.test.js
@@ -190,4 +190,28 @@ describe('Selectors.makeGetPostsEmbedVisibleObj', () => {
         assert.notEqual(now2, previous2);
         assert.deepEqual(now2, previous2);
     });
+
+    describe('should return the open state of the sidebar', () => {
+        [true, false].forEach((expected) => {
+            it(`when open is ${expected}`, () => {
+                state = {views: {rhs: {
+                    isSidebarOpen: expected,
+                }}};
+
+                assert.deepEqual(expected, Selectors.getIsRhsOpen(state));
+            });
+        });
+    });
+
+    describe('should return the open state of the sidebar menu', () => {
+        [true, false].forEach((expected) => {
+            it(`when open is ${expected}`, () => {
+                state = {views: {rhs: {
+                    isMenuOpen: expected,
+                }}};
+
+                assert.deepEqual(expected, Selectors.getIsRhsMenuOpen(state));
+            });
+        });
+    });
 });
diff --git a/utils/constants.jsx b/utils/constants.jsx
index 5f128495e058..30029582308d 100644
--- a/utils/constants.jsx
+++ b/utils/constants.jsx
@@ -243,6 +243,17 @@ export const ActionTypes = keyMirror({
     SELECT_CHANNEL_WITH_MEMBER: null,
 
     INCREMENT_EMOJI_PICKER_PAGE: null,
+
+    TOGGLE_LHS: null,
+    OPEN_LHS: null,
+    CLOSE_LHS: null,
+
+    TOGGLE_RHS_MENU: null,
+    OPEN_RHS_MENU: null,
+    CLOSE_RHS_MENU: null,
+
+    INIT_WEBRTC: null,
+    CLOSE_WEBRTC: null,
 });
 
 export const WebrtcActionTypes = keyMirror({
@@ -259,7 +270,6 @@ export const WebrtcActionTypes = keyMirror({
     MUTED: null,
     IN_PROGRESS: null,
     DISABLED: null,
-    RHS: null,
 });
 
 export const ModalIdentifiers = {