YourWishes/domsPlace
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Cleaned Header and HamburgerMenu code.

Browse Source
This commit is contained in:
Dominic Masters
2018-10-23 18:00:39 +11:00
parent fa24078037
commit 4cbecbb26a
2 changed files with 18 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/components/header/Header.jsx
View File

@ -24,7 +24,7 @@
import React from 'react'; import React from 'react';
import Navbar from '@components/nav/navbar/Navbar'; import Navbar from '@components/nav/navbar/Navbar';
export default function(props) { export default (props) => {
return ( return (
<header {...props} role="banner"> <header {...props} role="banner">
<Navbar /> <Navbar />

35
public/components/nav/menu/HamburgerMenu.jsx
View File

@ -24,14 +24,18 @@
import React from 'react'; import React from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { NavLink } from 'react-router-dom'; import { NavLink } from 'react-router-dom';
import Language from '@public/language/Language'; import Language from '@public/language/Language';
import * as MenuActions from '@public/actions/MenuActions'; import * as MenuActions from '@public/actions/MenuActions';
const HamburerMenuItem = function(props) { const HamburerMenuItem = (props) => {
let { lang, link, className } = props;
className = className || "";
return ( return (
<li className={"c-hamburger-menu__link c-hamburger-menu__link--"+props.link}> <li {...props} className={`c-hamburger-menu__link c-hamburger-menu__link--${link} ${className}`}>
<NavLink to={ props.to } className="c-hamburger-menu__link-link"> <NavLink to={ props.to } className="c-hamburger-menu__link-link">
{ Language.get(props.lang) } { Language.get(lang) }
</NavLink> </NavLink>
</li> </li>
); );
@ -43,43 +47,38 @@ class HamburgerMenu extends React.Component {
} }
render() { render() {
let { open, className, toggleMenu } = this.props;
let clazz = "c-hamburger-menu"; let clazz = "c-hamburger-menu";
if(this.props.open) clazz += " is-open"; if(open) clazz += " is-open";
if(this.props.className) clazz += " " + this.props.className; if(className) clazz += ` ${className}`;
return ( return (
<div className={clazz}> <div className={clazz}>
<button <button type="button" className="c-hamburger-menu__button" onClick={toggleMenu}>
type="button" <img src={ require('@assets/images/icons/hamburger.svg') } className="c-hamburger-menu__icon" />
className="c-hamburger-menu__button"
onClick={this.props.toggleMenu}
>
<img
src={ require('./../../../assets/images/icons/hamburger.svg') }
className="c-hamburger-menu__icon"
/>
</button> </button>
<div className="c-hamburger-menu__menu"> <nav className="c-hamburger-menu__menu">
<ul className="c-hamburger-menu__links"> <ul className="c-hamburger-menu__links">
<HamburerMenuItem to="/" lang="navbar.home" link="home" /> <HamburerMenuItem to="/" lang="navbar.home" link="home" />
<HamburerMenuItem to="/contact" lang="navbar.contact" link="contact" /> <HamburerMenuItem to="/contact" lang="navbar.contact" link="contact" />
</ul> </ul>
</div> </nav>
</div> </div>
); );
} }
} }
const mapStateToProps = function(state) { const mapStateToProps = (state) => {
return { return {
open: state.menu.open, open: state.menu.open,
language: state.language.code language: state.language.code
} }
} }
const mapDispatchToProps = function(dispatch) { const mapDispatchToProps = (dispatch) => {
return { return {
toggleMenu: function(theme) { toggleMenu: function(theme) {
dispatch(MenuActions.toggleMenu()); dispatch(MenuActions.toggleMenu());