title: show and hide associated sub menu when particular menu is clicked
body: <p>I am designing a responsive mega navigation bar using reactjs. It's working for desktop device but on mobile view, I could not able to show or hide sub menu when its associated parent menu is clicked. This is what I am trying to do</p>
  <pre><code>const menus = [
    { id: 1, name: &quot;Home&quot;, link: &quot;/&quot; },
    {
      id: 3,
      name: &quot;New&quot;,
      children: [{ id: 1, name: &quot;New Arrival&quot;, link: &quot;/new&quot; }]
    },
    {
      id: 2,
      name: &quot;Shop&quot;,
      children: [
        {
          id: 1,
          name: &quot;Men's Fashion&quot;,
          children: [
            {
              id: 1,
              name: &quot;Polo&quot;,
              link: &quot;/polo&quot;
            },
            { id: 2, name: &quot;Tees&quot;, link: &quot;/tees&quot; }
          ]
        },
        {
          id: 2,
          name: &quot;Women Fashion&quot;,
          children: [
            {
              id: 1,
              name: &quot;Shorts&quot;,
              link: &quot;/shorts&quot;
            },
            {
              id: 2,
              name: &quot;Tees&quot;,
              link: &quot;/women/tees&quot;
            }
          ]
        }
      ]
    }
  ];
  
  const MegaMenu = () =&gt; {
    const [active, setActive] = React.useState(false);
    const [toggle, setToggle] = React.useState(false);
    const [activeMenuName, setActiveMenuName] = React.useState(&quot;&quot;);
    const handleMainMenuClick = () =&gt; {
      setActive(!active);
    };
    const toggleDrawer = () =&gt; {
      setToggle(!toggle);
    };
    const hideSubMenu = () =&gt; {
      setActive(!active);
    };
    const handleMenuName = (menuName) =&gt; {
      setActiveMenuName(menuName);
    };
    return (
      &lt;&gt;
        &lt;header className=&quot;header&quot;&gt;
          &lt;div className=&quot;container&quot;&gt;
            &lt;div className=&quot;row v-center&quot;&gt;
              &lt;div className=&quot;header-item item-left&quot;&gt;
                &lt;div className=&quot;logo&quot;&gt;
                  &lt;a href=&quot;#&quot;&gt;Brand&lt;/a&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              {/* menu start here */}
              &lt;div className=&quot;header-item item-center&quot;&gt;
                &lt;div
                  className={`menu-overlay ${toggle ? &quot;active&quot; : &quot;&quot;}`}
                  onClick={toggleDrawer}
                &gt;&lt;/div&gt;
                &lt;nav className={`menu ${toggle ? &quot;active&quot; : &quot;&quot;}`}&gt;
                  &lt;div className={`mobile-menu-head ${toggle ? &quot;active&quot; : &quot;&quot;}`}&gt;
                    &lt;div className=&quot;go-back&quot; onClick={hideSubMenu}&gt;
                      Back
                    &lt;/div&gt;
                    &lt;div className=&quot;current-menu-title&quot;&gt;{activeMenuName}&lt;/div&gt;
                    &lt;div className=&quot;mobile-menu-close&quot; onClick={toggleDrawer}&gt;
                      &amp;times;
                    &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;ul className=&quot;menu-main&quot; onClick={handleMainMenuClick}&gt;
                    {menus.map((menu) =&gt; {
                      return (
                        &lt;li
                          key={menu.id}
                          className={
                            menu.children ? &quot;menu-item-has-children&quot; : &quot;&quot;
                          }
                          onClick={() =&gt; handleMenuName(menu.name)}
                        &gt;
                          {menu.link ? (
                            &lt;a href={menu.link}&gt;
                              {menu.name} &lt;i class=&quot;fa fa-angle-down&quot;&gt;&lt;/i&gt;
                            &lt;/a&gt;
                          ) : (
                            &lt;a href=&quot;#&quot;&gt;{menu.name}&lt;/a&gt;
                          )}
                          {menu.children &amp;&amp; (
                            &lt;div
                              className={`sub-menu mega-menu mega-menu-column-4 ${
                                active ? &quot;active&quot; : &quot;&quot;
                              }`}
                            &gt;
                              {menu.children.map((child) =&gt; {
                                return (
                                  &lt;div
                                    className=&quot;list-item text-center&quot;
                                    key={child.id}
                                  &gt;
                                    &lt;a href=&quot;#&quot;&gt;
                                      &lt;img src=&quot;img/p1.jpg&quot; alt=&quot;new Product&quot; /&gt;
                                      &lt;h4 className=&quot;title&quot;&gt;{child.name}&lt;/h4&gt;
                                    &lt;/a&gt;
                                  &lt;/div&gt;
                                );
                              })}
                            &lt;/div&gt;
                          )}
                        &lt;/li&gt;
                      );
                    })}
                  &lt;/ul&gt;
                &lt;/nav&gt;
              &lt;/div&gt;
              &lt;div className=&quot;header-item item-right&quot;&gt;
                &lt;a href=&quot;#&quot;&gt;
                  &lt;i className=&quot;fas fa-search&quot;&gt;&lt;/i&gt;
                &lt;/a&gt;
                &lt;a href=&quot;#&quot;&gt;
                  &lt;i className=&quot;far fa-heart&quot;&gt;&lt;/i&gt;
                &lt;/a&gt;
                &lt;a href=&quot;#&quot;&gt;
                  &lt;i className=&quot;fas fa-shopping-cart&quot;&gt;&lt;/i&gt;
                &lt;/a&gt;
                {/* mobile menu trigger */}
                &lt;div className=&quot;mobile-menu-trigger&quot; onClick={toggleDrawer}&gt;
                  &lt;span&gt;&lt;/span&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/header&gt;
      &lt;/&gt;
    );
  };
  
  export default MegaMenu;
  </code></pre>
  <p>I have a code on sandbox as well and here it is</p>
  <p><a href="https://codesandbox.io/s/weathered-resonance-9n2hr?file=/src/mega-menu/index.js:50-4734" rel="nofollow noreferrer">https://codesandbox.io/s/weathered-resonance-9n2hr?file=/src/mega-menu/index.js:50-4734</a></p>