Drawer

A Drawer displays content in a panel. It is a client-side component ('use client').

Example

Preview

Code

import React from 'react';
import {
  DrawerStateful,
  DrawerContent,
  DrawerDescription,
  DrawerMainPanel,
  DrawerMainPanelTitle,
  DrawerCloseTrigger,
  DrawerTrigger,
} from '@hv/ui/drawer';
import { Button } from '@hv/ui/button';

export default function DrawerExample(props) {
  return (
    <DrawerStateful id='exampleDrawer' {...props}>
      <DrawerTrigger>
        <Button title='Open Drawer'>Open Drawer</Button>
      </DrawerTrigger>
      <DrawerContent closeTitle='close' className='mt-14'>
        <DrawerDescription className='sr-only'>
          Drawer description for screenreaders
        </DrawerDescription>
        <DrawerMainPanel>
          <DrawerMainPanelTitle>Primary Drawer Heading</DrawerMainPanelTitle>
          <div className='py-12'>Drawer content here</div>
          <DrawerCloseTrigger>Close Drawer</DrawerCloseTrigger>
        </DrawerMainPanel>
      </DrawerContent>
    </DrawerStateful>
  );
}

In the example above, we use the DrawerStateful component. This component manages the drawer's open and close state.