added close button to sidebar

I added the close button to the sidebar (no functionality yet). I also fixed the canvas grid width and height

client/src/components/sidebar.jsx

@@ -1,6 +1,7 @@
 import { Box, Button } from "@chakra-ui/react"
 import { FaVolcano } from "react-icons/fa6";
 import { createIcon } from "@chakra-ui/react";
+import { CloseButton } from "@chakra-ui/react"
 import { useState } from "react"
 
 // ICONS
@@ -56,18 +57,6 @@ export const Users = createIcon({
   ),
 });
 
-export const Close = createIcon({
-  displayName: "Close",
-  viewBox: "0 0 24 24",
-  fill: "none",
-  path: (
-    <>
-      <rect x="1" y="1" width="30" height="30" rx="2" fill="black" fill-opacity="0.06"/>
-      <path d="M21.3535 11.3536L16.7071 16.0001L21.3535 20.6466L20.6465 21.3536L16 16.7071L11.3535 21.3536L10.6465 20.6466L15.293 16.0001L10.6465 11.3536L11.3535 10.6466L16 15.2931L20.6465 10.6466L21.3535 11.3536Z" fill="black"/>
-    </>
-  ),
-});
-
 export default function Sidebar () {
   return (
     <Box  w="100%" h="100%" 
@@ -79,8 +68,8 @@ export default function Sidebar () {
           justifyContent="start" 
           alignItems="start" 
           gap={4} padding={14}
-          >
-      <Button><Close fill="white" stroke="black"/></Button>
+    >
+      <CloseButton size="xs" variant="subtle" position="relative" top="-12" left="-12"></CloseButton>
       <Button fontSize="xl" variant="ghost"><PushPin /> Dashboard</Button>
       <Button fontSize="xl" variant="ghost"><Globe fill="white" stroke="black" /> Global Map</Button>
       <Button fontSize="xl" variant="ghost"><MapMarker fill="white" stroke="black"/> Regional Map</Button>