'use strict';

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

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _lodash = require('lodash');

var _lodash2 = _interopRequireDefault(_lodash);

var _index = require('../../constants/index');

var _index2 = require('../../utils/index');

var _reactRouter = require('react-router');

var _stringProcessor = require('../../lib/string-processor');

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _Common = {
  "inner-block": "Common__inner-block___2cOrF",
  "disable-inner-block": "Common__disable-inner-block___1MLd0",
  "components": "Common__components___2fQuj",
  "component": "Common__component___3bwMg",
  "hide": "Common__hide___2HyoH",
  "desc-text-color": "Common__desc-text-color___2fV3l",
  "desc-text-block": "Common__desc-text-block___1Z4b-",
  "text-link": "Common__text-link___1jaLy",
  "image": "Common__image___AKB6W",
  "imagediff": "Common__imagediff___2j7tX",
  "slideshow": "Common__slideshow___1Fz23",
  "embeddedcode": "Common__embeddedcode___3Avmp",
  "youtube": "Common__youtube___2oq1n",
  "topic-box": "Common__topic-box___2Q-kN"
};

var _Common2 = _interopRequireDefault(_Common);

var _iconDonation = "data:image/svg+xml;base64, ";

var _iconDonation2 = _interopRequireDefault(_iconDonation);

var _logoNavbarS = '/' + "8af1a9a3d631ae693c9c7742866dd282.svg";

var _logoNavbarS2 = _interopRequireDefault(_logoNavbarS);

var _NavCommon = {
  "nav-menu": "NavCommon__nav-menu___33dYD",
  "nav-scrolled-outer": "NavCommon__nav-scrolled-outer___SwhHT",
  "fade-in": "NavCommon__fade-in___3TkUK",
  "fade-out": "NavCommon__fade-out___PuMB6",
  "fade-in-up": "NavCommon__fade-in-up___TKFSn",
  "fade-in-down": "NavCommon__fade-in-down___37abI",
  "fade-out-down": "NavCommon__fade-out-down___DwkJ2",
  "fade-in-left": "NavCommon__fade-in-left___oYWPZ",
  "fade-out-left": "NavCommon__fade-out-left___pa7Cc",
  "fade-in-right": "NavCommon__fade-in-right___gNDeL",
  "fade-out-right": "NavCommon__fade-out-right___10XpL"
};

var _NavCommon2 = _interopRequireDefault(_NavCommon);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactDom = require('react-dom');

var _reactDom2 = _interopRequireDefault(_reactDom);

var _SearchBox = require('./SearchBox');

var _SearchBox2 = _interopRequireDefault(_SearchBox);

