Fix/navbar body click resolved (#609)

* Update .gitignore to exclude venv/ directory

* On clicking outside the navbar it closes as well as clicking on the nest logo it closes

* Updated some changes

* Fix trailing whitespace by pre-commit

* Fix mixed line endings

---------

Co-authored-by: Kate Golovanova <[email protected]>

frontend/src/components/Header.tsx

@@ -22,17 +22,35 @@ export default function Header() {
         setMobileMenuOpen(false)
       }
     }
+
+    const handleOutsideClick = (event) => {
+      const navbar = document.getElementById('navbar-sticky')
+      const sidebar = document.querySelector('.fixed.inset-y-0')
+      if (
+        mobileMenuOpen &&
+        navbar &&
+        !navbar.contains(event.target) &&
+        sidebar &&
+        !sidebar.contains(event.target)
+      ) {
+        setMobileMenuOpen(false)
+      }
+    }
+
     window.addEventListener('resize', handleResize)
+    window.addEventListener('click', handleOutsideClick)
+
     return () => {
       window.removeEventListener('resize', handleResize)
+      window.removeEventListener('click', handleOutsideClick)
     }
-  }, [])
+  }, [mobileMenuOpen])
 
   return (
     <header className="fixed inset-x-0 top-0 z-50 w-full max-w-[100vw] bg-owasp-blue shadow-md dark:bg-slate-800">
       <div className="flex h-16 w-full items-center px-4 max-md:justify-between" id="navbar-sticky">
         {/* Logo */}
-        <NavLink to="/">
+        <NavLink to="/" onClick={() => setMobileMenuOpen(false)}>
           <div className="flex h-full items-center">
             <img
               src={'/img/owasp_icon_white_sm.png'}
@@ -110,7 +128,7 @@ export default function Header() {
       >
         <div className="space-y-1 px-2 pb-3 pt-2">
           {/* Logo */}
-          <NavLink to="/">
+          <NavLink to="/" onClick={() => setMobileMenuOpen(false)}>
             <div className="flex h-full items-center">
               <img
                 src={'/img/owasp_icon_white_sm.png'}