import * as tslib_1 from "tslib";
import * as React from 'react';
import { observe } from 'xmobx/mobx';
import { observer } from 'xmobx/mobx-react';
import { oneRouter } from '@skava/router';
import { isFunction } from 'exotic';
import { pancakeSidebar } from 'src/views/App/Sidebarz';
import { container } from './container';
import MobileMenu from './MobileMenu';
import { MobileMenuSidebarWrap, Overlay } from './styled';
// @alias ShowHideObserver
let MobileMenuSidebar = class MobileMenuSidebar extends React.Component {
    /**
     * @note - moved onChange here
     */
    componentDidMount() {
        oneRouter.onChange(x => {
            pancakeSidebar.setIsVisible(false);
            document.body.classList.remove('no-scroll');
        });
        this.disposer = observe(pancakeSidebar, 'isVisible', () => {
            if (pancakeSidebar.isVisible) {
                document.body.classList.add('no-scroll');
            }
            else {
                container.setupFrontPage();
                document.body.classList.remove('no-scroll');
            }
        });
    }
    componentWillUnmount() {
        if (isFunction(this.disposer)) {
            this.disposer();
        }
    }
    render() {
        const { onLinkClicked, onToggle } = this.props;
        const { isVisible } = this.props.state;
        console.debug(' [MobileMenu] render: ' + isVisible);
        return (React.createElement(React.Fragment, null,
            React.createElement(MobileMenuSidebarWrap, { isVisible: isVisible },
                React.createElement(MobileMenu, { onLinkClicked: onLinkClicked })),
            React.createElement(Overlay, { onClick: onToggle, isVisible: isVisible })));
    }
};
MobileMenuSidebar = tslib_1.__decorate([
    observer
], MobileMenuSidebar);
export { MobileMenuSidebar };
//# sourceMappingURL=MobileMenuSidebar.js.map