title: Hiding Sidebar Component on Outside Click
body: <p><strong>Doing my best to hide this sidebar when a user clicks anywhere outside of the focused area.</strong>
  Currently, when I click outside, the sidebar remains open. If I click in an area within the sidebar that <em>isnt</em> a link, the sidebar closes. Just trying to recreate that effect elsewhere in the app.
  Have no idea to implement this in React/JS</p>
  <p>Thank you for any help you can send my way.</p>
  <pre><code>import React, { useState } from 'react';
  import * as FaIcons from 'react-icons/fa';
  import * as AiIcons from 'react-icons/ai';
  import { Link } from 'react-router-dom';
  import { NavbarData } from './NavbarData';
  import '../styles/Navbar.css';
  import { IconContext } from 'react-icons';
  import onClickOutsideHOC from &quot;react-onclickoutside&quot;; //&lt;-- Should I be using this?
  function Navbar() {
    const [sidebar, setSidebar] = useState(false);
  
    const showSidebar = () =&gt; setSidebar(!sidebar);
    const hideSidebar = () =&gt; setSidebar(onClickOutsideHOC()); //&lt;-- Should I be using this?
    return (
      &lt;&gt;
        &lt;IconContext.Provider value={{ color: '#fff' }}&gt;
          &lt;div className='navbar'&gt;
            &lt;Link to='#' className='menu-bars'&gt;
              &lt;FaIcons.FaBars onClick={showSidebar} /&gt;
            &lt;/Link&gt;
          &lt;/div&gt;
          &lt;nav className={sidebar ? 'nav-menu active' : 'nav-menu'}&gt;
            &lt;ul className='nav-menu-items' onClick={showSidebar}&gt;
              &lt;li className='navbar-toggle'&gt;
                &lt;Link to='#' className='menu-bars'&gt;
                  &lt;AiIcons.AiOutlineClose /&gt;
                &lt;/Link&gt;
              &lt;/li&gt;
              {NavbarData.map((item, index) =&gt; {
                return (
                  &lt;li key={index} className={item.cName}&gt;
                    &lt;Link to={item.path}&gt;
                      {item.icon}
                      &lt;span&gt;{item.title}&lt;/span&gt;
                    &lt;/Link&gt;
                  &lt;/li&gt;
                );
              })}
            &lt;/ul&gt;
          &lt;/nav&gt;
  
  
  //Commented Out My Attempt Below
  
   {/*      &lt;nav&gt;
            &lt;nav className={sidebar ? 'nav-menu inactive' : 'nav-menu'}&gt;
              &lt;ul className='nav-menu-items' onClick={hideSidebar}&gt;
                &lt;li className='navbar-toggle'&gt;
                  &lt;Link to='#' className='menu-bars'&gt;
                    &lt;AiIcons.AiOutlineClose /&gt;
                  &lt;/Link&gt;
                &lt;/li&gt;
                {NavbarData.map((item, index) =&gt; {
                  return (
                      &lt;li key={index} className={item.cName}&gt;
                        &lt;Link to={item.path}&gt;
                          {item.icon}
                          &lt;span&gt;{item.title}&lt;/span&gt;
                        &lt;/Link&gt;
                      &lt;/li&gt;
                  );
                })}
              &lt;/ul&gt;
            &lt;/nav&gt;
  
  
          &lt;/nav&gt;*/}
        &lt;/IconContext.Provider&gt;
      &lt;/&gt;
    );
  }
  
  export default Navbar;
  </code></pre>