HQ UI

Drawer

Drawer is a component that slides in from the side of the screen.

Installation

In the terminal, run the following command to begin:
npx hq-kit add drawer

Basic

Controlled

Side

Sticky

You can use the Drawer.Body component to make body of the drawer sticky.

Triggered By Menu

It might be a good idea to extract the drawer into a separate component for better organization. This action works both for Modal and Drawer component.

Look at these example

interface DrawerActionProps {
  state: string
  onOpenChange: (state: string) => void
  actionType: { description: string; action: () => void; confirmText: string; title: string }
  disabled: boolean
}
 
const DrawerAction = (props: DrawerActionProps) => (
  <Drawer.Content isOpen={props.state !== ''} onOpenChange={props.onOpenChange}>
    <Drawer.Header>
      <Drawer.Title>{props.actionType?.title}</Drawer.Title>
      <Drawer.Description>{props.actionType?.description}</Drawer.Description>
    </Drawer.Header>
    <Drawer.Footer>
      <Button slot='close' variant='outline'>
        Cancel
      </Button>
      <Button
        variant={props.state === 'restore' ? 'primary' : 'danger'}
        isDisabled={loading}
        isPending={loading}
        onPress={actions(state)?.action}
      >
        {actions(state)?.confirmText}
      </Button>
    </Drawer.Footer>
  </Drawer.Content>
)

Then you can use it like this.

<DrawerAction
  state={state}
  onOpenChange={closeDrawer}
  actionType={actionType(state)}
  disabled={loading}
/>

With that, now we can modify the actionType function to return the initial state.

const actionType = (t: string) => {
  const initialsState = {
    title: '',
    description: '',
    confirmText: '',
    action: () => {}
  }
 
  switch (t) {
    case 'delete': ...
    case 'ban': ...
    case 'restore': ...
    default:
      return initialsState
  }
}