var _navbarFixedTopLogo = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOC4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAzNSAzNSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMzUgMzU7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtkaXNwbGF5Om5vbmU7fQ0KCS5zdDF7ZGlzcGxheTppbmxpbmU7fQ0KCS5zdDJ7ZmlsbDojRkZGRkZGO30NCgkuc3Qze2ZpbGw6IzY2NjY3NDt9DQoJLnN0NHtmaWxsOm5vbmU7c3Ryb2tlOiM2NjY2NzQ7c3Ryb2tlLW1pdGVybGltaXQ6MTA7fQ0KCS5zdDV7ZmlsbDpub25lO3N0cm9rZTojNjY2Njc0O3N0cm9rZS13aWR0aDozO3N0cm9rZS1taXRlcmxpbWl0OjEwO30NCgkuc3Q2e29wYWNpdHk6MC4zNTtmaWxsOiM2NjY2NzQ7fQ0KCS5zdDd7ZmlsbDojQzMwMDBCO30NCgkuc3Q4e2ZpbGw6I0UyMDAxMjt9DQoJLnN0OXtmaWxsOm5vbmU7c3Ryb2tlOiM2NjY2NzQ7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjEwO30NCgkuc3QxMHtmaWxsOiMzOUFENEE7fQ0KCS5zdDExe2ZpbGw6IzQ3NjM5OTt9DQoJLnN0MTJ7ZmlsbDojNDFBNkRDO30NCgkuc3QxM3tmaWxsOiNDNjAwMEI7fQ0KCS5zdDE0e2ZpbGw6IzIzMTgxNTt9DQoJLnN0MTV7ZmlsbDojREFFMUU1O30NCgkuc3QxNntmaWxsOm5vbmU7c3Ryb2tlOiMwMDAwMDA7c3Ryb2tlLW1pdGVybGltaXQ6MTA7fQ0KCS5zdDE3e2ZpbGw6bm9uZTtzdHJva2U6I0M5NDIyMztzdHJva2UtbWl0ZXJsaW1pdDoxMDt9DQoJLnN0MTh7ZmlsbDojQzk0MjIzO30NCgkuc3QxOXtmaWxsOiMzNjM0ODQ7fQ0KCS5zdDIwe2ZpbGw6bm9uZTtzdHJva2U6I0ZGRkZGRjtzdHJva2UtbWl0ZXJsaW1pdDoxMDt9DQo8L3N0eWxlPg0KPGcgaWQ9IuWcluWxpF8yIiBjbGFzcz0ic3QwIj4NCjwvZz4NCjxnIGlkPSLlnJblsaRfMSI+DQoJPGc+DQoJCTxwb2x5Z29uIGNsYXNzPSJzdDciIHBvaW50cz0iMjkuMywyNS45IDIwLDIzLjcgMjAsMTIgMjkuMyw5LjQgCQkiLz4NCgkJPHBvbHlnb24gY2xhc3M9InN0OCIgcG9pbnRzPSI1LjcsMzAuNCAyMC4zLDIzLjcgMjAuMywxMiA1LjcsNS4zIAkJIi8+DQoJPC9nPg0KPC9nPg0KPGcgaWQ9IuWcluWxpF8zIiBjbGFzcz0ic3QwIj4NCjwvZz4NCjwvc3ZnPg0K";

var _navbarFixedTopLogo2 = _interopRequireDefault(_navbarFixedTopLogo);

var _NavMenu = {
  "nav-block": "NavMenu__nav-block___3x25f",
  "navLeft": "NavMenu__navLeft___2u9sU",
  "navCenter": "NavMenu__navCenter___1Uxwg",
  "navRight": "NavMenu__navRight___2Z-g2",
  "general-subnav": "NavMenu__general-subnav___3B-ns",
  "seoHidden": "NavMenu__seoHidden___1_i-V",
  "slided-down-category": "NavMenu__slided-down-category___1pMWW",
  "photography": "NavMenu__photography___3OnnO",
  "hide-category": "NavMenu__hide-category___21Igb",
  "nav-category": "NavMenu__nav-category___33DJn",
  "menu-item": "NavMenu__menu-item___2srPG",
  "active": "NavMenu__active___24jGD",
  "topBar": "NavMenu__topBar___32HJJ",
  "fade-in-down": "NavMenu__fade-in-down___6miMP",
  "nav-item-algin": "NavMenu__nav-item-algin___27ppK",
  "donateButton": "NavMenu__donateButton___ijwA3",
  "navButton": "NavMenu__navButton___3NX9g",
  "navIcon": "NavMenu__navIcon___22ZlX",
  "slidedUpNav": "NavMenu__slidedUpNav___E-57F",
  "articleTitle": "NavMenu__articleTitle___hRu10",
  "fade-in-left": "NavMenu__fade-in-left___2lmV4",
  "titleText": "NavMenu__titleText___1qHAd",
  "articleTitleText": "NavMenu__articleTitleText___3deeb",
  "topicTitleText": "NavMenu__topicTitleText___uXa6s",
  "fadeRight": "NavMenu__fadeRight___1BMYm",
  "fadeLeft": "NavMenu__fadeLeft___1O_TL",
  "fade-in-right": "NavMenu__fade-in-right___1ihcO",
  "slideUp": "NavMenu__slideUp___3NI0t",
  "slide-up": "NavMenu__slide-up___3xqwC",
  "slideDown": "NavMenu__slideDown___1Ea7_",
  "slide-down": "NavMenu__slide-down___1wT55",
  "linkOuterContainer": "NavMenu__linkOuterContainer___26IiN",
  "catLinkContainer": "NavMenu__catLinkContainer___3w2Tj",
  "item-animation": "NavMenu__item-animation___1YU-7",
  "navContainer": "NavMenu__navContainer___37T4I",
  "navLogo": "NavMenu__navLogo___3fR2I",
  "fade-in": "NavMenu__fade-in___bxizO",
  "logoRight": "NavMenu__logoRight___1jZLk",
  "up": "NavMenu__up___1e6Cd",
  "donateIcon": "NavMenu__donateIcon___BA0LT",
  "topic-count": "NavMenu__topic-count___2OWer",
  "iconOpen": "NavMenu__iconOpen___7u9KA",
  "fade-out": "NavMenu__fade-out___2dsM8",
  "fade-in-up": "NavMenu__fade-in-up___1l4y2",
  "fade-out-down": "NavMenu__fade-out-down___1vb8o",
  "fade-out-left": "NavMenu__fade-out-left___6TTnj",
  "fade-out-right": "NavMenu__fade-out-right___I_FYx"
};

