Flex Drawer

The FlexDrawer component is a sliding drawer that preserves the main content of the page.

Example

Preview

Flex Drawer Title

flex drawer content

flex drawer content

flex drawer content

flex drawer content

flex drawer content

Example page content

Code

import { Heading } from '@hv/ui/typography';
import { Button } from '@hv/ui/button';
import {
  FlexDrawer,
  FlexDrawerActions,
  FlexDrawerTitle,
  FlexDrawerTrigger,
  FlexDrawerClose,
  FlexDrawerPanel,
  FlexDrawerContent,
  FlexDrawerMain,
} from '@hv/ui/flex-drawer';

<FlexDrawer defaultOpen={false}>
  <FlexDrawerActions>
    <FlexDrawerTrigger asChild>
      <Button
        variant="ghost"
        title="Open Flex Drawer"
      >
        Open
      </Button>
    </FlexDrawerTrigger>
    <FlexDrawerClose />
  </FlexDrawerActions>
  <FlexDrawerContent>
    <FlexDrawerPanelContainer>
      <FlexDrawerPanel>
        <FlexDrawerTitle>
          <Heading size="md">Flex Drawer Title</Heading>
        </FlexDrawerTitle>
        {Array.from({ length: 5 }, (_, i) => (
          <p key={i}>flex drawer content</p>
        ))}
      </FlexDrawerPanel>
    </FlexDrawerPanelContainer>
    <FlexDrawerMain>
      <div className="relative flex flex-row">
        <img
          src="/img/assets/mockImages/mediaBlockHero1.webp"
          alt="image"
          className="absolute inset-0 h-96 w-full object-cover"
        />
        <span className="absolute right-0">Example page content</span>
      </div>
    </FlexDrawerMain>
  </FlexDrawerContent>
</FlexDrawer>

Props

FlexDrawer Props

Property	Description	Values
defaultOpen	Determines if the drawer is open by default	Boolean
children	The drawer's children components	ReactNode

Customization

The approach for customization will vary depending on if the customization is intended to be global for all consumers of the UI component or if it is only an override for a particular instance.

• If the customization is necessary for all use cases, update the component source code in the UI library package directly.
• Otherwise, pass className overrides to modify styles for a particular instance.