Merge pull request #26 from hack4impact-calpoly/2-create-the-frontend…

…-for-admin-navbar

2 create the frontend for admin navbar

.vscode/settings.json

@@ -3,5 +3,11 @@
   "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": "explicit"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[jsonc]": {
+    "editor.defaultFormatter": "vscode.json-language-features"
   }
 }

package.json

@@ -21,7 +21,8 @@
     "mongoose": "^8",
     "next": "^15.1.6",
     "react": "^18",
-    "react-dom": "^18"
+    "react-dom": "^18",
+    "react-icons": "^5.4.0"
   },
   "devDependencies": {
     "@testing-library/dom": "^10.4.0",

src/app/page.tsx

@@ -1,38 +1,44 @@
 import Navbar from "@/components/Navbar";
-import { Box, Progress, Tabs, TabList, TabPanels, Tab, TabPanel } from "@chakra-ui/react";
+import { Box, Progress, Tabs, TabList, TabPanels, Tab, TabPanel, Flex } from "@chakra-ui/react";
+import { GoRows } from "react-icons/go";
+import { PiRows } from "react-icons/pi";
 
 export default function Home() {
   return (
-    <main style={{ padding: "50px", display: "flex", flexDirection: "column", gap: "20px" }}>
-      <Navbar />
-      <Box width="200px" bg="lavender" textAlign="center">
-        Here are some ChakraUI examples: <br />
-        <br />
-        This is a box with Chakra! Basically just a div
-      </Box>
-      A progress bar...
-      <Progress value={50} width="200px" />A tab list...
-      <Tabs width="200px">
-        <TabList>
-          <Tab>One</Tab>
-          <Tab>Two</Tab>
-          <Tab>Three</Tab>
-        </TabList>
+    <main style={{ display: "flex", flexDirection: "column", gap: "20px" }}>
+      <Flex direction="row">
+        <Navbar />
+        <Box>
+          <Box width="200px" bg="lavender" textAlign="center">
+            Here are some ChakraUI examples: <br />
+            <br />
+            This is a box with Chakra! Basically just a div
+          </Box>
+          A progress bar...
+          <Progress value={50} width="200px" />A tab list...
+          <Tabs width="200px">
+            <TabList>
+              <Tab>One</Tab>
+              <Tab>Two</Tab>
+              <Tab>Three</Tab>
+            </TabList>
 
-        <TabPanels>
-          <TabPanel>
-            <p>one!</p>
-          </TabPanel>
-          <TabPanel>
-            <p>two!</p>
-          </TabPanel>
-          <TabPanel>
-            <p>three!</p>
-          </TabPanel>
-        </TabPanels>
-      </Tabs>
-      The main thing to know is just to use in-line styling, and for most traditional css elements there is a Chakra UI
-      equivalent!
+            <TabPanels>
+              <TabPanel>
+                <p>one!</p>
+              </TabPanel>
+              <TabPanel>
+                <p>two!</p>
+              </TabPanel>
+              <TabPanel>
+                <p>three!</p>
+              </TabPanel>
+            </TabPanels>
+          </Tabs>
+          The main thing to know is just to use in-line styling, and for most traditional css elements there is a Chakra
+          UI equivalent!
+        </Box>
+      </Flex>
     </main>
   );
 }

src/components/Navbar.tsx

@@ -1,3 +1,119 @@
+"use client";
+import { Box, VStack, Image, Button, Flex } from "@chakra-ui/react";
+import "@/app/fonts/fonts.css";
+import { LuTrees } from "react-icons/lu";
+import { MdOutlineDashboard, MdOutlinePeopleAlt } from "react-icons/md";
+import { IconType } from "react-icons";
+import { useState } from "react";
+
+const COLORS = {
+  primary: "#596435",
+  secondary: "#e0ee99",
+  white: "white",
+};
+
+interface NavItem {
+  id: number;
+  text: string;
+  icon: IconType;
+}
+
+const NAV_ITEMS: Array<NavItem> = [
+  {
+    id: 1,
+    text: "Dashboard",
+    icon: MdOutlineDashboard,
+  },
+  {
+    id: 2,
+    text: "Tree Inventory",
+    icon: LuTrees,
+  },
+  {
+    id: 3,
+    text: "Volunteers",
+    icon: MdOutlinePeopleAlt,
+  },
+];
+
 export default function Navbar() {
-  return <div>Navbar</div>;
+  const [activeButton, setActiveButton] = useState("Dashboard");
+
+  return (
+    <div
+      style={{
+        position: "sticky",
+        height: "100vh",
+        width: "15rem",
+        backgroundColor: COLORS.primary,
+        borderTopRightRadius: "20px",
+        borderBottomRightRadius: "20px",
+        justifyContent: "center",
+      }}
+    >
+      <VStack>
+        <Box
+          style={{
+            backgroundColor: "white",
+            borderRadius: "100%",
+            height: "5rem",
+            width: "5rem",
+            alignContent: "center",
+            marginTop: "1rem",
+          }}
+        >
+          <Image
+            src="/logo1.png"
+            alt="Logo"
+            style={{
+              width: "70%",
+              height: "70%",
+              objectFit: "contain",
+              justifySelf: "center",
+            }}
+          />
+        </Box>
+        <Box
+          style={{
+            color: COLORS.white,
+            textAlign: "center",
+            marginBottom: "2rem",
+          }}
+        >
+          Central Coast Heritage
+          <br />
+          Tree Foundation
+        </Box>
+        {/*VStack for Items*/}
+        <VStack>
+          {NAV_ITEMS.map((NavItem) => (
+            <Button
+              key={NavItem.text}
+              onClick={() => {
+                setActiveButton(NavItem.text);
+                console.log(activeButton);
+              }}
+              style={{
+                backgroundColor: activeButton == NavItem.text ? COLORS.secondary : COLORS.primary,
+                color: activeButton == NavItem.text ? COLORS.primary : COLORS.white,
+                borderRadius: "20px",
+                width: "100%",
+                height: "2rem",
+                justifyContent: "left",
+                marginTop: "1rem",
+              }}
+            >
+              <NavItem.icon
+                size="25"
+                style={{
+                  marginRight: "0.5rem",
+                }}
+              />
+              {NavItem.text}
+            </Button>
+          ))}
+        </VStack>
+      </VStack>
+    </div>
+  );
 }