Restructure file system to seperate Sidebar, Header, and Canvas components

client/src/App.jsx

@@ -1,9 +1,9 @@
 import { useState } from 'react'
-import Header from './components/header.jsx';
+import Header from './components/layout/Header/Header.jsx';
-import Sidebar from './components/sidebar.jsx';
+import Sidebar from './components/layout/Sidebar/Sidebar.jsx';
-import Widget from './components/Widget.jsx'
+import Widget from './components/layout/Canvas/Widget.jsx'
 import { Grid, GridItem, useRecipe } from "@chakra-ui/react"
-import CanvasHeader from './components/CanvasHeader.jsx'
+import CanvasHeader from './components/layout/Canvas/CanvasHeader.jsx'
 
 
 function App() {

client/src/components/layout/Canvas/CanvasHeader.jsx

@@ -1,7 +1,7 @@
 import { Flex, HStack, chakra, useRecipe } from "@chakra-ui/react";
-import { CanvasHeaderNav } from "./CanvasHeaderNav";
+import { CanvasHeaderNav } from "./CanvasHeaderNav.jsx";
-import { SearchBar } from "./SearchBar";
+import { SearchBar } from "./SearchBar.jsx";
-import { SettingsButton } from "./SettingsButton";
+import { SettingsButton } from "./SettingsButton.jsx";
 
 
 

client/src/components/layout/Header/Header.jsx

@@ -1,5 +1,12 @@
 import { chakra, useRecipe, Box, Button, Stack, Text, Flex } from "@chakra-ui/react"
-import UserAvatarMenu from "./UserAvatarMenu";
+import UserAvatarMenu from "./UserAvatarMenu.jsx";
+
+//TODO: Dynamically populate per each user
+const user = {
+  name: "venessa kuchenik",
+  email: "vkuchenik@contractor.usgs.gov",
+  // avatar: "src\\assets\\user_profile.svg"
+}
 
 export default function Header() {
   const recipe = useRecipe({ key: "header" });
@@ -19,8 +26,3 @@ export default function Header() {
   );
 }
 
-const user = {
-  name: "venessa kuchenik",
-  email: "vkuchenik@contractor.usgs.gov",
-  // avatar: "src\\assets\\user_profile.svg"
-}