How can I get navigation to stay appeared on desktop? (ReactJS)

Question

I created a mobile menu when every I display the navigation on the desktop it disappeared. I'm using the same JS effect that I'm using to create the dropdown for one of the nav links. I don't want the navigation to disappeared when every I click on it.

How can I have the navigation appeared on desktop screen?

View GIF Link

This Code Below:

import React from 'react';
import { Link } from 'react-router-dom';
import Dropdown from '../dropdowns/dropdown.js';
import hamburger from "../images/menu.svg";

class MobileDropdown extends React.Component {

constructor(){
 super();

 this.state = {
       displayMenu: false,
};

  this.showDropdownMenu = this.showDropdownMenu.bind(this);
  this.hideDropdownMenu = this.hideDropdownMenu.bind(this);

};

  showDropdownMenu(event) {
        event.preventDefault();
        this.setState({ displayMenu: true }, () => {
        document.addEventListener('click', this.hideDropdownMenu);
    });
  }

  hideDropdownMenu() {
      this.setState({ displayMenu: false }, () => {
      document.removeEventListener('click', this.hideDropdownMenu);
    });

  }


render() {
    return (
        <div className="FlexContainer NavbarContainer">

                <div className="mobilecontainer LeftNav">
                    <h2 className="BrandName LeftNav mobileboxmenu inline">Kommonplaces</h2>
                    <div className="hamburger inline" onClick={this.showDropdownMenu}><img alt="menubtn" src={hamburger}></img></div>
                </div>
                { this.state.displayMenu ? (

                <> 
                  <ul className="NavBar">
                    <Dropdown/>    
                    <li className="RightNav"><Link to="/">Host Your Space</Link></li>
                    <li className="RightNav"><Link to="/">About Us</Link></li>
                    <li className="RightNav"><Link to="/">Contact Us</Link></li>
                    <li className="RightNav"><Link to="/">Sign Up</Link></li>
                    <li className="RightNav"><Link to="/">Login</Link></li>
                  </ul>
                </>

                ):
              (
            null
          )
        }
       </div>

    );
  }
}

export default MobileDropdown;

score 1 · Accepted Answer · answered Dec 18 '19 at 15:42

1

It's because you have this line in the showDropdownMenu method:

document.addEventListener('click', this.hideDropdownMenu)

It looks like you want this so you can toggle open and close states of the menu in mobile breakpoints.

But the problem is when you go to a desktop size though you are hiding the button the component and its click handler are still in the DOM. So when you click the menu items disappear.

Relative to your problem and React as a whole I would look into not adding event listeners like you would in vanilla JS and instead toggle the open close with React's setState like so this.state.displayMenu = !this.state.displayMenu which will toggle true/false values for the state object.

On a larger level though I would look into how you are organizing your components. If you have a mobile menu component I would look into having a desktop menu component and conditionally render each based on if you in a mobile breakpoint or not.

answered Dec 18 '19 at 15:42

gwar9

1,082
1
11
28

Do you have any resources for me to look into, please – bpdg Dec 18 '19 at 15:48
@bpdg of course I think the React docs are a good place to start. Dont be afraid to make smaller components. One for your mobile menu that has a click handler and its layout and one for your desktop menu with its layout. In your parent component toggle between the two components based on if you are in a mobile state or not. https://reactjs.org/docs/handling-events.html (toggle example) https://reactjs.org/docs/conditional-rendering.html – gwar9 Dec 18 '19 at 16:06
I just want to know where do I need to started at do I redo everything – bpdg Dec 18 '19 at 16:12
@bpdg check out this answer. I would start here as it gives you the pattern to check if you are on a mobile device and conditionally render your components https://stackoverflow.com/questions/41478875/creating-different-mobile-layout-for-a-component-in-reactjs Then I would refer back to the react documentation on event handling to handle your toggle for your mobile desktop menu. – gwar9 Dec 18 '19 at 16:30
But not going to be different from Mobile or Desktop just going to stack on top of each other in mobile. – bpdg Dec 18 '19 at 17:04
@bpdg read this post. I think by virtue of your mobile menu having a different UI and a click handler that toggles its visibility that it should be a separate component. As I mentioned dont try and jam functionality into components where you can break them out. https://medium.com/the-andela-way/understanding-react-components-37f841c1f3bb – gwar9 Dec 18 '19 at 17:08
So, this what I did so far to start setup the components --> https://gyazo.com/0965cef1fd3b33d52d9b91985515e3e0 – bpdg Dec 18 '19 at 17:27

How can I get navigation to stay appeared on desktop? (ReactJS)

1 Answers1