overmind/packages/overmind-website/src/components/MobileTopBar/index.tsx at angular · hipertracker/overmind · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
import * as React from 'react'
import { Wrapper, MenuWrapper, Menu, Link } from './elements'
import ViewSelector from '../ViewSelector'
import Icon from '../Icon'

type Props = {
  selectedTheme: string
  currentPage: string
  currentPath: string
}

class MobileTopBar extends React.Component<Props> {
  node: HTMLElement
  menu: HTMLElement
  componentDidMount() {
    requestAnimationFrame(() => (this.node.style.top = '0'))
  }
  openMenu = () => {
    this.menu.style.transform = 'translate3d(0, 0, 0)'
  }
  closeMenu = () => {
    this.menu.style.transform = 'translate3d(-110vw, 0, 0)'
  }
  render() {
    const { selectedTheme, currentPage, currentPath } = this.props

    return (
      <Wrapper
        innerRef={(node) => {
          this.node = node
        }}
      >
        <div onClick={this.openMenu}>
          <Icon>bars</Icon>
        </div>
        <ViewSelector selectedTheme={selectedTheme} />
        <MenuWrapper
          onClick={this.closeMenu}
          innerRef={(node) => {
            this.menu = node
          }}
        >
          <Menu>
            <Link href="/" selected={currentPage === '/'}>
              Home
            </Link>
            <Link
              href="/guides"
              selected={currentPage.indexOf('/guides') === 0}
            >
              Guides
            </Link>
            <Link
              href="/videos"
              selected={currentPage.indexOf('/videos') === 0}
            >
              Videos
            </Link>
            <Link href="/api/action" selected={currentPath === '/api/action'}>
              Api - Action
            </Link>
            <Link href="/api/app" selected={currentPath === '/api/app'}>
              Api - App
            </Link>
            <Link href="/api/compute" selected={currentPath === '/api/compute'}>
              Api - Compute
            </Link>
            <Link href="/api/connect" selected={currentPath === '/api/connect'}>
              Api - Connect
            </Link>
            <Link href="/api/derive" selected={currentPath === '/api/derive'}>
              Api - Derived
            </Link>
            <Link href="/api/effects" selected={currentPath === '/api/effects'}>
              Api - Effects
            </Link>
            <Link href="/api/modules" selected={currentPath === '/api/modules'}>
              Api - Modules
            </Link>
            <Link
              href="/api/reaction"
              selected={currentPath === '/api/reaction'}
            >
              Api - Reaction
            </Link>
          </Menu>
        </MenuWrapper>
      </Wrapper>
    )
  }
}

export default MobileTopBar