@mongodb-js/mongodb-ui-components/components/nav/index.jsx

A collection of frequently used functional UI components found on mongodb.com

import React from 'react'
import raf from 'raf'
import TopPanel from './components/panel-top'
import MiddlePanel from './components/panel-middle'
import BottomPanel from './components/panel-bottom'
import Background from './components/background'
import environments from './components/environments'

export default class Nav extends React.Component {
  constructor (props) {
    super(props)

    this.state = {
      isMobile: false,
      isOpen: false,
      activeSection: -1,
      breakpoint: 895
    }

    this.toggle = this.toggle.bind(this)
    this.setActiveSection = this.setActiveSection.bind(this)
  }

  componentDidMount () {
    this.setState({ isMobile: window.innerWidth <= this.state.breakpoint })

    window.addEventListener('resize', () => {
      if (this.rafId) return

      this.rafId = raf(() => {
        const { isMobile, breakpoint } = this.state
        const { innerWidth } = window

        if (isMobile && innerWidth > breakpoint) {
          this.setState({ isMobile: false, isOpen: false, activeSection: -1 })
          document.body.classList.toggle('no-scroll', false)
        } else if (!isMobile && innerWidth <= breakpoint) {
          this.setState({ isMobile: true, activeSection: -1 })
        }

        this.rafId = undefined
      })
    })
  }

  setActiveSection (activeSection) {
    this.setState({ activeSection })
  }

  toggle (isOpen) {
    isOpen = isOpen || !this.state.isOpen

    if (this.state.isMobile) {
      document.body.classList.toggle('no-scroll', isOpen)
    }

    this.setState({ isOpen })
  }

  render () {
    const { isOpen, activeSection } = this.state
    const props = Object.assign({}, this.props, environments[this.props.environment])

    return (
      <nav className='nav-panel flex flex--center-y flex--wrap'>
        <TopPanel
          downloadUrl={ props.downloadUrl }
          downloadJmpValue={ props.downloadJmpValue }
          includeSearch={ props.includeSearch }
          host={ props.environment === 'com' ? '' : 'https://www.mongodb.com' }
          sections={ props.topSections }
          searchUrl={ props.searchUrl }
          contactUrl={ props.contactUrl } />
        <MiddlePanel
          { ...this.state }
          logoUrl={ props.logoUrl }
          tagline={ props.tagline }
          logoLink={ props.logoLink }
          sections={ props.sections }
          toggle={ this.toggle }
          setActiveSection={ this.setActiveSection } />
        <Background
          isMobile={ this.state.isMobile }
          setActiveSection={ this.setActiveSection }
          isOpaque={ isOpen || activeSection !== -1 || props.isOpaque }
          isOpen={ isOpen || activeSection !== -1 }>
          <BottomPanel
            { ...this.state }
            midSections={ props.sections }
            sections={ props.subsections } />
        </Background>
      </nav>
    )
  }
}

const { bool, string, array } = React.PropTypes

Nav.propTypes = {
  topSections: array,
  sections: array,
  subsections: array,

  isOpaque: bool,
  includeSearch: bool,

  environment: string,
  searchUrl: string,
  contactUrl: string,
  downloadUrl: string,
  downloadJmpValue: string,
  logoUrl: string,
  logoLink: string,
  tagline: string
}

Nav.defaultProps = {
  environment: 'com'
}