New sidebar (#529)

apps/dashboard/components/nav/side-nav-button.tsx

@@ -0,0 +1,71 @@
+import { Dispatch, SetStateAction } from 'react';
+import styled from 'styled-components';
+import { IconType } from 'react-icons';
+import React from 'react';
+import { useRouter } from 'next/router'
+
+interface Props {
+  name: string;
+  image: IconType;
+  url: string;
+  selectedButton: string;
+  setSelectedButton: Dispatch<SetStateAction<string>>;
+}
+
+const SideNavButton = ({
+  name,
+  image,
+  selectedButton,
+  setSelectedButton,
+  url,
+}: Props) => {
+  const router = useRouter();
+
+  const handleClick = () => {
+    setSelectedButton(name);
+    router.push(`/${router.pathname}/${url}`);
+  };
+
+  return (
+    <NavButton
+      name={name}
+      selectedButton={selectedButton}
+      onClick={handleClick}
+    >
+      <div>{name}</div>
+      <div style={{ width: '18px', height: '18px' }}>
+        {React.createElement(image)}
+      </div>
+    </NavButton>
+  );
+};
+
+export default SideNavButton;
+
+interface NavButtonProps {
+  name: string;
+  selectedButton: string;
+}
+
+const NavButton = styled.button<NavButtonProps>`
+  width: 200px;
+  height: 40px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 15px;
+  background-color: ${(props) =>
+    props.name === props.selectedButton ? '#DDFC75' : 'white'};
+  border-radius: 6px;
+  border-width: 1px;
+  border-style: solid;
+  border-color: ${(props) =>
+    props.name === props.selectedButton ? 'black' : 'white'};
+  cursor: pointer;
+
+  transition: background-color 0.3s ease;
+  &:hover {
+    background-color: ${(props) =>
+      props.name !== props.selectedButton ? '#efefef' : '#DDFC75'};
+  }
+`;

apps/dashboard/components/nav/side-nav2.tsx

@@ -0,0 +1,81 @@
+import Image from 'next/image';
+import HackSCLogo2 from '../../public/hacksc-logo2.svg';
+import SideNavButton from './side-nav-button';
+import ArrowRight from '../../public/arrow-right.svg';
+import { useState } from 'react';
+import { IconType } from 'react-icons';
+import styled from 'styled-components';
+
+interface Props {
+  options: { name: string; url: string; image: IconType }[];
+}
+
+const SideNav = ({ options }: Props) => {
+  const [selectedButton, setSelectedButton] = useState<string>(''); // currently selected button
+
+  return (
+    <div
+      style={{
+        backgroundColor: 'white',
+        width: '250px',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        color: 'black',
+        gap: '5px',
+        justifyContent: 'space-between',
+        borderRight: '1px solid black',
+      }}
+    >
+      <div
+        style={{
+          paddingLeft: '40px',
+          paddingRight: '40px',
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '10px',
+          alignItems: 'center',
+        }}
+      >
+        <div style={{ margin: '50px 0px 50px 0px' }}>
+          <Image src={HackSCLogo2} alt="HackSC" width={150} height={75} />
+        </div>
+
+        {options.map((option) => (
+          <SideNavButton
+            key={option.name}
+            name={option.name}
+            image={option.image}
+            url={option.url}
+            selectedButton={selectedButton}
+            setSelectedButton={setSelectedButton}
+          />
+        ))}
+      </div>
+
+      <LogoutButton>
+        <div>Log out</div>
+        <Image src={ArrowRight} alt={'->'} width={20} height={20}></Image>
+      </LogoutButton>
+    </div>
+  );
+};
+
+export default SideNav;
+
+const LogoutButton = styled.button`
+  width: 100%;
+  height: 40px;
+  font-size: 14px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 25px;
+  cursor: pointer;
+  background-color: white;
+  border-top: 1px solid black;
+  &:hover {
+    background-color: #ddfc75;
+    transition: background-color 0.3s;
+  }
+`;

apps/dashboard/tsconfig.json

@@ -11,7 +11,10 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "incremental": true,
-    "types": ["jest", "node"]
+    "types": ["jest", "node"],
+    "paths": {
+      "@/*": ["./*"]
+    }
   },
   "include": ["**/*.ts", "**/*.tsx", "**/*.js", "**/*.jsx", "next-env.d.ts"],
   "exclude": [