Add side bar transition animation between open and closed

client/src/components/SettingsButton.jsx

@@ -2,7 +2,7 @@
 // for 'Add Widget', 'Edit Widgets', and 'Remove Widgets'. This component will 
 // control settings related to the Widgets on the main canvas. 
 
-import { Button, Menu, Portal } from "@chakra-ui/react";
+import { Button, IconButton, Menu, Portal } from "@chakra-ui/react";
 import { FiSettings } from "react-icons/fi";
 
 export function SettingsButton(props) {
@@ -25,9 +25,9 @@ export function SettingsButton(props) {
         // This uses Chakra's built in menu component
         <Menu.Root>
             <Menu.Trigger asChild>
-                <Button variant="ghost" size="md">
+                <IconButton variant="ghost" size="md">
                     <FiSettings />
-                </Button>
+                </IconButton>
             </Menu.Trigger>
             <Portal>
                 <Menu.Positioner>