feat: design applications and first api calls

Co-authored-by: Walid <87608619+WalidKorchi@users.noreply.github.com>

components/Application/Sidebar/Sidebar.stories.tsx

@@ -0,0 +1,14 @@
+import { Meta, Story } from '@storybook/react'
+
+import { Sidebar as Component, SidebarProps } from './Sidebar'
+
+const Stories: Meta = {
+  title: 'Sidebar',
+  component: Component
+}
+
+export default Stories
+
+export const Sidebar: Story<SidebarProps> = (arguments_) => {
+  return <Component {...arguments_} />
+}

components/Application/Sidebar/Sidebar.test.tsx

@@ -0,0 +1,12 @@
+import { render } from '@testing-library/react'
+
+import { Sidebar } from './Sidebar'
+
+describe('<Sidebar />', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(
+      <Sidebar direction='left' visible={true} isMobile={false} />
+    )
+    expect(baseElement).toBeTruthy()
+  })
+})

components/Application/Sidebar/Sidebar.tsx

@@ -0,0 +1,36 @@
+import classNames from 'classnames'
+
+import { ApplicationProps } from '..'
+
+export type DirectionSidebar = 'left' | 'right'
+
+export interface SidebarProps {
+  direction: DirectionSidebar
+  visible: boolean
+  path?: ApplicationProps
+  isMobile: boolean
+}
+
+export const Sidebar: React.FC<SidebarProps> = (props) => {
+  const { direction, visible, children, path, isMobile } = props
+
+  return (
+    <nav
+      className={classNames(
+        'h-full-without-header flex z-50 drop-shadow-2xl bg-gray-200 dark:bg-gray-800 transition-all',
+        {
+          'top-0 right-0 scrollbar-firefox-support overflow-y-auto flex-col space-y-1':
+            direction === 'right',
+          'w-64': direction === 'right' && visible,
+          'w-0 opacity-0': !visible,
+          'w-80': direction === 'left' && visible,
+          'max-w-max': typeof path !== 'string' && direction === 'left',
+          'top-0 right-0': direction === 'right' && isMobile,
+          absolute: isMobile
+        }
+      )}
+    >
+      {children}
+    </nav>
+  )
+}

components/Application/Sidebar/index.ts

@@ -0,0 +1 @@
+export * from './Sidebar'