init

src/components/Drawer.tsx

@@ -0,0 +1,60 @@
+'use client';
+
+import { ReactNode } from 'react';
+
+import { cn } from '@/lib/helper';
+
+interface DrawerProps {
+  children?: ReactNode;
+  sidebarContent?: ReactNode;
+  open: boolean;
+  setOpen: (newOpenState: boolean) => void;
+  openOnLarge?: boolean;
+}
+
+const Drawer = ({
+  children,
+  sidebarContent,
+  open,
+  setOpen,
+  openOnLarge,
+}: DrawerProps) => {
+  const toggleDrawer = () => {
+    setOpen(!open);
+  };
+
+  const closeDrawer = () => {
+    setOpen(false);
+  };
+
+  return (
+    <div
+      className={cn('drawer', {
+        'lg:drawer-open': openOnLarge,
+      })}
+    >
+      <input
+        type='checkbox'
+        checked={open}
+        onChange={toggleDrawer}
+        className='drawer-toggle'
+      />
+
+      <div className='drawer-content'>{children}</div>
+
+      <div className='drawer-side border-r border-solid border-gray-200 z-20'>
+        <label
+          aria-label='close sidebar'
+          className='drawer-overlay'
+          onClick={closeDrawer}
+        />
+
+        <div className='min-h-full w-full max-w-[300px] lg:w-[300px] bg-base-100'>
+          {sidebarContent}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Drawer;