var _NavMenu2 = _interopRequireDefault(_NavMenu);

var _iconNavbarToc = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjI0cHgiIGhlaWdodD0iNnB4IiB2aWV3Qm94PSIwIDAgMjQgNiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggMzkgKDMxNjY3KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5pY29uLW5hdmJhci10b2M8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0iTW9iaWxlIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iQXJ0aWNsZS3igJMtU2Nyb2xsaW5nLeKAky1Nb2JpbGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xNzYuMDAwMDAwLCAtMzMuMDAwMDAwKSIgZmlsbD0iIzdGN0Y3RiI+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik0xOTcsMzkgQzE5NS4zNDQsMzkgMTk0LDM3LjY1NiAxOTQsMzYgQzE5NCwzNC4zNDQgMTk1LjM0NCwzMyAxOTcsMzMgQzE5OC42NTYsMzMgMjAwLDM0LjM0NCAyMDAsMzYgQzIwMCwzNy42NTYgMTk4LjY1NiwzOSAxOTcsMzkgWiBNMTg4LDM5IEMxODYuMzQ0LDM5IDE4NSwzNy42NTYgMTg1LDM2IEMxODUsMzQuMzQ0IDE4Ni4zNDQsMzMgMTg4LDMzIEMxODkuNjU2LDMzIDE5MSwzNC4zNDQgMTkxLDM2IEMxOTEsMzcuNjU2IDE4OS42NTYsMzkgMTg4LDM5IFogTTE3OSwzOSBDMTc3LjM0NCwzOSAxNzYsMzcuNjU2IDE3NiwzNiBDMTc2LDM0LjM0NCAxNzcuMzQ0LDMzIDE3OSwzMyBDMTgwLjY1NiwzMyAxODIsMzQuMzQ0IDE4MiwzNiBDMTgyLDM3LjY1NiAxODAuNjU2LDM5IDE3OSwzOSBaIiBpZD0iaWNvbi1uYXZiYXItdG9jIj48L3BhdGg+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=";

var _iconNavbarToc2 = _interopRequireDefault(_iconNavbarToc);

var _TopicPopup = require('./TopicPopup');

var _TopicPopup2 = _interopRequireDefault(_TopicPopup);

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

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
// import { ARTICLE, PHOTOGRAPHY, PHOTOGRAPHY_ARTICLE, TOPIC, appId, donatePath, navPath, colors } from '../../constants/index'

// import SubNavBar from './SubNavBar'


var TRIMMED_RATIO = 0.5;
var FULL_WIDTH = 1200;

