uwblueprint · hujoseph99 · Feb 18, 2022 · Feb 4, 2022 · Feb 4, 2022 · Feb 6, 2022
diff --git a/frontend/package.json b/frontend/package.json
@@ -6,6 +6,7 @@
     "@apollo/client": "^3.3.16",
     "@chakra-ui/icons": "^1.1.1",
     "@chakra-ui/react": "^1.7.2",
+    "@chakra-ui/theme-tools": "^1.3.4",
     "@chakra-ui/utils": "^1.9.1",
     "@emotion/react": "^11",
     "@emotion/styled": "^11",
@@ -27,6 +28,7 @@
     "apollo-upload-client": "^16.0.0",
     "axios": "^0.21.2",
     "bootstrap": "^4.6.0",
+    "chakra-ui-steps": "^1.6.1",
     "framer-motion": "^4",
     "graphql": "^15.5.0",
     "humps": "^2.0.1",

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -41,6 +41,7 @@ import VolunteerPostingsPage from "./components/pages/volunteer/posting/Voluntee
 import CreatePostingShiftsPage from "./components/pages/admin/posting/CreatePostingShiftsPage";
 import CreatePostingReviewPage from "./components/pages/admin/posting/CreatePostingReviewPage";
 import VolunteerPostingDetails from "./components/pages/volunteer/posting/VolunteerPostingDetails";
+import SideNavbarDemo from "./components/pages/SideNavbarDemo";
 
 import customTheme from "./theme";
 import { AuthenticatedUser } from "./types/AuthTypes";
