pwa-codelabs/src/Menu.js at 743027bfd0e3a60426e93beaa0f6f2d7923cae3f · code-kotis/pwa-codelabs · 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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
import React, {Component} from 'react';
import NavLink from './NavLink';
import './Menu.css';
import codelabsImg from './code-labs.png';

class Menu extends Component {
  componentDidMount() {
    this.hideMenu = this.hideMenu.bind(this);
    this.menuIcon = document.querySelector('.menu__icon');
    this.menu = document.querySelector('.menu');
    this.menuOverlay = document.querySelector('.menu__overlay');
    this.bindNavigation();
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.isMenuOpen) {
      this.showMenu();
    }
  }

  toggleMenu() {
    if (!this.isMenuOpen()) {
      this.showMenu();
    }
    else {
      this.hideMenu();
    }
  }

  isMenuOpen() {
    return this.menu.classList.contains('menu--show');
  }

  hideMenu() {
    this.menu.classList.remove('menu--show');
    this.menuOverlay.classList.remove('menu__overlay--show');
  }

  showMenu() {
    this.menu.classList.add('menu--show');
    this.menuOverlay.classList.add('menu__overlay--show');
  }

  bindNavigation() {
    document.body.addEventListener('keyup', (event) => {
      let menuListElement = document.querySelector('.menu__list a.active').parentElement;
      if (event.key === 'ArrowLeft') {
        let activeSiblingElement = menuListElement.previousElementSibling;
        if (activeSiblingElement && activeSiblingElement.children) {
          menuListElement.previousElementSibling.children[0].click();
        }
      }
      else if (event.key === 'ArrowRight') {
        let activeSiblingElement = menuListElement.nextElementSibling;
        if (activeSiblingElement && activeSiblingElement.children) {
          activeSiblingElement.children[0].click();
        }
      }
    });
  }
  render() {
    return(
      <div className="menu-container">
        <div className="menu">
          <div className="menu__header">
            <img className="menu__logo" src={codelabsImg} alt="logo" />
          </div>
          <ul className="menu__list">
            <li>
              <NavLink to="/introduction">
                <span className="menu__steps">1</span>
                Introduction
              </NavLink>
            </li>
            <li>
              <NavLink to="/setup">
                <span className="menu__steps">2</span>
                Setup
              </NavLink>
            </li>
            <li>
              <NavLink to="/appshell">
                <span className="menu__steps">3</span>
                App Shell
              </NavLink>
            </li>
            <li>
              <NavLink to="/serviceworker">
                <span className="menu__steps">4</span>
                Service Worker
              </NavLink>
            </li>
            <li>
              <NavLink to="/offline">
                <span className="menu__steps">5</span>
                Offline
              </NavLink>
            </li>
            <li>
              <NavLink to="/appLike">
                <span className="menu__steps">6</span>
                App Like
              </NavLink>
            </li>
            <li>
              <NavLink to="/finish">
                <span className="menu__steps">7</span>
                Finish
              </NavLink>
            </li>
          </ul>
          <div className="menu__author">
            <a href="https://github.com/orgs/code-kotis/people?utf8=%E2%9C%93&query=%20role%3Aowner" target="_blank" rel="noopener">Authors</a>
          </div>
        </div>
        <div className="menu__overlay" onClick={this.hideMenu}></div>
      </div>
    );
  }
}

export default Menu;

Menu.defaultProps = {
  isMenuOpen: false
};