131 lines
2.9 KiB
JavaScript
131 lines
2.9 KiB
JavaScript
/*
|
|
* Menu
|
|
* Simple expandable menu.
|
|
*
|
|
* Dependencies:
|
|
* styles/components/_menu.scss
|
|
*
|
|
* Version:
|
|
* 1.0.0 - 2018/03/01
|
|
*/
|
|
|
|
import React from 'react';
|
|
|
|
import FontAwesomeIcon from '@fortawesome/react-fontawesome'
|
|
import { NavLink } from 'react-router-dom';
|
|
import { faBars } from '@fortawesome/fontawesome-free-solid'
|
|
import { connect } from 'react-redux';
|
|
import Language from './../../language/Language';
|
|
|
|
const MenuItems = {
|
|
"navbar.contact.title": {
|
|
"navbar.contact.about": "/about",
|
|
"navbar.contact.programming": "/about/programming",
|
|
"navbar.contact.api": "/about/api",
|
|
"navbar.contact.other": "/about/other",
|
|
"navbar.contact.contact": "/contact"
|
|
},
|
|
"navbar.legal.title": {
|
|
"navbar.legal.privacy": "/privacy-policy"
|
|
}
|
|
}
|
|
|
|
const MenuGroup = function(props) {
|
|
return (
|
|
<nav className="c-menu__group">
|
|
<h1 className="c-menu__group-title">{props.title}</h1>
|
|
{props.children}
|
|
</nav>
|
|
)
|
|
}
|
|
|
|
const MenuItem = function(props) {
|
|
return (
|
|
<NavLink className="c-menu__item" to={props.to} onClick={props.onClick}>
|
|
{props.children}
|
|
</NavLink>
|
|
)
|
|
}
|
|
|
|
|
|
class Menu extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
open: false
|
|
}
|
|
}
|
|
|
|
toggleMenu() {
|
|
this.setState({
|
|
open: !this.state.open
|
|
});
|
|
}
|
|
|
|
openMenu() {
|
|
this.setState({
|
|
open: true
|
|
});
|
|
}
|
|
|
|
closeMenu() {
|
|
this.setState({
|
|
open: false
|
|
})
|
|
}
|
|
|
|
render() {
|
|
if(this.state.open) {
|
|
document.body.classList.add('is-menu-open');
|
|
} else {
|
|
document.body.classList.remove('is-menu-open');
|
|
}
|
|
|
|
let menu = [];
|
|
let keys = Object.keys(MenuItems);
|
|
for(var i = 0; i < keys.length; i++) {
|
|
let k = keys[i];
|
|
let sKeys = Object.keys(MenuItems[k]);
|
|
let menuItems = [];
|
|
for(var x = 0; x < sKeys.length; x++) {
|
|
let sKey = sKeys[x];
|
|
console.log(sKey);
|
|
menuItems.push(<MenuItem to={MenuItems[k][sKey]} onClick={this.closeMenu.bind(this)} key={x+"-"+i}>{Language.get(sKey)}</MenuItem>)
|
|
}
|
|
menu.push(
|
|
<MenuGroup title={Language.get(k)} key={i}>
|
|
{menuItems}
|
|
</MenuGroup>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<nav className="c-menu__wrapper open">
|
|
<div className="c-menu">
|
|
<div className="c-menu__fix">
|
|
<div className={"c-menu__container" + (this.state.open === true ? " open": "")}>
|
|
<div className="c-menu__body">
|
|
<div className="c-menu__fix c-menu__groups">
|
|
{menu}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<button type="button" className="c-menu__button" onClick={this.toggleMenu.bind(this)}>
|
|
<FontAwesomeIcon icon={faBars} />
|
|
</button>
|
|
</nav>
|
|
)
|
|
}
|
|
}
|
|
|
|
const mapStateToProps = function(state) {
|
|
return {
|
|
code: state.language.code
|
|
}
|
|
}
|
|
|
|
export default connect(mapStateToProps)(Menu);
|