diff --git a/client/src/components/layout/Canvas/Canvas.jsx b/client/src/components/layout/Canvas/Canvas.jsx index ef6e2a8..bfdf7dd 100644 --- a/client/src/components/layout/Canvas/Canvas.jsx +++ b/client/src/components/layout/Canvas/Canvas.jsx @@ -8,12 +8,12 @@ import WidgetCanvas from "./views/WidgetCanvas"; // import MapCanvas from "./views/MapCanvas"; // import AdminCanvas from "./views/AdminCanvas"; -export default function Canvas() { - const [view, setView] = useState("widget"); +export default function Canvas({ view }) { + // const [view, setView] = useState("widget"); return ( - + {view === "widget" && } {/* {view === "map" && } */} {/* {view === "admin" && } */} diff --git a/client/src/components/layout/Dashboard.jsx b/client/src/components/layout/Dashboard.jsx index eeb1042..11be033 100644 --- a/client/src/components/layout/Dashboard.jsx +++ b/client/src/components/layout/Dashboard.jsx @@ -2,12 +2,16 @@ import { Global, css } from "@emotion/react"; import Header from './Header/Header.jsx'; import Sidebar from './Sidebar/Sidebar.jsx'; import Canvas from './Canvas/Canvas.jsx'; -import { Grid, GridItem, useRecipe, Box } from '@chakra-ui/react'; +import { Grid, GridItem, useRecipe } from '@chakra-ui/react'; +import { useState } from 'react'; export default function Dashboard() { const recipe = useRecipe({ key: "canvas" }); const styles = recipe(); + // Lifted State - defaults to widget dashboard + const [view, setView] = useState("widget"); + return ( <> - + - + diff --git a/client/src/components/layout/Sidebar/Sidebar.jsx b/client/src/components/layout/Sidebar/Sidebar.jsx index 55de0b0..cbcf06b 100644 --- a/client/src/components/layout/Sidebar/Sidebar.jsx +++ b/client/src/components/layout/Sidebar/Sidebar.jsx @@ -57,18 +57,18 @@ export const Users = createIcon({ ), }); -export default function Sidebar() { +export default function Sidebar({ onChangeView }) { const [isOpen, setIsOpen] = useState(true); + const [activeButton, setActiveButton] = useState(0) const buttons = [ - {icon: PushPin, name: "Dashboard"}, - {icon: Globe, name: "Global Map"}, - {icon: MapMarker, name: "Regional Map"}, - {icon: FaVolcano, name: "Volcano"}, - {icon: Users, name: "Admin"} + {icon: PushPin, name: "Dashboard", view: "widget"}, + {icon: Globe, name: "Global Map", view: "global"}, + {icon: MapMarker, name: "Regional Map", view: "regional"}, + {icon: FaVolcano, name: "Volcano", view: "volcano"}, + {icon: Users, name: "Admin", view: "admin"} ]; - const [activeButton, setActiveButton] = useState(0) const recipe = useSlotRecipe({ key: "sidebar" }); const styles = recipe(); @@ -98,7 +98,10 @@ export default function Sidebar() { return (