Update the header menu to pop up

src/Pages/IO_Management/EditIO/EditIOForm.jsx

@@ -12,13 +12,14 @@ import GlobalStateContext from "../../../Contexts/GlobalStateContext";
 import { useParams } from "react-router-dom";
 
 const FormField = ({ field, register, errors }) => {
-    const { label, name, type, placeHolder, options, width } = field;   
-
+  const { label, name, type, placeHolder, options, width } = field;
 
   return (
     <Box width={width}>
       <FormControl isInvalid={errors[name]}>
-        <FormLabel>{label}</FormLabel>
+        <FormLabel fontSize={"sm"} fontWeight={"400"}>
+          {label}
+        </FormLabel>
         {type === "text" && (
           <Input
             placeholder={placeHolder}

src/Pages/IO_Management/ViewIO/ViewIOdataHeader.jsx

@@ -19,13 +19,10 @@ import {
   useDisclosure,
 } from "@chakra-ui/react";
 import {
-  Drawer,
-  DrawerBody,
-  DrawerFooter,
-  DrawerHeader,
-  DrawerOverlay,
-  DrawerContent,
-  DrawerCloseButton,
+  MenuItemOption,
+  MenuGroup,
+  MenuOptionGroup,
+  MenuDivider,
 } from "@chakra-ui/react";
 import header from "../../../assets/IOheader.png";
 import { HiDotsVertical } from "react-icons/hi";
@@ -125,10 +122,57 @@ const ViewIOdataHeader = () => {
           >
             <HiDotsVertical className="rubix-text-dark fs-6" />
           </MenuButton>
+          <MenuList>
+            <Box display={"grid"} alignContent={"left"} justifyItems={"start"}>
+              <MenuItem _hover={hover} _focus={{ bg: "transparent" }}>
+                <Button onClick={onInvestmentOpen} bg={bg} _hover={hover}>
+                  Amount Invested
+                </Button>
+              </MenuItem>
+
+              <Divider />
+              <MenuItem _hover={hover}>
+                <Button onClick={onFeesOpen} bg={bg} _hover={hover}>
+                  Fees & Expenses
+                </Button>
+              </MenuItem>
+
+              <Divider />
+              <MenuItem _hover={hover}>
+                <Button onClick={onDistSponsorOpen} bg={bg} _hover={hover}>
+                  Distribution from Sponsors
+                </Button>
+              </MenuItem>
+
+              <Divider />
+
+              <MenuItem _hover={hover}>
+                <Button onClick={onDistInvestorOpen} bg={bg} _hover={hover}>
+                  Distribution To Investors
+                </Button>
+              </MenuItem>
+
+              <Divider />
+
+              <MenuItem _hover={hover}>
+                <Button onClick={onUpdateNavOpen} bg={bg} _hover={hover}>
+                  Update IO NAV
+                </Button>
+              </MenuItem>
+
+              <Divider />
+
+              <MenuItem _hover={hover}>
+                <Button onClick={onUpdateStatusOpen} bg={bg} _hover={hover}>
+                  Update IO Status
+                </Button>
+              </MenuItem>
+            </Box>
+          </MenuList>
         </Menu>
 
         {/* Drawer */}
-        <Drawer
+        {/* <Drawer
           isOpen={isOpen}
           placement="right"
           onClose={onClose}
@@ -199,9 +243,6 @@ const ViewIOdataHeader = () => {
                   Update IO Status
                 </Button>
                 <Divider />
-                {/* <Button variant="ghost" onClick={onClose} bg={bg}>
-                  Cancel
-                </Button> */}
               </Box>
             </DrawerBody>
 
@@ -211,7 +252,7 @@ const ViewIOdataHeader = () => {
               </Button>
             </DrawerFooter>
           </DrawerContent>
-        </Drawer>
+        </Drawer> */}
 
         {/* Modals */}
         <AmountInvested isOpen={isInvestmentOpen} onClose={onInvestmentClose} />