Freecodecamp: Refactor menu to use refs

[ojeytonwilliams]

As discussed in https://github.com/freeCodeCamp/freeCodeCamp/pull/36956#pullrequestreview-296784289 the menu uses a mixture of ids and refs to figure out if a click should close the menu or not.

This issue is just a reminder that we were considering refactoring handleClickOutside as follows:

  handleClickOutside(event) {
    if (
      this.state.displayMenu &&
      this.menuButtonRef.current &&
      !this.menuButtonRef.current.contains(event.target) &&
      this.searchBarRef.current &&
      !this.searchBarRef.current.contains(event.target)
    ) {
      this.toggleDisplayMenu();
    }
  }

[raisedadead]

You are taking this up or you want to open this for contributions with guidelines?

[ojeytonwilliams]

It's not something I'd recommend to complete beginners, but if someone's familiar with React it shouldn't too hard. So, I'd say it's not a good first issue, but sure.

If no-one takes it, I'll get around to it at some point!

[ojeytonwilliams]

While we're at it, I'd like to get rid of forwardRef and just pass props like nameOfRef. I can't think of reason why we'd need forwardRef, so, unless I'm missing something, they might as well go.