var NavMenu = function (_Component) {
  _inherits(NavMenu, _Component);

  function NavMenu(props, context) {
    _classCallCheck(this, NavMenu);

    var _this = _possibleConstructorReturn(this, (NavMenu.__proto__ || Object.getPrototypeOf(NavMenu)).call(this, props, context));

    _this.state = {
      open: false,
      windowWidth: 200,
      trimmedTitle: '',
      isDown: false,
      isTopicOpen: false
    };

    _this.handleResize = _this._handleResize.bind(_this);
    _this.handleArticleTitle = _this._handleArticleTitle.bind(_this);
    _this._onTopicBtnClick = _this._onTopicBtnClick.bind(_this);
    return _this;
  }

  _createClass(NavMenu, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      window.addEventListener('resize', this.handleResize);
      this.handleResize();
    }
  }, {
    key: 'componentWillUnmount',
    value: function componentWillUnmount() {
      window.removeEventListener('resize', this.handleResize);
    }
  }, {
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      if (nextProps.isScrolledOver) {
        this.setState({ isDown: true });
      }

      if (nextProps.pageTitle !== this.props.pageTitle) {
        this.setState({ trimmedTitle: '' });
        this._checkIfPopupShown(this.state.isOpen);
      }

      // close the topic popup if user switch to different page
      if (nextProps.path !== this.props.path) {
        this.setState({ trimmedTitle: '', isTopicOpen: false });
        this.setState({ open: false });
        this._checkIfPopupShown(this.state.isOpen);
      }

      if (this.state.trimmedTitle == '') {
        this.handleArticleTitle(nextProps.pageTitle);
      }
    }
  }, {
    key: '_handleResize',
    value: function _handleResize() {
      this.setState({ windowWidth: window.innerWidth });

      // handle trimming problem for the article title
      this.handleArticleTitle();
    }
  }, {
    key: '_handleArticleTitle',
    value: function _handleArticleTitle() {
      var titleSpan = _reactDom2.default.findDOMNode(this.refs.title);
      var _props = this.props;
      var pageTitle = _props.pageTitle;
      var pageTopic = _props.pageTopic;
      var windowWidth = this.state.windowWidth;

      var topicOffset = pageTopic ? pageTopic.length : 0;

      if (titleSpan && pageTitle) {
        var fontSize = Number(getComputedStyle(titleSpan, '').fontSize.match(/(\d*(\.\d*)?)px/)[1]);
        if (!fontSize || fontSize < 0) {
          fontSize = 18;
        }
        var wordCnt = this.state.windowWidth * TRIMMED_RATIO / fontSize - topicOffset;
        if (windowWidth > 0 && windowWidth < FULL_WIDTH) {
          wordCnt = Math.round(wordCnt * (windowWidth / FULL_WIDTH));
        }
        var titleText = pageTitle;
        if (pageTitle.length > wordCnt) {
          titleText = (0, _stringProcessor.shortenString)(pageTitle, wordCnt) + '...';
        }

        this.setState({ trimmedTitle: titleText });
      }
    }
  }, {
    key: '_renderAritcleFirst',
    value: function _renderAritcleFirst(burgerMenu, logo, navLinks) {
      // const { header } = this.props
      // const pageType = _.get(header, 'pageType', null)
      var animateClass = this.state.isDown ? _NavMenu2.default['slideDown'] : null;
      // let subNavBar = (!pageType || pageType === ARTICLE || pageType === PHOTOGRAPHY_ARTICLE || this.state.open) ? null : <div className={styles['general-subnav']}><SubNavBar {...this.props}/></div>

      return _react2.default.createElement(
        'div',
        { className: (0, _classnames2.default)(_NavMenu2.default.navContainer, animateClass) },
        _react2.default.createElement(
          'div',
          { className: _NavMenu2.default.navLeft },
          burgerMenu,
          _react2.default.createElement(DonateButton, { isSlidedUp: false })
        ),
        _react2.default.createElement(
          'div',
          { className: _NavMenu2.default.navCenter },
          _react2.default.createElement(
            _reactRouter.Link,
            { className: _NavMenu2.default.navLogo, to: '/' },
            _react2.default.createElement('img', { src: logo })
          ),
          _react2.default.createElement(
            'div',
            { className: _NavMenu2.default.seoHidden },
            navLinks
          )
        ),
        _react2.default.createElement(
          'div',
          { className: _NavMenu2.default.navRight },
          _react2.default.createElement(
            _reactRouter.Link,
            { className: _NavMenu2.default.logoRight, to: '/' },
            _react2.default.createElement('img', { src: _navbarFixedTopLogo2.default })
          )
        )
      );
    }
  }, {
    key: '_renderAritcleSecond',
    value: function _renderAritcleSecond(burgerMenu, cUrl) {
      var navItemClass = _NavMenu2.default.navButton;
      var trimmedTitle = this.state.trimmedTitle; // trimmed title

      var _props2 = this.props;
      var pageTopic = _props2.pageTopic;
      var header = _props2.header;

      var topicLength = _lodash2.default.get(header, 'topicArr', []).length;
      var pageType = _lodash2.default.get(header, 'pageType');
      var titleClass = pageTopic ? _NavMenu2.default['topicTitleText'] : _NavMenu2.default['articleTitleText'];
      var topicRedBox = pageTopic ? _react2.default.createElement(
        'span',
        { className: _Common2.default['topic-box'] },
        pageTopic
      ) : null;
      var topicCnt = topicLength > 0 ? _react2.default.createElement(
        'div',
        { className: _NavMenu2.default['topic-count'] },
        ' ',
        topicLength,
        ' '
      ) : null;
      var topicButton = pageTopic ? _react2.default.createElement(
        'div',
        { className: navItemClass, url: cUrl, appId: _index.appId, onClick: this._onTopicBtnClick },
        _react2.default.createElement('img', { src: _iconNavbarToc2.default }),
        ' ',
        topicCnt
      ) : null;

      return _react2.default.createElement(
        'div',
        { className: (0, _classnames2.default)(_NavMenu2.default.navContainer, _NavMenu2.default.slidedUpNav) },
        _react2.default.createElement(
          'div',
          { className: (0, _classnames2.default)(_NavMenu2.default.navLeft, _NavMenu2.default.slideUp) },
          burgerMenu,
          _react2.default.createElement(DonateButton, { isSlidedUp: true })
        ),
        _react2.default.createElement(
          'div',
          { className: (0, _classnames2.default)(_NavMenu2.default.articleTitle, _NavMenu2.default.fadeRight) },
          _react2.default.createElement(
            'div',
            { className: (0, _classnames2.default)(titleClass, _defineProperty({}, _NavMenu2.default.photography, pageType === _index.PHOTOGRAPHY_ARTICLE)), ref: 'title' },
            topicRedBox,
            trimmedTitle
          )
        ),
        _react2.default.createElement(
          'div',
          { className: (0, _classnames2.default)(_NavMenu2.default.navRight, _NavMenu2.default.fadeLeft) },
          topicButton
        )
      );
    }
  }, {
    key: '_renderGeneralSecond',
    value: function _renderGeneralSecond(burgerMenu, navLinks) {
      // eslint-disable-line
      var isCatHidden = this.state.open ? _NavMenu2.default['hide-category'] : null;

      return _react2.default.createElement(
        'div',
        { className: (0, _classnames2.default)(_NavMenu2.default.navContainer, _NavMenu2.default.slidedUpNav) },
        _react2.default.createElement(
          'div',
          { className: (0, _classnames2.default)(_NavMenu2.default.navLeft, _NavMenu2.default.slideUp) },
          burgerMenu,
          _react2.default.createElement(DonateButton, { isSlidedUp: true })
        ),
        _react2.default.createElement(
          'div',
          { className: (0, _classnames2.default)(_NavMenu2.default.articleTitle, _NavMenu2.default.fadeRight, _NavMenu2.default['slided-down-category'], 'visible-lg', isCatHidden) },
          _react2.default.createElement(
            'div',
            { className: _NavMenu2.default['nav-category'] },
            navLinks
          )
        ),
        _react2.default.createElement('div', { className: (0, _classnames2.default)(_NavMenu2.default.navRight, _NavMenu2.default.fadeLeft) })
      );
    }
  }, {
    key: '_renderTopicSecond',
    value: function _renderTopicSecond(burgerMenu, navLinks) {
      // eslint-disable-line
      var pageTopic = this.state.pageTopic; // trimmed title

      var pageTitle = this.props.pageTitle;

      var titleClass = pageTopic ? _NavMenu2.default['topicTitleText'] : _NavMenu2.default['articleTitleText'];
      var topicRedBox = pageTopic ? _react2.default.createElement(
        'span',
        { className: _Common2.default['topic-box'] },
        pageTopic
      ) : null;

      return _react2.default.createElement(
        'div',
        { className: (0, _classnames2.default)(_NavMenu2.default.navContainer, _NavMenu2.default.slidedUpNav) },
        _react2.default.createElement(
          'div',
          { className: (0, _classnames2.default)(_NavMenu2.default.navLeft, _NavMenu2.default.slideUp) },
          burgerMenu,
          _react2.default.createElement(DonateButton, { isSlidedUp: true })
        ),
        _react2.default.createElement(
          'div',
          { className: (0, _classnames2.default)(_NavMenu2.default.articleTitle, _NavMenu2.default.fadeRight) },
          _react2.default.createElement(
            'div',
            { className: titleClass, ref: 'title' },
            topicRedBox,
            pageTitle
          )
        ),
        _react2.default.createElement('div', { className: (0, _classnames2.default)(_NavMenu2.default.navRight, _NavMenu2.default.fadeLeft) })
      );
    }
  }, {
    key: '_onTopicBtnClick',
    value: function _onTopicBtnClick() {
      var isOpen = !this.state.isTopicOpen;
      this.setState({ isTopicOpen: isOpen });
      this._checkIfPopupShown(isOpen);
    }
  }, {
    key: '_checkIfPopupShown',
    value: function _checkIfPopupShown(isOpen) {
      // disable the page scrolling function if the Topic popup is being open
      if (isOpen) {
        document.body.style.overflow = 'hidden';
      } else {
        document.body.style.overflow = 'auto';
      }
    }
  }, {
    key: 'render',
    value: function render() {
      var _this2 = this;

      // const { path, bgStyle, header, isScrolledOver, pageTopic, articleId } = this.props
      var _props3 = this.props;
      var path = _props3.path;
      var header = _props3.header;
      var isScrolledOver = _props3.isScrolledOver;
      var pageTopic = _props3.pageTopic;
      var articleId = _props3.articleId;

      var cUrl = (0, _index2.getAbsPath)(this.context.location.pathname, this.context.location.search);
      var backgroundColor = _index.colors.whiteBg;
      var navTopBackground = isScrolledOver ? _index.colors.superWhite : _index.colors.whiteBg;
      var logo = _logoNavbarS2.default;
      var linkColor = _index.colors.darkBg;
      var photographyClass = void 0;

      var navLinks = [];
      var burgerIconClass = _NavMenu2.default.navIcon;
      var navOuterClass = '';
      var subNavBar = null;
      var searchClass = '';
      var topicPopup = null;

      // generate category navigation bar
      var navItems = [].concat(_index.navPath);
      navItems.unshift({ title: '首頁', path: '/' });
      for (var i in navItems) {
        var itemClassName = void 0;
        if (navItems[i].path === path) {
          itemClassName = _NavMenu2.default.active;
        }
        navLinks.push(_react2.default.createElement(
          _reactRouter.Link,
          { key: i, style: { color: linkColor },
            className: (0, _classnames2.default)(_NavMenu2.default['menu-item'], itemClassName), to: navItems[i].path,
            onClick: function onClick() {
              _this2.setState({ open: !_this2.state.open });
            } },
          _react2.default.createElement(
            'h1',
            null,
            navItems[i].title
          )
        ));
      }

      // if the burger icon is clicked
      if (this.state.open) {
        burgerIconClass = (0, _classnames2.default)(_NavMenu2.default.navIcon, _NavMenu2.default.iconOpen);
        subNavBar = _react2.default.createElement(
          'div',
          { className: _NavMenu2.default.linkOuterContainer },
          _react2.default.createElement(
            'div',
            { className: _NavMenu2.default.catLinkContainer },
            navLinks
          )
        );

        // change the color of the navbar
        navOuterClass = _NavCommon2.default['nav-scrolled-outer'];
      } else {
        searchClass = 'hidden';
      }

      var burgerMenu = _react2.default.createElement(
        'div',
        { className: burgerIconClass, onClick: function onClick() {
            _this2.setState({ open: !_this2.state.open });
          } },
        _react2.default.createElement('span', null),
        _react2.default.createElement('span', null),
        _react2.default.createElement('span', null),
        _react2.default.createElement('span', null)
      );

      var menuBar = this._renderAritcleFirst(burgerMenu, logo, navLinks);
      var searchBox = _react2.default.createElement(
        'div',
        { className: (0, _classnames2.default)(_NavMenu2.default.topBar, searchClass) },
        _react2.default.createElement(_SearchBox2.default, { style: { width: '260px', marginTop: '-5px', display: 'inline-block' }, path: path })
      );

      // if the page has been scrolled down, show another menu
      if (isScrolledOver && (header.pageType === _index.ARTICLE || header.pageType === _index.PHOTOGRAPHY_ARTICLE)) {
        menuBar = this._renderAritcleSecond(burgerMenu, cUrl);
      } else if (isScrolledOver && header.pageType === _index.TOPIC) {
        menuBar = this._renderTopicSecond(burgerMenu, navLinks);
      } else if (isScrolledOver) {
        menuBar = this._renderGeneralSecond(burgerMenu, navLinks);
      }

      if (isScrolledOver) {
        navOuterClass = _NavCommon2.default['nav-scrolled-outer'];
      }

      if (header.pageType === _index.ARTICLE && pageTopic) {
        topicPopup = _react2.default.createElement(_TopicPopup2.default, { isOpen: this.state.isTopicOpen,
          topicArr: header.topicArr,
          pageTopic: pageTopic,
          articleId: articleId,
          onTopicBtnClick: this._onTopicBtnClick });
      }

      return _react2.default.createElement(
        'div',
        { style: { backgroundColor: backgroundColor } },
        _react2.default.createElement(
          'div',
          { className: (0, _classnames2.default)(_NavCommon2.default['nav-menu'], navOuterClass, photographyClass), style: { backgroundColor: navTopBackground } },
          menuBar,
          searchBox,
          subNavBar
        ),
        topicPopup
      );
    }
  }]);

  return NavMenu;
}(_react.Component);

exports.default = NavMenu;


var DonateButton = function DonateButton(props) {
  var isSlidedUp = props.isSlidedUp;

  var dClass = isSlidedUp ? _NavMenu2.default['up'] : null;
  return _react2.default.createElement(
    'a',
    { target: '_blank', title: '贊助我們', className: (0, _classnames2.default)(_NavMenu2.default.donateButton, dClass), href: _index.donatePath },
    _react2.default.createElement('img', { src: _iconDonation2.default }),
    _react2.default.createElement(
      'span',
      null,
      '贊助我們'
    )
  );
};

NavMenu.contextTypes = {
  location: _react2.default.PropTypes.object
};

NavMenu.propTypes = {
  path: _react2.default.PropTypes.string,
  pageTitle: _react2.default.PropTypes.string,
  pageTopic: _react2.default.PropTypes.string
};