Add CanvasHeader along with sub components CanvasHeaderNav, SearchBar, SettingsButton

client/src/App.jsx

@@ -2,10 +2,22 @@ import { useState } from 'react'
 import Header from './components/header.jsx';
 import Sidebar from './components/sidebar.jsx';
 import Widget from './components/Widget.jsx'
+import CanvasHeader from './components/CanvasHeader.jsx'
+// import { CanvasHeaderNav } from './components/CanvasHeaderNav.jsx'
+// import { SearchBar } from './components/SearchBar.jsx'
+// import { SettingsButton } from './components/SettingsButton.jsx'
 import { Grid, GridItem } from "@chakra-ui/react"
 
 
 function App() {
+  // UGLY SANITY CHECK - DELETE LATER
+  // return ( 
+  //   <div style={{ padding: 20 }}>
+  //     {/* <CanvasHeaderNav /> */}
+  //     {/* <SearchBar /> */}
+  //     {/* <SettingsButton /> */}
+  //   </div>
+  // )
   return (
     <Grid
       templateRows="1fr 11fr"
@@ -21,12 +33,17 @@ function App() {
       </GridItem>
       <GridItem colSpan={1}>
         <Grid
-          templateRows="repeat(6 1fr)"
-          templateColumns="repeat(4 1fr)"
+          templateRows="repeat(12, 1fr)"
+          templateColumns="repeat(4, 1fr)"
           height="100%"
           width="100%"
           >
-          <Widget />
+          <GridItem colSpan={4} rowSpan={1}>
+            <CanvasHeader />
+          </GridItem> 
+          <GridItem colSpan={4} rowSpan={5}>
+            <Widget />
+          </GridItem>
         </Grid>
       </GridItem>
     </Grid>
@@ -34,3 +51,5 @@ function App() {
 }
 
 export default App
+
+