swipeToChangeColumns: PropTypes.bool,
singleColumn: PropTypes.bool,
children: PropTypes.node,
+ navbarUnder: PropTypes.bool,
};
state = {
}
render () {
- const { columns, children, singleColumn, swipeToChangeColumns, intl } = this.props;
+ const { columns, children, singleColumn, swipeToChangeColumns, intl, navbarUnder } = this.props;
const { shouldAnimate } = this.state;
const columnIndex = getIndex(this.context.router.history.location.pathname);
</div>
<div className='columns-area__panels__main'>
- <TabsBar key='tabs' />
+ {!navbarUnder && <TabsBar key='tabs' />}
{content}
+ {navbarUnder && <TabsBar key='tabs' />}
</div>
<div className='columns-area__panels__pane columns-area__panels__pane--start columns-area__panels__pane--navigational'>
};
}
- shouldComponentUpdate (nextProps) {
- if (nextProps.navbarUnder !== this.props.navbarUnder) {
- // Avoid expensive update just to toggle a class
- this.node.classList.toggle('navbar-under', nextProps.navbarUnder);
-
- return false;
- }
-
- // Why isn't this working?!?
- // return super.shouldComponentUpdate(nextProps, nextState);
- return true;
- }
-
componentDidUpdate (prevProps) {
if (![this.props.location.pathname, '/'].includes(prevProps.location.pathname)) {
this.columnsAreaNode.handleChildrenContentChange();
return (
<HotKeys keyMap={keyMap} handlers={handlers} ref={this.setHotkeysRef} attach={window} focused>
<div className={className} ref={this.setRef} style={{ pointerEvents: dropdownMenuIsOpen ? 'none' : null }}>
- <ColumnsAreaContainer ref={this.setColumnsAreaRef} singleColumn={singleColumn}>
+ <ColumnsAreaContainer ref={this.setColumnsAreaRef} singleColumn={singleColumn} navbarUnder={navbarUnder}>
<WrappedSwitch>
{redirect}
<WrappedRoute path='/getting-started' component={GettingStarted} content={children} />