[Feat] UI overhaul + Navigation

Created a navigation bar and added all options.
References #30.

client/src/components/ComponentTitle/ComponentTitle.lazy.tsx

@@ -0,0 +1,11 @@
+import React, { lazy, Suspense } from 'react';
+
+const LazyComponentTitle = lazy(() => import('./ComponentTitle'));
+
+const ComponentTitle = (props: JSX.IntrinsicAttributes & { children?: React.ReactNode; }) => (
+  <Suspense fallback={null}>
+    <LazyComponentTitle {...props} />
+  </Suspense>
+);
+
+export default ComponentTitle;

client/src/components/ComponentTitle/ComponentTitle.stories.tsx

@@ -0,0 +1,12 @@
+/* eslint-disable */
+import ComponentTitle from './ComponentTitle';
+
+export default {
+  title: "ComponentTitle",
+};
+
+export const Default = () => <ComponentTitle />;
+
+Default.story = {
+  name: 'default',
+};

client/src/components/ComponentTitle/ComponentTitle.test.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import ComponentTitle from './ComponentTitle';
+
+describe('<ComponentTitle />', () => {
+  test('it should mount', () => {
+    render(<ComponentTitle />);
+
+    const componentTitle = screen.getByTestId('ComponentTitle');
+
+    expect(componentTitle).toBeInTheDocument();
+  });
+});

client/src/components/ComponentTitle/ComponentTitle.tsx

@@ -0,0 +1,11 @@
+import { Typography } from '@mui/material';
+import React, { FC } from 'react';
+import styles from './ComponentTitle.module.scss';
+
+const ComponentTitle: FC<{}> = ({ children }) => (
+  <div className={styles.ComponentTitle} data-testid="ComponentTitle">
+    <Typography>{children}</Typography>
+  </div>
+);
+
+export default ComponentTitle;

client/src/components/Navbar/Navbar.lazy.tsx

@@ -0,0 +1,11 @@
+import React, { lazy, Suspense } from 'react';
+
+const LazyNavbar = lazy(() => import('./Navbar'));
+
+const Navbar = (props: JSX.IntrinsicAttributes & { children?: React.ReactNode; }) => (
+  <Suspense fallback={null}>
+    <LazyNavbar {...props} />
+  </Suspense>
+);
+
+export default Navbar;

client/src/components/Navbar/Navbar.module.scss

@@ -0,0 +1,7 @@
+.Navbar {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+}

client/src/components/Navbar/Navbar.stories.tsx

@@ -0,0 +1,12 @@
+/* eslint-disable */
+import Navbar from './Navbar';
+
+export default {
+  title: "Navbar",
+};
+
+export const Default = () => <Navbar />;
+
+Default.story = {
+  name: 'default',
+};

client/src/components/Navbar/Navbar.test.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import Navbar from './Navbar';
+
+describe('<Navbar />', () => {
+  test('it should mount', () => {
+    render(<Navbar />);
+
+    const navbar = screen.getByTestId('Navbar');
+
+    expect(navbar).toBeInTheDocument();
+  });
+});

client/src/components/Navbar/Navbar.tsx

