fixed menu button not closing the drop down menu

Author: dentonwong

app/src/components/top/NavBar.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { Link } from 'react-router-dom';
 import Avatar from '@mui/material/Avatar';
 import Button from '@mui/material/Button';
@@ -26,11 +26,14 @@ const NavBar = () => {
   );
 
   const dispatch = useDispatch();
+  const menuButtonRef = useRef(null);
 
   useEffect(()=>{
     setProjectName(state.name)
   }, [state.name])//update the ProjectName after state.name changes due to loading projects
 
+
+
   const buttonContainerStyle = {
     display: 'flex',
     alignItems: 'center',
@@ -129,13 +132,15 @@ const NavBar = () => {
           style={moreVertButtonStyle}
           variant="contained"
           color="primary"
-          onClick={() => setDropMenu((prevDropMenu) => !prevDropMenu)}
+          onClick={() => setDropMenu(!dropMenu)}
+          ref={menuButtonRef}
         >
           <MoreVertIcon style={{ color: 'white' }} />
         </Button>
         <NavBarButtons
           dropMenu={dropMenu}
           setDropMenu={setDropMenu}
+          menuButtonRef={menuButtonRef}
           style={{ color: 'white' }}
         />
       </div>

app/src/components/top/NavBarButtons.tsx

@@ -302,8 +302,9 @@ function navbarDropDown(props) {
       const handleClick = (event) => {
         if (event.type === "click" &&
           (dropdownRef.current &&
-          !dropdownRef.current.contains(event.target)) || event.type === "message" && event.data === 'iframeClicked'
+          !dropdownRef.current.contains(event.target) && !props.menuButtonRef.current.contains(event.target)) || event.type === "message" && event.data === 'iframeClicked'
         ) {
+          //menuButtonRef is to ensure that handleClose does not get invoked when the user clicks on the menu dropdown button
           handleClose();
         }
       };
@@ -388,10 +389,11 @@ function navbarDropDown(props) {
             width="16"
             height="16"
             fill="currentColor"
-            className="bi bi-book"
+            className="bi bi-bag-check"
             viewBox="0 0 16 16"
           >
-            <path d="M1 2.828c.885-.37 2.154-.769 3.388-.893 1.33-.134 2.458.063 3.112.752v9.746c-.935-.53-2.12-.603-3.213-.493-1.18.12-2.37.461-3.287.811V2.828zm7.5-.141c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492V2.687zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783z" />
+            <path fillRule="evenodd" d="M10.854 8.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 0 1 .708-.708L7.5 10.793l2.646-2.647a.5.5 0 0 1 .708 0z"/>
+            <path d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1zm3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4h-3.5zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5z"/>
           </svg>
         </button>
       </Link>