@mongodb-js/mongodb-ui-components/src/nav/mobile.js

A collection of frequently used functional UI components found on mongodb properties

import {h, Component} from 'preact'
import {mongodbLogo, hamburguesaIcon, closeIcon, loginIcon, arrowIcon} from './icons'
import {Search} from './search'

export class MobileNav extends Component {
  constructor (props) {
    super(props)

    this.state = {
      open: false,
      searching: false,
      openPanels: []
    }
  }

  toggleOpen () {
    const open = !this.state.open

    document.body.style.overflow = open ? 'hidden' : ''

    return this.setState({open})
  }

  toggleTab (i) {
    const {openPanels} = this.state
    const index = openPanels.indexOf(i)

    if (index > -1) {
      openPanels.splice(index, 1)
    } else {
      openPanels.push(i)
    }

    return this.setState({openPanels})
  }

  render (
    {logoHref, top, panels, mobileLinks},
    {open, searching, openPanels}
  ) {
    return (
      <nav
        style={{zIndex: 1000000}}
        class='m-nav-mobile fixed top left h-50 w-full'>
        <style>{`nav{-webkit-tap-highlight-color:rgba(0,0,0,0)}`}</style>

        <div
          style={{borderBottom: '1px solid rgba(179,187,193,0.25)'}}
          class='relative top left fl fl-center-y fl-justify-between h-full w-full p-h-20 bg-white'>
          <div style={{
            transition: '300ms',
            marginLeft: searching ? '-150px' : ''
          }}>
            <a href={logoHref}>
              {mongodbLogo}
            </a>
          </div>

          <div class='fl fl-center'>
            <Search mobile onSearchClick={(newVal) => this.setState({searching: newVal})} />
            <span class='h-25' onClick={() => this.toggleOpen()}>
              {open ? closeIcon : hamburguesaIcon}
            </span>
          </div>
        </div>

        <div
          style={{
            visibility: open ? '' : 'hidden',
            height: 'calc(100vh - 50px)',
            overflowY: 'auto',
            '-webkit-overflow-scrolling': 'touch'
          }}
          class='relative w-full'>
          <div
            class='h-50 p-l-20 w-full bg-white fl fl-center-y fl-justify-between'>
            <a href='https://cloud.mongodb.com/user'>
              <button class='reset p-0 m-r-35'>
                <p class='fl fl-center' style={{fontSize: '14px', cursor: 'pointer'}}>
                  {loginIcon} <strong clasxss='m-l-5'>Sign In</strong>
                </p>
              </button>
            </a>

            <a href='/download-center'>
              <button class='btn-green btn-small m-r-20'>
                Try Free
              </button>
            </a>
          </div>

          {top.left.map((item, i) => {
            const panel = panels[i]
            const isOpen = openPanels.indexOf(i) > -1

            return [
              <div
                onClick={() => this.toggleTab(i)}
                style={{
                  cursor: 'pointer',
                  borderTop: '1px solid rgba(179,187,193,0.25)'
                }}
                class='h-50 p-l-20 w-full bg-white fl fl-center-y'>
                <span class='p-r-10'>{item.text}</span>
                <span style={{
                  transition: '200ms',
                  transform: isOpen ? 'rotateZ(90deg)' : ''
                }}>
                  {arrowIcon}
                </span>
              </div>,

              <div
                style={{
                  transition: '200ms',
                  height: isOpen ? 'initial' : '0px',
                  overflow: 'hidden',
                  transition: 'height 300ms',
                  background: 'linear-gradient(180deg, #FAFBFC 0%, #fff 100%)'
                }}
                class=''>
                {panel.sections.map(({title, links}) => {
                  return (
                    <div
                      style={title
                        ? {borderTop: '1px solid rgba(179,187,193,0.25)'}
                        : null
                      }
                      class={`p-l-20 ${title ? 'p-v-20' : 'p-b-20'}`}>
                      {title &&
                      <p
                        class='m-t-0 m-b-10'
                        style={{
                          cursor: 'default',
                          minHeight: '24px',
                          color: '#116149',
                          textTransform: 'uppercase'
                        }}>
                        <strong>{title}</strong>
                      </p>}

                      {links.map((link, i, {length}) =>
                        <a
                          class={`reset disp-block ${i === length - 1 ? 'm-b-0' : 'm-b-15'
                          }`}
                          href={link.href}>
                          <p class='m-0'>
                            <strong>{link.title}</strong>
                          </p>
                          {link.text && <small class='m-0'>{link.text}</small>}
                        </a>
                      )}
                    </div>
                  )
                })}
              </div>
            ]
          })}

          <div class='p-b-120' style={{
            backgroundColor: '#FAFBFC',
            borderTop: '1px solid rgba(179,187,193,0.25)'
          }}>
            {mobileLinks.map(item => {
              return (
                <a class='reset' href={item.href}>
                  <div class='h-50 p-l-20 w-full fl fl-center-y'>
                    {item.text}
                  </div>
                </a>
              )
            })}
          </div>
        </div>
      </nav>
    )
  }
}