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/App.jsx

@@ -7,8 +7,8 @@ import { Box } from "@chakra-ui/react"
 function App() {
   return (
     <Grid
-      templateRows="1fr 11fr"
+      templateRows="0.75fr 11.25fr"
-      templateColumns="2fr 10fr"
+      templateColumns="1fr 11fr"
       height="100vh"
       width="100vw"
     >
@@ -21,11 +21,11 @@ function App() {
       <GridItem colSpan={1}>
         <Grid
           templateRows="repeat(6 1fr)"
-          templateColumns="repeat(6 1fr)"
+          templateColumns="repeat(4 1fr)"
-          height="100vh"
+          height="100%"
-          width="100vw"
+          width="100%"
           >
-          <Widgets></Widgets>
+          {/* <Widgets></Widgets> */}
         </Grid>
       </GridItem>
     </Grid>

client/src/assets/close_btn.svg

@@ -1,4 +0,0 @@
-<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<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"/>
-</svg>

client/src/components/header.jsx

@@ -11,8 +11,9 @@ export default function Header() {
           flexDirection="row" 
           justifyContent="space-between" 
           alignItems="center" paddingLeft={5} paddingRight={2}
-          >
+          bg="#EDF1F1"
-      <Button variant="plain" textStyle="4xl" fontWeight="bold">VDAP</Button>
+    >
+      <Button variant="plain" textStyle="5xl" fontWeight="bold">VDAP</Button>
       <Button variant="plain">
         <HStack key={user.email} gap="4">
           <Stack gap="0">

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>