Further improve menu toggling

You should be able to dismiss the menu by clicking the button again. Now you can.

components/Header/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { useSnapshot } from 'valtio'
 import { deleteCookie } from 'cookies-next'
 import { useRouter } from 'next/router'
@@ -40,7 +40,7 @@ const Header = () => {
   }
 
   function onClickOutsideMenu() {
-    setOpen(!open)
+    setOpen(false)
   }
 
   function copyToClipboard() {

components/HeaderMenu/index.tsx

@@ -36,16 +36,21 @@ const HeaderMenu = (props: Props) => {
 
   useEffect(() => {
     const handleClickOutside = (event: Event) => {
+      const target = event.target instanceof Element ? event.target : null
+      const isButton = target && target.closest('.Button.Active')
+
       if (
         ref.current &&
-        event.target instanceof Element &&
-        !ref.current.contains(event.target) &&
+        target &&
+        !ref.current.contains(target) &&
+        !isButton &&
         props.open
       ) {
         props.onClickOutside()
       }
     }
     document.addEventListener('click', handleClickOutside, true)
+
     return () => {
       document.removeEventListener('click', handleClickOutside, true)
     }