feat(sidebar): updates sidebar to use material ui

Updates the sidebar to use Material UI for its components

re #143

src/components/layout/PageLayout/PageLayout.tsx

@@ -2,7 +2,7 @@ import { useDisclosure, useMediaQuery, Grid, GridItem, Box } from '@chakra-ui/re
 import AppDrawer from '@components/navigation/AppDrawer';
 import { useEffect } from 'react';
 import AppHeader from '@components/organisms/AppHeader';
-import SideBar from '@components/layout/SideBar';
+import SideBar from '@components/organisms/SideBar';
 
 interface PageLayoutProps {
   children: React.ReactNode;
@@ -31,7 +31,7 @@ function PageLayout({ children }: PageLayoutProps) {
       <GridItem gridArea="header">
         {!isDesktop && (
           <>
-            <AppHeader onMenuToggle={onToggle} isMenuOpen={isOpen && !isDesktop} />
+            <AppHeader onMenuToggle={onToggle} open={isOpen && !isDesktop} />
             <AppDrawer isOpen={isOpen} onClose={onClose} />
           </>
         )}

src/components/organisms/SideBar/SideBar.stories.tsx

@@ -0,0 +1,44 @@
+import { Story } from '@storybook/react';
+import { SessionProvider } from 'next-auth/react';
+import { profileQuery } from '@components/molecules/AccountLink';
+import SideBar from './SideBar';
+
+export default {
+  title: 'Oraganisms/SideBar',
+  component: SideBar,
+};
+
+const Template: Story = (args) => (
+  <SessionProvider session={{ expires: '' }}>
+    <SideBar {...args} />
+  </SessionProvider>
+);
+
+export const Default = Template.bind({});
+
+Default.args = {
+  open: true,
+};
+
+Default.parameters = {
+  apolloClient: {
+    mocks: [
+      {
+        request: {
+          query: profileQuery,
+        },
+        result: {
+          data: {
+            profile: {
+              firstName: 'John',
+              lastName: 'Doe',
+              avatar: {
+                filepath: 'https://i.pravatar.cc/300',
+              },
+            },
+          },
+        },
+      },
+    ],
+  },
+};

src/components/layout/SideBar/SideBar.test.tsx → src/components/organisms/SideBar/SideBar.test.tsx

@@ -2,33 +2,25 @@ import { render } from '@testing-library/react';
 import { useSession as useSessionOrig } from 'next-auth/react';
 import SideBar from './SideBar';
 
+jest.mock<typeof import('next/router')>('next/router', () => ({
+  ...jest.requireActual<typeof import('next/router')>('next/router'),
+  useRouter: () =>
+    ({
+      asPath: '/',
+    } as NextRouter),
+}));
+
 jest.mock<typeof import('next-auth/react')>('next-auth/react', () => ({
   useSession: jest.fn(),
 }));
 
 jest.mock<typeof import('@apollo/client')>('@apollo/client', () => ({
-  useQuery: jest.fn().mockReturnValue({ data: { profile: { firstName: 'John' } } }),
+  useQuery: jest.fn().mockReturnValue({
+    data: { profile: { firstName: 'John', lastName: 'Doe', avatar: { filepath: 'test.jpg' } } },
+  }),
   gql: jest.fn(),
 }));
 
-jest.mock<typeof import('next/router')>('next/router', () => ({
-  useRouter() {
-    return {
-      route: '/test',
-      pathname: '',
-      query: '',
-      asPath: '/test',
-      push: jest.fn(),
-      events: {
-        on: jest.fn(),
-        off: jest.fn(),
-      },
-      beforePopState: jest.fn(() => null),
-      prefetch: jest.fn(() => null),
-    };
-  },
-}));
-
 const useSession = useSessionOrig as jest.MockedFunction<typeof useSessionOrig>;
 
 describe('<SideBar />', () => {

src/components/organisms/SideBar/SideBar.tsx

@@ -0,0 +1,35 @@
+import { Toolbar, Divider, Drawer } from '@mui/material';
+import { AppMenu } from '@components/molecules/AppMenu';
+
+interface SideBarProps {
+  open?: boolean;
+  onClose?: () => void;
+}
+
+function SideBar({ open = false, onClose = () => {} }: SideBarProps) {
+  return (
+    <Drawer
+      data-testid="app-sidebar"
+      variant="persistent"
+      anchor="left"
+      open={open}
+      sx={{
+        width: 240,
+        flexShrink: 0,
+        '& .MuiDrawer-paper': {
+          width: 240,
+          boxSizing: 'border-box',
+          backgroundColor: (theme) => theme.palette.primary.main,
+          color: (theme) => theme.palette.primary.contrastText,
+        },
+      }}
+      onClose={onClose}
+    >
+      <Toolbar />
+      <Divider />
+      <AppMenu />
+    </Drawer>
+  );
+}
+
+export default SideBar;