@@ -0,0 +1,54 @@
+import {
+  Code,
+  MotionPhotosAuto,
+  QueryStats,
+  RadioButtonChecked,
+} from '@mui/icons-material';
+import React, { FC } from 'react';
+import NavbarIcon from '../NavbarIcon/NavbarIcon';
+import { MainComponent } from '../PrimaryView/PrimaryView';
+import styles from './Navbar.module.scss';
+
+interface NavbarProps {
+  mainComponent?: MainComponent;
+  setMainComponent: (mainComponent: MainComponent) => void;
+}
+
+const Navbar: FC<NavbarProps> = ({ mainComponent, setMainComponent }) => (
+  <div className={styles.Navbar} data-testid="Navbar">
+    <NavbarIcon
+      onClick={() => setMainComponent(MainComponent.HeadsetMonitor)}
+      isHighlighted={mainComponent === MainComponent.HeadsetMonitor}
+      primaryColor="#333333"
+      secondaryColor="#923832"
+    >
+      <QueryStats />
+    </NavbarIcon>
+    <NavbarIcon
+      onClick={() => setMainComponent(MainComponent.HeadsetAutomation)}
+      isHighlighted={mainComponent === MainComponent.HeadsetAutomation}
+      primaryColor="#333333"
+      secondaryColor="#923832"
+    >
+      <MotionPhotosAuto />
+    </NavbarIcon>
+    <NavbarIcon
+      onClick={() => setMainComponent(MainComponent.CodeEditor)}
+      isHighlighted={mainComponent === MainComponent.CodeEditor}
+      primaryColor="#333333"
+      secondaryColor="#923832"
+    >
+      <Code />
+    </NavbarIcon>
+    <NavbarIcon
+      onClick={() => setMainComponent(MainComponent.Recordings)}
+      isHighlighted={mainComponent === MainComponent.Recordings}
+      primaryColor="#333333"
+      secondaryColor="#923832"
+    >
+      <RadioButtonChecked />
+    </NavbarIcon>
+  </div>
+);
+
+export default Navbar;

client/src/components/NavbarIcon/NavbarIcon.lazy.tsx

@@ -0,0 +1,11 @@
+import React, { lazy, Suspense } from 'react';
+
+const LazyNavbarIcon = lazy(() => import('./NavbarIcon'));
+
+const NavbarIcon = (props: JSX.IntrinsicAttributes & { children?: React.ReactNode; }) => (
+  <Suspense fallback={null}>
+    <LazyNavbarIcon {...props} />
+  </Suspense>
+);
+
+export default NavbarIcon;

client/src/components/NavbarIcon/NavbarIcon.module.scss

