Theme Configuration

Drawer Component Instructions

The Custom Drawer Component provides a flexible and reusable solution for displaying content in a side panel that can be opened and closed as needed. Below are the available props and their usage:

isOpen: A boolean prop that controls the visibility of the drawer. Pass isDrawerOpen to this prop to determine if the drawer should be shown or hidden.

onClose: A function prop that defines the action to be taken when the drawer is requested to close. You can pass a function like closeDrawer to handle the closing logic.

position: A string prop that determines the position of the drawer on the screen. You can specify positions such as "left", "right", "top", or "bottom" to control where the drawer will appear.

size: A string prop that sets the size of the drawer. Use values like "small", "medium", "large" or "half-screen" to customize the drawer's width or height according to your design requirements.

title: A string prop that allows you to set the title of the drawer header. For example, passing title="Filter & Sorting" will display "Filter & Sorting" at the top of the drawer.

footerClass: A string prop that enables you to customize the CSS classes for the footer area of the drawer. You can pass classes like footerClass="flex items-center justify-end gap-2" to style the footer as needed.

content: A React fragment prop where you can define the main content to be displayed inside the drawer. You can pass your JSX content directly, like so:

You can place show the custom Drawer code in the file located at src/components/CustomComponents/Drawer/Drawer.tsx.

Example

<Drawer
  isOpen={isDrawerOpen}
  onClose={closeDrawer}
  position="right"
  size="large"
  title="Filter & Sorting"
  footerClass="flex items-center justify-end gap-2"
  content={
    <>
      {/* Your content goes here... */}
    <>
  }
  footer={
    <>
      {/* Your footer content goes here... */}
    <>
  }
/>

This guide covers everything you need to know to make sure Tailwind generates all of the CSS needed for your project.