Add CanvasHeader along with sub components CanvasHeaderNav, SearchBar, SettingsButton

README.md

@@ -1,20 +0,0 @@
-# website-framework
-
-
-## Add your files
-
-- [ ] [Create](https://docs.gitlab.com/ee/user/project/repository/web_editor.html#create-a-file) or [upload](https://docs.gitlab.com/ee/user/project/repository/web_editor.html#upload-a-file) files
-- [ ] [Add files using the command line](https://docs.gitlab.com/topics/git/add_files/#add-files-to-a-git-repository) or push an existing Git repository with the following command:
-
-```
-cd existing_repo
-git remote add origin https://code.usgs.gov/vkuchenik/website-framework.git
-git branch -M main
-git push -uf origin main
-```
-
-## Name
-Basic Webapp Framework
-
-## Description
-Building a foundational webapp framework that can be repurposed.

client/package-lock.json

@@ -4286,6 +4286,7 @@
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz",
       "integrity": "sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==",
+      "license": "MIT",
       "peerDependencies": {
         "react": "*"
       }

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
+
+

client/src/components/CanvasHeader.jsx

@@ -0,0 +1,30 @@
+import { Flex, HStack } from "@chakra-ui/react";
+import { CanvasHeaderNav } from "./CanvasHeaderNav";
+import { SearchBar } from "./SearchBar";
+import { SettingsButton } from "./SettingsButton";
+
+export default function CanvasHeader() {
+    return (
+        <>
+            <Flex
+                as="header"
+                position="sticky"
+                top="0"
+                zIndex="banner"
+                bg="white"
+                borderBottom="1px solid"
+                borderColor="gray.200"
+                px={6}
+                py={3}
+                align="center"
+                justify="space-between"
+            >
+                <CanvasHeaderNav />
+                <HStack spacing={3}>
+                    <SearchBar />
+                    <SettingsButton />
+                </HStack>
+            </Flex>
+        </>
+    );
+}

client/src/components/CanvasHeaderNav.jsx

@@ -0,0 +1,22 @@
+import { HStack, Link } from "@chakra-ui/react"
+
+const navItems = [
+    { label: "My Dashboard", href: "#dashboard" },
+    { label: "Gas", href: "gas" },
+    { label: "Seismic", href: "#seismic" },
+    { label: "Remote Sensing", href: "#remote" },
+    { label: "Daily Activity", href: "#daily" },
+];
+
+export function CanvasHeaderNav() {
+    return (
+        <HStack as="nav" spacing={6}>
+            {navItems.map(({ label, href }) => (
+                <Link key={href} href={href} fontWeight="medium">
+                    {label}
+                </Link> 
+            ))}
+        </HStack>
+    );
+}
+

client/src/components/SearchBar.jsx

@@ -0,0 +1,10 @@
+import { Input, InputGroup } from "@chakra-ui/react";
+import { FiSearch } from "react-icons/fi"
+
+export function SearchBar({ placeholder="Search...", size="sm", width="200px"}) {
+    return (
+        <InputGroup startElement={<FiSearch />}>
+            <Input placeholder="Enter volcano to search" />
+        </InputGroup>
+    );
+}

client/src/components/SettingsButton.jsx

@@ -0,0 +1,25 @@
+import { IconButton, Box } from "@chakra-ui/react";
+import { FiSettings } from "react-icons/fi";
+
+export function SettingsButton(props) {
+    return (
+        <IconButton
+            aria-label="Settings"
+            size="sm"
+            variant="ghost"
+            color="gray.600"
+            _hover={{
+                bg: "gray.100",
+                color: "gray.800",
+            }}
+            {...props}
+        >
+            <FiSettings />
+        </IconButton>
+    );
+}
+
+
+
+
+

client/src/components/Widget.jsx

@@ -1,8 +1,13 @@
+// This component defines a generic Widget that can be dynamically resized and 
+// dragged inside the canvas
+// Content not included, must be populated using custom charts plots and notifications
+
 import { useState } from 'react';
 import GridLayout from 'react-grid-layout';
 
 export default function Widget() {
-    // Define widgets initial position and size 
+    // Define widgets initial position and size
+    // TODO Add dynamic adding/deleting of widgets via options button 
     const [layout, setLayout] = useState([
         { i: 'myWidget1', x: 0, y: 0, w: 3, h: 3, minH: 3, static: false },
         { i: 'myWidget2', x: 3, y: 0, w: 3, h: 3, minH: 3, static: false },