feat: added drawer (#11)

README.md

@@ -127,7 +127,7 @@ Use tools like the official <a href="https://daisyui.com/theme-generator/">daisy
 - [X] <a href="https://daisyui.github.io/react-daisyui/?path=/story/layout-artboard">Artboard</a>
 - [x] <a href="https://daisyui.github.io/react-daisyui/?path=/story/layout-buttongroup">Button-Group</a>
 - [X] <a href="https://daisyui.github.io/react-daisyui/?path=/story/layout-divider">Divider</a>
-- [ ] <a href="https://daisyui.github.io/react-daisyui/?path=/story/layout-drawer">Drawer</a>
+- [X] <a href="https://daisyui.github.io/react-daisyui/?path=/story/layout-drawer">Drawer</a>
 - [X] <a href="https://daisyui.github.io/react-daisyui/?path=/story/layout-footer">Footer</a>
 - [X] <a href="https://daisyui.github.io/react-daisyui/?path=/story/layout-hero">Hero</a>
 - [X] <a href="https://daisyui.github.io/react-daisyui/?path=/story/layout-indicator">Indicator</a>

src/Drawer/Drawer.stories.tsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import { Story, Meta } from '@storybook/react'
+
+import Drawer, { DrawerProps } from '.'
+
+export default {
+  title: 'Layout/Drawer',
+  component: Drawer,
+} as Meta
+
+export const Default: Story<DrawerProps> = (args) => {
+  const drawerContent = (
+    <div className="flex flex-col items-center justify-center align-middle drawer-content">
+      <h1>Some drawer content! 🍉 (Not required)</h1>
+    </div>
+  )
+
+  return (
+    <>
+      <div className="flex flex-col items-center justify-center p-2">
+        <label htmlFor="sidebar-id">
+          👀 Open/Close drawer by alternating the Storybook controls below 👇
+        </label>
+      </div>
+
+      <Drawer
+        {...args}
+        id="sidebar-id"
+        className="h-screen w-full bg-base-100 rounded border"
+        drawerContent={drawerContent}
+      >
+        <ul className="menu p-4 overflow-y-auto w-80 bg-base-200">
+          <li>
+            <a>Sidebar Item 1</a>
+          </li>
+          <li>
+            <a>Sidebar Item 2</a>
+          </li>
+        </ul>
+      </Drawer>
+    </>
+  )
+}
+
+Default.args = {
+  open: true,
+}

src/Drawer/Drawer.tsx

@@ -0,0 +1,42 @@
+import React, { ReactNode } from 'react'
+import clsx from 'clsx'
+
+import { IComponentBaseProps } from '../types'
+
+export type DrawerProps =
+  & React.HTMLAttributes<HTMLDivElement>
+  & IComponentBaseProps
+  & {
+    id: string
+    drawerContent?: ReactNode
+    open?: boolean
+}
+
+const Drawer = ({
+  className,
+  id,
+  open = false,
+  drawerContent,
+  ...props
+}: DrawerProps) => (
+  <div className={clsx('drawer', className)} {...props}>
+    <input
+      readOnly
+      id={id}
+      type="checkbox"
+      checked={open}
+      className="drawer-toggle"
+    />
+
+    {drawerContent ? (
+      <div className="drawer-content">{drawerContent}</div>
+    ) : null}
+
+    <div className="drawer-side">
+      <label htmlFor={id} className="drawer-overlay"></label>
+      {props.children}
+    </div>
+  </div>
+)
+
+export default Drawer

src/Drawer/index.ts

@@ -0,0 +1,3 @@
+import Drawer, { DrawerProps as TDrawerProps } from './Drawer'
+export type DrawerProps = TDrawerProps
+export default Drawer

src/index.ts

@@ -13,6 +13,7 @@ import Checkbox from './Checkbox'
 import Collapse from './Collapse'
 import Countdown from './Countdown'
 import Divider from './Divider'
+import Drawer from './Drawer'
 import Dropdown from './Dropdown'
 import Footer from './Footer'
 import Form from './Form'