all files / components/ NavBar.js

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
3×
 
7×
 
7×
 
 
 
 
16×
 
 
16×
 
 
8×
 
 
 
 
 
 
22×
6×
 
 
 
 
 
18×
 
 
 
 
 
 
 
 
 
 
 
 
16×
 
 
 
 
 
 
 
 
 
 
 
 
 
1×
 
 
1×
 
 
 
 
 
 
import React from 'react';IEE
import PropTypes from 'prop-types';
import { Link } from 'react-router';EIII
 
class NavBar extends React.Component {
  componentDidMount() {
    // some logic here - we only test if the method is called
  }
  getPrimary(id) {
    const navbarPrimary = (this.props.primary === id) ?
    ('primary-nav__item js-nav hide--mobile old-ie--display-block primary-nav__item--active') :
    ('primary-nav__item js-nav hide--mobile old-ie--display-block');
    return navbarPrimary;
  }
  render() {
    return (
      <div className="primary-nav print--hide">
        <nav>
          <div className="wrapper">
            <ul className="primary-nav__list">
              {
                this.props.navBarItems.map((item) => {
                  if (item.items) {
                    return (
                      <li key={item.text} className="primary-nav__item js-nav js-expandable ">
                        <a className="primary-nav__link col col--md-8 col--lg-10" href={item.link} aria-haspopup="true">{item.text}</a>
                        <ul className="primary-nav__child-list col col--md-16 col--lg-20 js-expandable__content js-nav-hidden jsEnhance" aria-expanded="false" aria-label="submenu">
                          {
                            item.items.map((subItem) => {
                              return (
                                <li key={subItem.text} className="primary-nav__child-item  js-expandable__child">
                                  <Link className="primary-nav__child-link" to={subItem.link}>
                                    {subItem.text}
                                  </Link>
                                </li>
                              );
                            })
                          }
                        </ul>
                      </li>
                    );
                  }
                  return (
                    <li key={item.text} className={this.getPrimary(item.link)}>
                      <Link className="primary-nav__link col col--md-7 col--lg-9" to={item.link}>
                        {item.text}
                      </Link>
                    </li>
                  );
                })
              }
            </ul>
          </div>
        </nav>
      </div>
    );
  }
}
 
NavBar.propTypes = {
  primary: PropTypes.string.isRequired,
  navBarItems: PropTypes.array.isRequired,
};
 
export default NavBar;