Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
// Vendors
import React, { Fragment, Component } from "react";
// Components
import MenuItem from "../MenuItem/MenuItem.js";
// CSS
import "./Menu.css";
class Menu extends Component {
constructor (props) {
super(props);
this.state = {
menuVisible: false
};
this.showMenu = this.showMenu.bind(this);
this.hideMenu = this.hideMenu.bind(this);
}
showMenu () {
console.time("Menu open.");
this.setState({
menuVisible: true
}, () => {
console.timeEnd("Menu open.");
});
}
hideMenu () {
console.time("Menu close.");
this.setState({
menuVisible: false
}, () => {
console.timeEnd("Menu close.");
});
}
render() {
return (
<>
<div aria-hidden hidden={this.state.menuVisible ? false : "hidden"} id="menu-overlay" className="menu__overlay">&nbsp;</div>
<button id="menu-toggle" type="button" className="menu__toggle" onClick={this.showMenu}>
Menu
</button>
<nav id="menu" className={this.state.menuVisible ? "menu menu--visible" : "menu"}>
<ul className="menu__list">
<MenuItem key={1} href="/settings-account" label="Account Settings" />
<MenuItem key={2} href="/settings-profile" label="Profile Settings" />
<MenuItem key={3} href="/settings-feed" label="Feed Settings" />
<MenuItem key={4} href="/logout" label="Log Out" />
<MenuItem key={5} href="/login" label="Log In" />
<MenuItem key={6} href="/register" label="Register" />
// This is not a good pattern for a link that triggers behavior, but this component wasn't entirely
// finished at the time I did the testing for the writeup, so I slapped this in to get things working.
<li><a href="javascript:void(0);" onClick={this.hideMenu}>Close Menu</a></li>
</ul>
</nav>
</>
);
}
}
export default Menu;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.