*/
import * as React from 'react';
import * as classNames from 'classnames';
+import { throttle } from 'lodash';
import './NavBar.css';
interface Props {
[prop: string]: any;
}
-export default function NavBar({ children, className, height, notif, ...other }: Props) {
- return (
- <nav {...other} className={classNames('navbar', className)} style={{ height }}>
- <div
- className={classNames('navbar-inner', { 'navbar-inner-with-notif': notif != null })}
- style={{ height }}>
- <div className="navbar-limited clearfix">{children}</div>
- {notif}
- </div>
- </nav>
- );
+interface State {
+ left: number;
+}
+
+export default class NavBar extends React.PureComponent<Props, State> {
+ throttledFollowHorizontalScroll: (() => void);
+
+ constructor(props: Props) {
+ super(props);
+ this.state = { left: 0 };
+ this.throttledFollowHorizontalScroll = throttle(this.followHorizontalScroll, 10);
+ }
+
+ componentDidMount() {
+ document.addEventListener('scroll', this.throttledFollowHorizontalScroll);
+ }
+
+ componentWillUnmount() {
+ document.removeEventListener('scroll', this.throttledFollowHorizontalScroll);
+ }
+
+ followHorizontalScroll = () => {
+ this.setState({ left: -document.documentElement.scrollLeft });
+ };
+
+ render() {
+ const { children, className, height, notif, ...other } = this.props;
+ return (
+ <nav {...other} className={classNames('navbar', className)} style={{ height }}>
+ <div
+ className={classNames('navbar-inner', { 'navbar-inner-with-notif': notif != null })}
+ style={{ height, left: this.state.left }}>
+ <div className="navbar-limited clearfix">{children}</div>
+ {notif}
+ </div>
+ </nav>
+ );
+ }
}