Skip to content

Instantly share code, notes, and snippets.

@clecrois clecrois/Navbar.js
Last active Aug 7, 2019

Embed
What would you like to do?
NavBar component
class Navbar extends React.Component {
constructor() {
super();
this.state = {
opened: false
};
}
toggle() {
this.setState({
opened: !this.state.opened
});
}
render() {
return (
<nav className="Navbar">
<div className="navbar-home">
<a href=".">
<img
className="logo"
src="http://www.freelogovectors.net/wp-content/uploads/2016/12/airbnb_logo.png"
alt="Airbnb logo"
/>
</a>
<button className="toggle" onClick={this.toggle.bind(this)}>
<i
className={
"fas " + (this.state.opened ? "fa-angle-up" : "fa-angle-down")
}
/>
</button>
</div>
<ul
className={
"navbar-links " + (this.state.opened ? "opened" : "closed")
}
>
<li className="navbar-link">
<a href=".">Becoming a host</a>
</li>
<li className="navbar-link">
<a href=".">Help</a>
</li>
<li className="navbar-link">
<a href=".">Sign up</a>
</li>
<li className="navbar-link">
<a href=".">Log in</a>
</li>
</ul>
</nav>
);
}
}
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.