CODEWITHSUNDEEP
javascriptreactjs
ChronicLogic
ChronicLogic

Reputation: 352

How to close the menu when clicking on the document (EventListener)

I have been trying to add an EventListener to the document to close my menu, but it seems that none of the event.stopPropagation(); actually listen to me :/ can anyone give me a hand here? Please

import React, { Component } from 'react';
import { NavLink } from 'react-router-dom';
import "./header.css";

class Header extends Component {
    constructor(props) {
        super(props);
        this.state = {
            language : "en"
        }
    }

    openMenu = () => {
        let menuPaths = document.getElementById('menu');
        let hideAnimation = () => {
            menuPaths.classList.remove('animate-left');
            menuPaths.classList.add('animate-right');
        }
        let showAnimation = () => {
            menuPaths.classList.remove('animate-right');
            menuPaths.classList.add('animate-left');
        }
        menuPaths.classList.toggle('show');
        if(menuPaths.classList.contains('show')) {
            showAnimation();
        } else {
            hideAnimation();
        }
    } 

    render() {
        //user logged in? render nav. Else, render login/signup
        const userAction = (
            <div className='header_action'>
                <button className='header_action_signup orange-md-btn'>SIGN UP</button>
                <button className='header_action_login orange-md-btn'>LOGIN</button>
            </div>
        )

        return (
            <div className='header'>
                <div className="header_menu">
                    <img onClick={event => {
                        event.stopPropagation();
                        return this.openMenu(event);
                    }} src={require("./pictures/hamburger_menu.svg")}/>
                </div>
                <div className='header_paths' id="menu">
                    <NavLink to='/index/acceuil'>Home</NavLink>
                    <NavLink to='/index/how'>How does it work</NavLink>
                    <a href= {BLOG_URL + '/'+ this.state.language +'/'}>Blog</a>
                    <a href={BLOG_URL + '/media/'}>Media</a>
                    <NavLink to='/index/contact'>Contact Us</NavLink>
                    <a href={PUBLIC_MARKETPLACE}>Marketplace</a>
                    <a href="#">Fr</a>
                </div>
                <NavLink to='/index/acceuil' className='header_logo' >
                    <img src={require("./pictures/logo_march2.png")}/>
                </NavLink>
                {userAction}
            </div>
        )
    }
}

export default Header;

this is what I tried adding in the openMenu function

document.addEventListener("click", function(event) {
            event.stopPropagation();
            document.removeEventListener("click", this.hideAnimation());
})

I also tried attaching the removeEventHandler on click in the componentDidMount, that didn’t work and I've tried numerous combinations of event.preventDefault();. I got it before using jQuery, however now that I have to use react, I don't want to mix is with jQuery. Any ideas?

Upvotes: 0

Views: 142

Answers (1)

Kyaw Siesein
Kyaw Siesein

Reputation: 725

  1. First of all, you need to do toggling your menu with state but not changing the DOM directly.
  2. From what I understand your question, you want to close the menu upon clicking outside of the menu. If it is so, you might wanna use react-onclickoutside and create handleClickOutside function and passed it to the HOC.

Upvotes: 2

Related Questions