feat: Drawer and SidebarNav component created.

src/index.css

@@ -126,3 +126,13 @@ html[data-theme-loaded='true'] * {
     background-position: -200% 0;
   }
 }
+
+@keyframes drawerFadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}

src/layouts/MainLayout/BaseLayout.tsx

@@ -10,8 +10,8 @@ const BaseLayout: React.FC = () => {
     <div className="bg-bg-primary flex min-h-screen flex-col">
       {/* Main Content */}
       <ToastProvider />
-      <main className="flex-1 overflow-y-auto px-4 sm:px-6 lg:px-8">
-        <div className="text-text-primary py-8 sm:py-12">
+      <main className="">
+        <div className="text-text-primary">
           <Suspense fallback={null}>
             <Outlet />
             <div className="absolute top-4 right-10 flex gap-2">

src/shared/composites/Drawer/Drawer.stories.tsx

@@ -0,0 +1,84 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+import { useState } from 'react'
+
+import { Drawer } from '.'
+
+import { Button } from '@/shared/primitives/Button'
+
+const meta = {
+  title: 'Shared/Composites/Drawer',
+
+  component: Drawer,
+
+  tags: ['autodocs'],
+} satisfies Meta<typeof Drawer>
+
+export default meta
+
+type Story = StoryObj
+
+function DrawerDemo(props: Partial<React.ComponentProps<typeof Drawer>>) {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <>
+      <Button
+        onClick={() => {
+          setOpen(true)
+        }}
+      >
+        Open Drawer
+      </Button>
+
+      <Drawer
+        isOpen={open}
+        onClose={() => {
+          setOpen(false)
+        }}
+        title="Drawer Title"
+        {...props}
+      >
+        <div className="space-y-4">
+          <p>Drawer content</p>
+
+          <p>More content</p>
+
+          <p>More content</p>
+
+          <p>More content</p>
+
+          <p>More content</p>
+        </div>
+      </Drawer>
+    </>
+  )
+}
+
+export const Right: Story = {
+  render: () => <DrawerDemo side="right" />,
+}
+
+export const Left: Story = {
+  render: () => <DrawerDemo side="left" />,
+}
+
+export const Bottom: Story = {
+  render: () => <DrawerDemo side="bottom" />,
+}
+
+export const WithFooter: Story = {
+  render: () => (
+    <DrawerDemo
+      footer={
+        <div className="flex justify-end">
+          <Button>Save Changes</Button>
+        </div>
+      }
+    />
+  ),
+}
+
+export const NonDismissable: Story = {
+  render: () => <DrawerDemo isDismissable={false} />,
+}