@lyra/default-layout/lib/components/MobileNavigation.js

The default layout components for Lyra

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _LoginStatus = require('./LoginStatus');

var _LoginStatus2 = _interopRequireDefault(_LoginStatus);

var _toolSwitcher = require('part:@lyra/default-layout/tool-switcher');

var _toolSwitcher2 = _interopRequireDefault(_toolSwitcher);

var _MobileNavigation = require('./styles/MobileNavigation.css');

var _MobileNavigation2 = _interopRequireDefault(_MobileNavigation);

var _Branding = require('./Branding');

var _Branding2 = _interopRequireDefault(_Branding);

var _hamburgerIcon = require('part:@lyra/base/hamburger-icon');

var _hamburgerIcon2 = _interopRequireDefault(_hamburgerIcon);

var _default = require('part:@lyra/components/buttons/default');

var _default2 = _interopRequireDefault(_default);

var _Search = require('./Search');

var _Search2 = _interopRequireDefault(_Search);

var _router = require('part:@lyra/base/router');

var _SpaceSwitcher = require('./SpaceSwitcher');

var _SpaceSwitcher2 = _interopRequireDefault(_SpaceSwitcher);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

class MobileNavigation extends _react2.default.Component {
  constructor(...args) {
    var _temp;

    return _temp = super(...args), this.state = {
      isOpen: false
    }, this.handleOpen = event => {
      this.setState({
        isOpen: true
      });
    }, this.handleClose = event => {
      this.setState({
        isOpen: false
      });
    }, this.handleToggle = () => {
      this.setState({
        isOpen: !this.state.isOpen
      });
    }, _temp;
  }

  render() {
    const isOpen = this.state.isOpen;
    const tools = this.props.tools;

    return _react2.default.createElement(
      'div',
      { className: _MobileNavigation2.default.root },
      _react2.default.createElement(_default2.default, {
        kind: 'simple',
        className: _MobileNavigation2.default.hamburgerButton,
        onClick: this.handleToggle,
        title: 'Menu',
        icon: _hamburgerIcon2.default
      }),
      _react2.default.createElement('div', { className: _MobileNavigation2.default.headerBackground }),
      _react2.default.createElement(
        'div',
        { className: `${isOpen ? _MobileNavigation2.default.menuOpen : _MobileNavigation2.default.menuClosed}` },
        _react2.default.createElement(
          'div',
          { className: _MobileNavigation2.default.searchContainer },
          _react2.default.createElement(_Search2.default, { onSelect: this.handleClose })
        ),
        _react2.default.createElement(_SpaceSwitcher2.default, null),
        _react2.default.createElement(_LoginStatus2.default, { className: _MobileNavigation2.default.loginStatus }),
        _react2.default.createElement(
          _router.WithRouter,
          null,
          router => _react2.default.createElement(_toolSwitcher2.default, {
            tools: tools,
            activeToolName: router.state.tool,
            className: _MobileNavigation2.default.toolSwitcher,
            onClick: this.handleClose
          })
        )
      )
    );
  }
}
exports.default = MobileNavigation;
MobileNavigation.propTypes = {
  tools: _propTypes2.default.arrayOf(_propTypes2.default.shape({
    title: _propTypes2.default.string
  }))
};