lti-web-client/src/components/Drawer.tsx

'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;