## Feature Examples

### Resizeable
- description: Control if a handle is shown in the component header with `resizable` prop. When enabled, it allows user to expand or collapse the drawer with a swipe gesture.
- example:
```jsx
() => {
  const [open, setOpen] = React.useState(false);
  const [resizable, setResizable] = React.useState(true);

  return (
    <Box direction="vertical">
      <Box gap="10px">
        <Button
          onClick={() => {
            setResizable(true);
            setOpen(true);
          }}
        >
          Open resizable drawer
        </Button>
        <Button
          onClick={() => {
            setResizable(false);
            setOpen(true);
          }}
        >
          Open non-resizable drawer
        </Button>
      </Box>

      <Drawer
        open={open}
        onClose={() => setOpen(false)}
        resizable={resizable}
        backdrop
        margin
        dismissible
      >
        <Box padding="20px" gap="20px" direction="vertical">
          <StorybookComponents.Placeholder height="200px">
            <Text size="medium" weight="normal">
              {resizable ? 'Resizable drawer' : 'Non-resizable drawer'}
            </Text>
          </StorybookComponents.Placeholder>
          <Button onClick={() => setOpen(false)}>Close Drawer</Button>
        </Box>
      </Drawer>
    </Box>
  );
};
```

### Backdrop
- description: Control whether the drawer displays a `backdrop` using the backdrop property. By default, clicking the backdrop will close the drawer. When the backdrop is disabled, you can allow users to interact with the content behind the drawer by turning off the `renderBackdrop` property. When this property is off, make sure to provide alternative ways to close the drawer so users don't get trapped in it.
- example:
```jsx
() => {
  const [open, setOpen] = React.useState(false);
  const [backdrop, setBackdrop] = React.useState(true);

  return (
    <Box direction="vertical">
      <Box gap="10px">
        <Button
          onClick={() => {
            setBackdrop(true);
            setOpen(true);
          }}
        >
          Open drawer with backdrop
        </Button>
        <Button
          onClick={() => {
            setBackdrop(false);
            setOpen(true);
          }}
        >
          Open drawer without backdrop
        </Button>
      </Box>

      <Drawer
        open={open}
        onClose={() => setOpen(false)}
        backdrop={backdrop}
        margin
        dismissible
      >
        <Box padding="20px" gap="20px" direction="vertical">
          <StorybookComponents.Placeholder height="200px">
            <Text size="medium" weight="normal">
              {backdrop ? 'With backdrop' : 'Without backdrop'}
            </Text>
          </StorybookComponents.Placeholder>
          <Button onClick={() => setOpen(false)}>Close Drawer</Button>
        </Box>
      </Drawer>
    </Box>
  );
};
```

### Margin
- description: Control if the drawer has a margin around it with a `margin` prop. The size of it is fixed and varies per different themes.
- example:
```jsx
() => {
  const [open, setOpen] = React.useState(false);
  const [margin, setMargin] = React.useState(true);

  return (
    <Box direction="vertical">
      <Box gap="10px">
        <Button
          onClick={() => {
            setMargin(true);
            setOpen(true);
          }}
        >
          Open drawer with margin
        </Button>
        <Button
          onClick={() => {
            setMargin(false);
            setOpen(true);
          }}
        >
          Open drawer without margin
        </Button>
      </Box>

      <Drawer
        open={open}
        onClose={() => setOpen(false)}
        margin={margin}
        backdrop
        dismissible
      >
        <Box padding="20px" gap="20px" direction="vertical">
          <StorybookComponents.Placeholder height="200px">
            <Text size="medium" weight="normal">
              {margin ? 'With margin' : 'Without margin'}
            </Text>
          </StorybookComponents.Placeholder>
          <Button onClick={() => setOpen(false)}>Close Drawer</Button>
        </Box>
      </Drawer>
    </Box>
  );
};
```

### Header
- description: Add header with action when needed. Drawer content is a `react.node`, so any content can be placed inside of it. However, when adding a header, stick to the pattern that the close button is on the left, title is in the center and additional actions are on the right side.
- example:
```jsx
() => {
  const [open, setOpen] = React.useState(false);

  return (
    <Box>
      <Button onClick={() => setOpen(true)}>Open drawer</Button>

      <Drawer open={open} onClose={() => setOpen(false)}>
        <Box direction="vertical">
          <Box
            align="center"
            verticalAlign="middle"
            padding="12px 16px"
            backgroundColor="white"
          >
            <Box width="40px">
              <IconButton
                priority="tertiary"
                skin="dark"
                size="medium"
                onClick={() => setOpen(false)}
              >
                <Icons.X />
              </IconButton>
            </Box>

            <Box flexGrow={1} align="center">
              <Heading size="small">Title</Heading>
            </Box>

            <Box width="40px" align="right">
              <IconButton
                priority="tertiary"
                skin="dark"
                size="medium"
                onClick={() => setOpen(false)}
              >
                <Icons.Check />
              </IconButton>
            </Box>
          </Box>

          <Box padding="20px" direction="vertical" gap="20px">
            <StorybookComponents.Placeholder height="300px">
              <Text size="medium" weight="normal">
                Content goes here
              </Text>
            </StorybookComponents.Placeholder>
          </Box>
        </Box>
      </Drawer>
    </Box>
  );
};
```