Web-Frontend/client/src/components/Canvas/CanvasComponents/SettingsButton.jsx

import { IconButton, Menu, Portal } from "@chakra-ui/react";
import { IoIosArrowBack } from "react-icons/io";
import { FiSettings } from "react-icons/fi";
import WidgetMenu from "./WidgetMenu";

export function SettingsButton({ view, onEditWidgets, appendWidget}) {  
  const triggerItem = (
  <> 
    <Menu.TriggerItem> 
      <IoIosArrowBack /> Add Widget
    </Menu.TriggerItem> 
  </>);

  const WidgetMenuProps = { view, appendWidget, triggerItem }
  
  return (
    <Menu.Root>
      <Menu.Trigger asChild >
          <IconButton variant="ghost" size="md" borderRadius="xl">
            <FiSettings />
          </IconButton>
      </Menu.Trigger>
      
      <Portal>
        <Menu.Positioner>
          <Menu.Content>
            <WidgetMenu {...WidgetMenuProps}/>
            <Menu.Item value="edit" onClick={onEditWidgets} >
              Edit Widgets
            </Menu.Item>
          </Menu.Content>
        </Menu.Positioner>
      </Portal>
    </Menu.Root>
  );
}