@@ -0,0 +1,22 @@
+.NavbarIcon {
+    display: flex;
+    width: 5rem;
+    height: 5rem;
+    justify-content: center;
+    align-items: center;
+
+    color: white;
+    background-color: white;
+    border-radius: 2rem;
+
+    -webkit-transition: 150ms -webkit-filter linear;
+    -moz-transition: 150ms -moz-filter linear;
+    -moz-transition: 150ms filter linear;
+    -ms-transition: 150ms -ms-filter linear;
+    -o-transition: 150ms -o-filter linear;
+    transition: 150ms filter linear, 150ms -webkit-filter linear;
+}
+
+.NavbarIcon:hover {
+    filter: drop-shadow(0 0 0.5rem #00000020);
+}

client/src/components/NavbarIcon/NavbarIcon.stories.tsx

@@ -0,0 +1,12 @@
+/* eslint-disable */
+import NavbarIcon from './NavbarIcon';
+
+export default {
+  title: "NavbarIcon",
+};
+
+export const Default = () => <NavbarIcon />;
+
+Default.story = {
+  name: 'default',
+};

client/src/components/NavbarIcon/NavbarIcon.test.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import NavbarIcon from './NavbarIcon';
+
+describe('<NavbarIcon />', () => {
+  test('it should mount', () => {
+    render(<NavbarIcon />);
+
+    const navbarIcon = screen.getByTestId('NavbarIcon');
+
+    expect(navbarIcon).toBeInTheDocument();
+  });
+});

client/src/components/NavbarIcon/NavbarIcon.tsx

@@ -0,0 +1,37 @@
+import React, { FC } from 'react';
+import styles from './NavbarIcon.module.scss';
+
+interface NavbarIconInterface {
+  onClick: (component: any) => void;
+  isHighlighted: boolean;
+  primaryColor: string;
+  secondaryColor: string;
+}
+
+const NavbarIcon: FC<NavbarIconInterface> = ({
+  children,
+  onClick,
+  isHighlighted,
+  primaryColor,
+  secondaryColor,
+}) => (
+  <div
+    className={styles.NavbarIcon}
+    data-testid="NavbarIcon"
+    onClick={onClick}
+    style={
+      isHighlighted
+        ? {
+            background: `linear-gradient(135deg, ${primaryColor} 0%, ${secondaryColor} 100%)`,
+            filter: 'drop-shadow(0 0 0.5rem #00000040)',
+          }
+        : {
+            color: primaryColor,
+          }
+    }
+  >
+    {children}
+  </div>
+);
+
+export default NavbarIcon;

client/src/components/PrimaryView/PrimaryView.lazy.tsx

@@ -0,0 +1,13 @@
+import React, { lazy, Suspense } from 'react';
+
+const LazyPrimaryView = lazy(() => import('./PrimaryView'));
+
+const PrimaryView = (
+  props: JSX.IntrinsicAttributes & { children?: React.ReactNode },
+) => (
+  <Suspense fallback={null}>
+    <LazyPrimaryView {...props} />
+  </Suspense>
+);
+
+export default PrimaryView;

client/src/components/PrimaryView/PrimaryView.module.scss

@@ -0,0 +1,31 @@
+.PrimaryView {
+    height: 100%;
+}
+
+.Grid {
+    height: 100%;
+    display: grid;
+    grid-template-columns: repeat(20, 1fr);
+    grid-template-rows: repeat(9, 1fr);
+    grid-column-gap: 2rem;
+
+    background-color: #f4ebee;
+}
+
+.Navbar {
+    grid-column-start: 2;
+    grid-column-end: 4;
+    grid-row-start: 3;
+    grid-row-end: -3;
+
+    background-color: #f9eef2;
+    border-radius: 2rem;
+    filter: drop-shadow(0 0 1rem #00000050);
+}
+
+.Main {
+    grid-column-start: 4;
+    grid-column-end: -2;
+    grid-row-start: 2;
+    grid-row-end: -2;
+}

client/src/components/PrimaryView/PrimaryView.stories.tsx

@@ -0,0 +1,12 @@
+/* eslint-disable */
+import PrimaryView from './PrimaryView';
+
+export default {
+  title: "PrimaryView",
+};
+
+export const Default = () => <PrimaryView />;
+
+Default.story = {
+  name: 'default',
+};

client/src/components/PrimaryView/PrimaryView.test.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import PrimaryView from './PrimaryView';
+
+describe('<PrimaryView />', () => {
+  test('it should mount', () => {
+    render(<PrimaryView />);
+
+    const primaryView = screen.getByTestId('PrimaryView');
+
+    expect(primaryView).toBeInTheDocument();
+  });
+});

client/src/components/PrimaryView/PrimaryView.tsx

@@ -0,0 +1,60 @@
+import React, { FC, useState } from 'react';
+import HeadsetProvider from '../../contexts/HeadsetContext';
+import Navbar from '../Navbar/Navbar';
+import HeadsetMonitor from '../HeadsetMonitor/HeadsetMonitor';
+import HeadsetAutomation from '../HeadsetAutomation/HeadsetAutomation';
+import CodeEditor from '../CodeEditor/CodeEditor';
+import Recordings from '../Recordings/Recordings';
+import styles from './PrimaryView.module.scss';
+
+export enum MainComponent {
+  HeadsetAutomation,
+  HeadsetMonitor,
+  CodeEditor,
+  Recordings,
+}
+
+const PrimaryView: FC<{}> = () => {
+  const [mainComponent, setMainComponent] = useState<MainComponent | undefined>(
+    MainComponent.HeadsetMonitor,
+  );
+
+  const renderMainComponent = (component?: MainComponent) => {
+    switch (component) {
+      case MainComponent.HeadsetMonitor:
+        return <HeadsetMonitor />;
+
+      case MainComponent.HeadsetAutomation:
+        return <HeadsetAutomation />;
+
+      case MainComponent.CodeEditor:
+        return <CodeEditor />;
+
+      case MainComponent.Recordings:
+        return <Recordings />;
+
+      default:
+        break;
+    }
+  };
+
+  return (
+    <div className={styles.PrimaryView} data-testid="PrimaryView">
+      <HeadsetProvider>
+        <div className={styles.Grid}>
+          <div className={styles.Navbar}>
+            <Navbar
+              mainComponent={mainComponent}
+              setMainComponent={setMainComponent}
+            />
+          </div>
+          <div className={styles.Main}>
+            {renderMainComponent(mainComponent)}
+          </div>
+        </div>
+      </HeadsetProvider>
+    </div>
+  );
+};
+
+export default PrimaryView;