title: Tailwind + Headless UI: Close Mobile Menu after click or clickaway
body: <p>I am using Tailwind + Headless UI to create a hamburger Menu bar on mobile to show the menu on click. But when I click on the menu it does not close automatically and creates a bad UX.</p>
  <pre><code>&lt;Disclosure
          as=&quot;nav&quot;
          className=&quot;fixed top-0 left-0 right-0 z-10 w-full bg-white shadow&quot;
      &gt;
          {({ open }) =&gt; (
              &lt;&gt;
                  &lt;div className=&quot;px-2 mx-auto max-w-7xl sm:px-4 lg:px-8&quot;&gt;
                      &lt;div className=&quot;flex justify-between h-16&quot;&gt;
                          &lt;div className=&quot;flex px-2 lg:px-0&quot;&gt;
                              &lt;div className=&quot;flex items-center flex-shrink-0&quot;&gt;
                                  &lt;Link href=&quot;/&quot;&gt;
                                      &lt;a className=&quot;relative block w-12 h-12&quot;&gt;
                                          &lt;Image
                                              src=&quot;/img/logo.png&quot;
                                              alt=&quot;NFT Volt Logo&quot;
                                              layout=&quot;fill&quot;
                                              className=&quot;w-auto h-6 lg:block&quot;
                                          /&gt;
                                      &lt;/a&gt;
                                  &lt;/Link&gt;
                              &lt;/div&gt;
                              &lt;div className=&quot;hidden lg:ml-6 lg:flex lg:space-x-1&quot;&gt;
                                  {navLinks.map((link) =&gt; (
                                      &lt;NavLink key={link.id} href={link.href}&gt;
                                          {link.name}
                                      &lt;/NavLink&gt;
                                  ))}
                              &lt;/div&gt;
                          &lt;/div&gt;
  
                          &lt;div className=&quot;flex items-center justify-center flex-1 px-2 lg:ml-6 lg:justify-end&quot;&gt;
                              &lt;div className=&quot;w-full max-w-lg lg:max-w-xs&quot;&gt;
                                  &lt;label htmlFor=&quot;search&quot; className=&quot;sr-only&quot;&gt;
                                      Search
                                  &lt;/label&gt;
                                  &lt;div className=&quot;relative&quot;&gt;
                                      &lt;div className=&quot;absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none&quot;&gt;
                                          &lt;SearchIcon
                                              className=&quot;w-5 h-5 text-gray-400&quot;
                                              aria-hidden=&quot;true&quot;
                                          /&gt;
                                      &lt;/div&gt;
                                      &lt;input
                                          id=&quot;search&quot;
                                          name=&quot;search&quot;
                                          className=&quot;block w-full py-2 pl-10 pr-3 leading-5 placeholder-gray-500 bg-white border border-gray-300 rounded-md focus:outline-none focus:placeholder-gray-400 focus:ring-1 focus:ring-blue-500 focus:border-blue-500 sm:text-sm&quot;
                                          placeholder=&quot;Search NFT projects...&quot;
                                          type=&quot;search&quot;
                                      /&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;Link href=&quot;/list-project&quot; passHref&gt;
                                  &lt;a
                                      href=&quot;#&quot;
                                      className=&quot;items-center hidden px-4 py-2 ml-6 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md shadow-sm lg:inline-flex hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 whitespace-nowrap&quot;
                                  &gt;
                                      List your Project
                                  &lt;/a&gt;
                              &lt;/Link&gt;
                          &lt;/div&gt;
                          &lt;div className=&quot;flex items-center lg:hidden&quot;&gt;
                              {/* Mobile menu button */}
                              &lt;Disclosure.Button className=&quot;inline-flex items-center justify-center p-2 text-gray-400 rounded-md hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500&quot;&gt;
                                  &lt;span className=&quot;sr-only&quot;&gt;
                                      Open main menu
                                  &lt;/span&gt;
                                  {open ? (
                                      &lt;XIcon
                                          className=&quot;block w-6 h-6&quot;
                                          aria-hidden=&quot;true&quot;
                                      /&gt;
                                  ) : (
                                      &lt;MenuIcon
                                          className=&quot;block w-6 h-6&quot;
                                          aria-hidden=&quot;true&quot;
                                      /&gt;
                                  )}
                              &lt;/Disclosure.Button&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;Disclosure.Panel className=&quot;lg:hidden&quot;&gt;
                      &lt;div className=&quot;pt-2 pb-3 space-y-1&quot;&gt;
                          {/* {navLinks.map((link) =&gt; (
                              &lt;NavLinkMobile
                                  key={link.id}
                                  href={link.href}
                                  onClick={() =&gt; {
                                      console.log('click');
                                      close();
                                  }}
                              &gt;
                                  {link.name}
                              &lt;/NavLinkMobile&gt;
                          ))} */}
  
                          {navLinks.map((link) =&gt; (
                              &lt;Disclosure.Button
                                  as={NavLinkMobile}
                                  key={link.id}
                                  href={link.href}
                              &gt;
                                  {link.name}
                              &lt;/Disclosure.Button&gt;
                          ))}
  
                          &lt;NavLinkMobile href=&quot;/list-project&quot;&gt;
                              List your Project
                          &lt;/NavLinkMobile&gt;
                      &lt;/div&gt;
                  &lt;/Disclosure.Panel&gt;
              &lt;/&gt;
          )}
      &lt;/Disclosure&gt;
  </code></pre>
  <p>Tried to add manually close on click but doesn't seem to work.</p>