CODEWITHSUNDEEP
javascriptreactjshamburger-menu
Ryan Brooks
Ryan Brooks

Reputation: 101

How to set a hamburger menu using React-Hamburger-Menu?

I am trying to make a menu that uses CSS3 to fade in and out when you click on the hamburger menu. I am using the react-hamburger-menu.

Although I can't figure out how to use the handleClick function and how to make it that when you click the menu button, or any of the links it triggers the toggle on the className.

I'm using the Gatsby react starter if that matters...

Here's what I have coded so far

import { Link } from "gatsby"
import PropTypes from "prop-types"
import React from "react"
import './Header.css'
import { HamburgerMenu } from "react-hamburger-menu";

handleClick() {
  this.setState({
      open: !this.state.open
  });
}

const Header = ({ siteTitle }) => (
  <div className="Header">
    <div className="HeaderGroup">
      <Link to="/" className="logo"><img src={require('../../images/logo.svg')} width="70" alt="Ryan B. Designs"/></Link>
      <HamburgerMenu 
        isOpen={this.state.open}
        menuClicked={this.handleClick.bind(this)}
        width={18}
        height={15}
        strokeWidth={1}
        rotate={0}
        color='black'
        borderRadius={0}
        animationDuration={0.5}
      />
    </div>
    <div className={"MainNavigation "  + (this.state.open ? 'show' : 'hidden')}>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About Me</Link></li>
        <li><Link to="/contact">Contact</Link></li>
      </ul>
    </div>
  </div>
)

Header.propTypes = {
  siteTitle: PropTypes.string,
}

Header.defaultProps = {
  siteTitle: ``,
}

export default Header

What I want to happen is when I click the hamburger button, the menu fades in, and when you click the close button or one of the links, the menu fades out using CSS3.

Upvotes: 1

Views: 873

Answers (1)

Derek Nguyen
Derek Nguyen

Reputation: 11577

Beside the syntax error @JaromandaX pointed out in the comment, you're using setState in a function component. As it is right now, this doesn't have a setState, it's pointing to the module itself I believe. It should be point to a React class component that has state initiated:

class MyComponent extends React.Component {
  // gatsby default environment supports class properties
  state = {
      isOpen: false,
    }
  handleClick = () => this.setState({ ... }) // this is now MyComponent
  render() {
    return (...)
  }
}

or you can use useState hook.

Upvotes: 1

Related Questions