@@ -129,6 +130,11 @@ const App = (): React.ReactElement => {
                       path={Routes.HOOKS_PAGE}
                       component={HooksDemo}
                     />
+                    <PrivateRoute
+                      exact
+                      path={Routes.SIDE_NAVBAR_DEMO_PAGE}
+                      component={SideNavbarDemo}
+                    />
                     <PrivateRoute
                       exact
                       path={Routes.VOLUNTEER_POSTINGS_PAGE}

diff --git a/frontend/src/components/common/SideNavbar.tsx b/frontend/src/components/common/SideNavbar.tsx
@@ -0,0 +1,53 @@
+import React from "react";
+import { Step, Steps } from "chakra-ui-steps";
+import { Text, VStack } from "@chakra-ui/react";
+
+export interface SideNavbarStepsType {
+  activeStep: number;
+  labels: string[];
+}
+
+const createStepLabel = (
+  idx: number,
+  activeStep: number,
+  label: string,
+): React.ReactNode => (
+  <VStack
+    marginLeft="20px"
+    spacing="-2px"
+    alignItems="left"
+    justifyContent="center"
+  >
+    <Text
+      opacity={1}
+      marginTop="-8px"
+      fontFamily="Raleway"
+      fontSize="12px"
+      textAlign="left"
+      color="#8B8B8B"
+    >
+      STEP {idx + 1}
+    </Text>
+    <Text
+      opacity={1}
+      fontFamily="Raleway"
+      fontSize="20px"
+      fontWeight={activeStep === idx ? "bold" : "normal"}
+    >
+      {label}
+    </Text>
+  </VStack>
+);
+
+const SideNavbar = (steps: SideNavbarStepsType): React.ReactElement => {
+  const { activeStep, labels } = steps;
+  return (
+    <Steps activeStep={activeStep} orientation="vertical">
+      {labels.map((label, idx) => (
+        <Step label={createStepLabel(idx, activeStep, label)} key={idx} />
+      ))}
+    </Steps>
+  );
+};
+
+export default SideNavbar;
diff --git a/frontend/src/components/pages/Default.tsx b/frontend/src/components/pages/Default.tsx
@@ -226,6 +226,7 @@ const Default = (): React.ReactElement => {
           path={Routes.ADMIN_POSTING_CREATE_REVIEW_PAGE}
         />
         <Button text="Hooks Demo" path={Routes.HOOKS_PAGE} />
+        <Button text="Side Navbar Demo" path={Routes.SIDE_NAVBAR_DEMO_PAGE} />
       </div>
       <div style={{ height: "2rem" }} />
       <TeamInfoDisplay />

diff --git a/frontend/src/components/pages/SideNavbarDemo.tsx b/frontend/src/components/pages/SideNavbarDemo.tsx
@@ -0,0 +1,39 @@
+import React from "react";
+import { useSteps } from "chakra-ui-steps";
+
+import { Button, Flex } from "@chakra-ui/react";
+import SideNavbar from "../common/SideNavbar";
+
+const SideNavbarDemo = (): React.ReactElement => {
+  const { activeStep, prevStep, nextStep } = useSteps({
+    initialStep: 0,
+  });
+
+  return (
+    <Flex
+      flexDir="column"
+      width="100%"
+      height="100vh"
+      justifyContent="center"
+      alignItems="center"
+      backgroundColor="#F3F3F3"
+    >
+      <Flex flexDir="column" width="250px">
+        <SideNavbar
+          activeStep={activeStep}
+          labels={["Basic Information", "Time Slots", "Review and Post"]}
+        />
+        <Flex flexDir="row" justifyContent="center" mt={5}>
+          <Button mr={2} onClick={prevStep} bg="violet" color="white">
+            Prev
+          </Button>
+          <Button onClick={nextStep} bg="violet" color="white">
+            Next
+          </Button>
+        </Flex>
+      </Flex>
+    </Flex>
+  );
+};
+
+export default SideNavbarDemo;
diff --git a/frontend/src/constants/Routes.ts b/frontend/src/constants/Routes.ts
@@ -20,6 +20,8 @@ export const UPDATE_ENTITY_PAGE = "/entity/update";
 
 export const HOOKS_PAGE = "/hooks";
 
+export const SIDE_NAVBAR_DEMO_PAGE = "/sidebar-demo";
+
 export const VOLUNTEER_POSTINGS_PAGE = "/volunteer/postings";
 
 export const ADMIN_POSTING_CREATE_SHIFTS_PAGE = "/admin/posting/create/shifts";

diff --git a/frontend/src/theme/index.ts b/frontend/src/theme/index.ts
@@ -2,6 +2,7 @@ import { extendTheme, withDefaultColorScheme } from "@chakra-ui/react";
 import { Dict } from "@chakra-ui/utils";
 
 import colors from "./colors";
+import CustomStepsTheme from "./stepsTheme";
 
 const customTheme = extendTheme(
   {
@@ -100,6 +101,7 @@ const customTheme = extendTheme(
     },
     colors,
     components: {
+      Steps: CustomStepsTheme,
       Tabs: {
         baseStyle: {
           tab: {

diff --git a/frontend/src/theme/stepsTheme.ts b/frontend/src/theme/stepsTheme.ts
@@ -0,0 +1,75 @@
+import { StyleFunctionProps, PartsStyleObject } from "@chakra-ui/theme-tools";
+import { StepsStyleConfig } from "chakra-ui-steps";
+
+const CustomStepsTheme = {
+  ...StepsStyleConfig,
+  baseStyle: (props: StyleFunctionProps): PartsStyleObject => ({
+    ...StepsStyleConfig.baseStyle(props),
+    connector: {
+      ...StepsStyleConfig.baseStyle(props).connector,
+      paddingTop: "30px",
+      borderColor: "violet",
+      opacity: "0.5",
+      minHeight: "50px",
+      _highlighted: {
+        opacity: "1",
+      },
+    },
+    label: {
+      ...StepsStyleConfig.baseStyle(props).label,
+      color: "currentColor",
+      fontFamily: "Inter",
+    },
+    stepIconContainer: {
+      ...StepsStyleConfig.baseStyle(props).stepIconContainer,
+      bg: "transparent",
+      color: "violet",
+      borderColor: "violet",
+      opacity: "0.5",
+      _activeStep: {
+        bg: "violet",
+        borderColor: "violet",
+        color: "white",
+        opacity: "1",
+        _invalid: {
+          bg: "red.500",
+          borderColor: "red.500",
+        },
+      },
+      _highlighted: {
+        bg: "violet",
+        borderColor: "violet",
+        opacity: "1",
+      },
+      "&[data-clickable]:hover": {
+        borderColor: "violet",
+        opacity: "1",
+      },
+    },
+  }),
+  sizes: {
+    ...StepsStyleConfig.sizes,
+    sm: {
+      ...StepsStyleConfig.sizes.sm,
+      stepIconContainer: {
+        ...StepsStyleConfig.sizes.sm.stepIconContainer,
+        borderWidth: "3px",
+      },
+    },
+    md: {
+      ...StepsStyleConfig.sizes.md,
+      stepIconContainer: {
+        ...StepsStyleConfig.sizes.md.stepIconContainer,
+        borderWidth: "3px",
+      },
+      label: {
+        ...StepsStyleConfig.sizes.md.label,
+        position: "relative",
+        fontSize: "18px",
+        fontWeight: "bold",
+      },
+    },
+  },
+};
+
+export default CustomStepsTheme;
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
@@ -1728,6 +1728,14 @@
     "@chakra-ui/utils" "1.9.1"
     "@ctrl/tinycolor" "^3.4.0"
 
+"@chakra-ui/theme-tools@^1.3.4":
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/theme-tools/-/theme-tools-1.3.4.tgz#9b6c8c9ee411726fa9cc950832869e94ba091887"
+  integrity sha512-JHpJ2Aw22uiYLRHlhsPQGCn3CYmps/ExYoON7sZ9RlyofaWjKI687X7ZJKCednPkjMeg7oaPv2j3aCdbie5flw==
+  dependencies:
+    "@chakra-ui/utils" "1.10.2"
+    "@ctrl/tinycolor" "^3.4.0"
+
 "@chakra-ui/[email protected]":
   version "1.12.1"
   resolved "https://registry.yarnpkg.com/@chakra-ui/theme/-/theme-1.12.1.tgz#48a61fe5b2b0f8f422255d3049e16bb0b2dd6e60"
@@ -4280,6 +4288,11 @@ caseless@~0.12.0:
   resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
   integrity sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=
 
+chakra-ui-steps@^1.6.1:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/chakra-ui-steps/-/chakra-ui-steps-1.6.1.tgz#9d9cacd5d557fcecc849c8a71e7b06cfaf121720"
+  integrity sha512-DHveuxWbz3/OgUTLc3WinXXrWpnu2FzThfkSnIT36LMbn80HHgFj0g7YMhZcng0B4gvQlTbZ0k0K+VZUORu8KQ==
+
 [email protected], chalk@^2.0.0, chalk@^2.4.1, chalk@^2.4.2:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"