feat(frontend): implement the sidebar component for unilectives (#20)

* feat: finished navbar header

* feat: uni-lectives sidebar finished

* fix: fixed styling issues on sidebar footer

* style: fix lint issues on example storybook components

* fix: added TT Commons Pro Variable font and made sidebar more pixel perfect

* chore: added changelog for implementing the sidebar component

* fix: changed the use of interfaces to typescript types

CHANGELOG.md

@@ -0,0 +1,7 @@
+# Changelog
+All notable changes to this project will be documented in this file.
+
+## 1.0.0 (2023-03-30)
+
+### Added
+- Implemented the sidebar component.

apps/storybook/src/main.tsx

@@ -6,5 +6,5 @@ import './index.css';
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>
+  </React.StrictMode>,
 );

apps/storybook/src/stories/Introduction.stories.mdx → apps/storybook/src/stories/examples/Introduction.stories.mdx

@@ -1,12 +1,12 @@
 import { Meta } from '@storybook/addon-docs';
-import Code from './assets/code-brackets.svg';
-import Colors from './assets/colors.svg';
-import Comments from './assets/comments.svg';
-import Direction from './assets/direction.svg';
-import Flow from './assets/flow.svg';
-import Plugin from './assets/plugin.svg';
-import Repo from './assets/repo.svg';
-import StackAlt from './assets/stackalt.svg';
+import Code from '../../assets/icons/code-brackets.svg';
+import Colors from '../../assets/icons/colors.svg';
+import Comments from '../../assets/icons/comments.svg';
+import Direction from '../../assets/icons/direction.svg';
+import Flow from '../../assets/icons/flow.svg';
+import Plugin from '../../assets/icons/plugin.svg';
+import Repo from '../../assets/icons/repo.svg';
+import StackAlt from '../../assets/icons/stackalt.svg';
 
 <Meta title='Example/Introduction' />
 

apps/storybook/src/stories/Button.stories.tsx → apps/storybook/src/stories/examples/button/Button.stories.tsx

@@ -1,4 +1,4 @@
-import { ComponentMeta,ComponentStory } from '@storybook/react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
 import React from 'react';
 
 import { Button } from './Button';

apps/storybook/src/stories/Header.stories.tsx → apps/storybook/src/stories/examples/header/Header.stories.tsx

@@ -1,4 +1,4 @@
-import { ComponentMeta,ComponentStory } from '@storybook/react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
 import React from 'react';
 
 import { Header } from './Header';

apps/storybook/src/stories/Header.tsx → apps/storybook/src/stories/examples/header/Header.tsx

@@ -2,7 +2,7 @@ import './header.css';
 
 import React from 'react';
 
-import { Button } from './Button';
+import { Button } from '../button/Button';
 
 interface User {
   name: string;
@@ -38,7 +38,7 @@ export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps
         <h1>Acme</h1>
       </div>
       <div>
-        {(user != null) ? (
+        {user != null ? (
           <>
             <span className='welcome'>
               Welcome, <b>{user.name}</b>!

apps/storybook/src/stories/Page.stories.tsx → apps/storybook/src/stories/examples/page/Page.stories.tsx

@@ -1,5 +1,5 @@
-import { ComponentMeta,ComponentStory } from '@storybook/react';
-import { userEvent,within } from '@storybook/testing-library';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { userEvent, within } from '@storybook/testing-library';
 import React from 'react';
 
 import { Page } from './Page';

apps/storybook/src/stories/Page.tsx → apps/storybook/src/stories/examples/page/Page.tsx

@@ -2,7 +2,7 @@ import './page.css';
 
 import React from 'react';
 
-import { Header } from './Header';
+import { Header } from '../header/Header';
 
 interface User {
   name: string;

apps/storybook/src/stories/main/sidebar/Sidebar.stories.tsx

@@ -0,0 +1,50 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+
+import { Sidebar } from './Sidebar';
+
+export default {
+  title: 'Main/Sidebar',
+  component: Sidebar,
+  argTypes: {
+    theme: { control: 'select', options: ['light', 'dark'] },
+  },
+} as ComponentMeta<typeof Sidebar>;
+
+const Template: ComponentStory<typeof Sidebar> = (args) => <Sidebar {...args} />;
+
+// Temp nav details
+const baseArgs = {
+  name: 'Uni-lectives',
+  icon: 'src/assets/icons/cselectives-icon.png',
+  onClick: () => {},
+  onLogout: () => {},
+  content: [
+    {
+      name: 'Browse Courses',
+      icon: 'src/assets/icons/book-open.svg',
+      onClick: () => {},
+    },
+    {
+      name: 'My Reviews',
+      icon: 'src/assets/icons/edit.svg',
+      onClick: () => {},
+    },
+    {
+      name: 'Terms and Conditions',
+      icon: 'src/assets/icons/terms-and-conditions.svg',
+      onClick: () => {},
+    },
+  ],
+};
+
+export const DarkTheme = Template.bind({});
+DarkTheme.args = {
+  theme: 'dark',
+  ...baseArgs,
+};
+
+export const LightTheme = Template.bind({});
+LightTheme.args = {
+  theme: 'light',
+  ...baseArgs,
+};