1

I'm trying to create a hamburger menu within React using state and onClick, from scratch. I have no experience with React Hooks so am trying to avoid that. The solution I have right now works, but is slow and glitchy and I have a feeling the code is quite flawed.

I deployed it anyways to test it out in live, and it's not working well at all in mobile chrome browser (https://vigilant-leavitt-a88a0e.netlify.app/). (though at least the background-color works when inspecting on a browser at mobile dimensions).

Can anyone tell me what I'm doing wrong here, or how this could be cleaned up? I have app.js feeding props to header.js.

Thank you!

App.js

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      menuOpen: false
    };
  }

  componentDidMount() {
    this.setState({
      menuOpen: false
    });
  }
    

  handleMenuClick = () => {
    this.setState({ menuOpen: true });
  }

  handleCloseMenuClick = () => {
    this.setState({ menuOpen: false });
  }

  render() {
  return (
    <>
      <Router>
        <Header
          menuOpen={this.state.menuOpen}
          handleMenuClick={this.handleMenuClick}
          handleCloseMenuClick={this.handleCloseMenuClick} />
        <Switch>
          <Route path="/resources"><Resources /></Route>
          <Route path="/team"><Team /></Route>
          <Route path="/faq"><Faq /></Route>
          <Route path="/fees"><Fees /></Route>
          <Route path="/"><Home /></Route>
        </Switch>
        <Footer />
      </Router>
      </>
  );
}
}

Header.js

<div className="header__navburger">
                    {props.menuOpen === false ?
                    (<img
                            className="header__hamburger-icon"
                            alt="Menu"
                        src={menuicon}
                        onClick={() => props.handleMenuClick()}
                        />) :
                        (<div className="header__navburger-close">
                            <img
                            className="header__close-icon"
                            alt="Close Menu"
                            src={closeicon}
                            onClick={() => props.handleCloseMenuClick()}
                            />
                            <nav className="header__nav-list"> 
                                <Link to={`/home`} className="header__nav-link"
                                onClick={() => props.handleCloseMenuClick()}>Home</Link>
                                <Link to={`/resources`} className="header__nav-link"
                                onClick={() => props.handleCloseMenuClick()}>Patient Resources</Link>
                                <Link to={`/team`} className="header__nav-link"
                                onClick={() => props.handleCloseMenuClick()}>Meet the Team</Link>
                                <Link to={`/faq`} className="header__nav-link"
                                onClick={() => props.handleCloseMenuClick()}>FAQ</Link>
                                <Link to={`/fees`} className="header__nav-link"
                                onClick={() => props.handleCloseMenuClick()}>Fees</Link> 
                            </nav>
                            </div>
                        )}
                </div>
shelbz
  • 15
  • 1
  • 3
  • Could you explain "is slow and glitchy and I have a feeling the code is quite flawed"? I looked at your site and the menu seemed to work just fine. – machineghost May 20 '21 at 21:26
  • sure, thanks for following up! When I click the menu icon to open it, it takes a second for the close icon to show up, so when it does the whole menu shifts down a second later. In the live environment on chrome mobile app, the background-color doesn't show up at all – shelbz May 20 '21 at 21:31
  • Maybe some CSS you have is to blame? I don't see any cause of that in the code you've shown. Also, if you want "fancier" opening/closing of your menu, you might want to look into CSS Animations, eg. https://stackoverflow.com/questions/17301282/transitioning-between-open-close-in-details-element (but again, I didn't see any issues, and the code you're showing should just hide/close your menu, as expected). – machineghost May 20 '21 at 21:33
  • Also, when you say "In the live environment on chrome mobile app, the background-color doesn't show up at all" do you mean when you use the "Devices" feature of the Chrome Developer Tools, or "live" on an actual Android phone? If it's the former, keep in mind the dev tools device simulator is only an emulator, ie. an approximation. Just because it does something glitchy doesn't mean an *actual* device will. – machineghost May 20 '21 at 21:36
  • Okay, thanks, I'll look into the CSS more! Unfortunately it's not working on the actual chrome app on my iPhone, but it is working in the device simulator. – shelbz May 20 '21 at 21:39
  • I was thinking it had something to do with this code as the CSS is working fine on the rest of the site – shelbz May 20 '21 at 21:41

1 Answers1

0

Did you mean icons of humburger menu changing slowly and glitchy? I've looked at the site and menu looks quite good for me.

First of all, there is no need in setState in your componentDidMount() as you should have the state set by this moment in constructor where initialization happens. This would force rendering the component twice with same state and be the reason that something works a little slow.

Second, do you use images for humburger menu icons? Downloading images takes some time as well, and I think that's why when clicking burger menu I don't see menu cross just in time. There are other ways to make menu like this, for exapmle it may be just

<div class="burger-menu">
   <span></span>
</div>

and styles for span, span::before and ::after for white lines. You can also transform these lines to make a cross of it. I suggest this solution would allow things to work a little faster

Michelle
  • 26
  • 4