# Component/Drawer

> Props: component-drawer.props.txt

## Examples


### Base

```tsx
{
  render: args => {
    const [open, setOpen] = useState(false);
    return <>
        <Button onClick={() => setOpen(true)}>open</Button>
        <Drawer {...args} opened={open} onClose={() => setOpen(false)}>
          <Stack direction='column' p={24}>
            <Stack direction='row' align='center' justify='space-between'>
              <BaseText kind='Heading_17_Bold' color={semantic_colors.content.primary}>
                Drawer Content <br />
                {args?.width && `width: ${args.width}`}
              </BaseText>
              <CloseButton size={24} onClick={() => setOpen(false)} />
            </Stack>
          </Stack>
        </Drawer>
      </>;
  }
}
```

### Direction

```tsx
{
  render: (args) => {
    const directions: DrawerDirection[] = ['left', 'right'];
    const [open, setOpen] = useState({
      left: false,
      right: false,
    });

    return (
      <Stack direction='row' gap={20} p={12} align='center'>
        {directions.map((direction) => {
          return (
            <>
              <Button onClick={() => setOpen((prevOpen) => ({ ...prevOpen, [direction]: true }))}>{direction}</Button>
              <Drawer
                {...args}
                key={direction}
                opened={open[direction]}
                onClose={() => setOpen((prevOpen) => ({ ...prevOpen, [direction]: false }))}
                direction={direction}
              >
                <Stack direction='column' p={24}>
                  <Stack direction='row' align='center' justify='space-between'>
                    <BaseText kind='Heading_17_Bold' color={semantic_colors.content.primary}>
                      Drawer Content
                    </BaseText>
                    <CloseButton
                      size={24}
                      onClick={() => setOpen((prevOpen) => ({ ...prevOpen, [direction]: false }))}
                    />
                  </Stack>
                </Stack>
              </Drawer>
            </>
          );
        })}
      </Stack>
    );
  },
  args: {}
}
```

### Drawer With Modal

```tsx
{
  render: (args: DrawerProps) => {
    const [show, setShow] = useState(false);
    const [show_modal, setShowModal] = useState(false);
    const onHandleConfirm = () => {
      Confirm({
        zIndex: getZIndex('toast'),
        title: 'confirm'
      });
    };
    return <>
        <Button onClick={() => setShow(true)}>open</Button>
        <Drawer opened={show} onClose={() => setShow(false)} zIndex={getZIndex('modal')} {...args}>
          <Stack direction='row' mt={16} mb={16}>
            <BaseText kind='Body_12_Regular' color={semantic_colors.content.secondary}>
              Body Content
            </BaseText>
          </Stack>
          <Stack direction='column' gap={40}>
            <Button kind='primary' size='xlarge' onClick={onHandleConfirm}>
              Confirm
            </Button>
            <Button kind='secondary' size='xlarge' onClick={() => setShowModal(true)}>
              Open Modal
            </Button>
            <Button kind='primary' size='xlarge' onClick={() => setShow(false)}>
              Close
            </Button>
            <Modal opened={show_modal} onCancel={() => setShowModal(false)} cancelText='닫기' fullScreen>
              <Button kind='primary' size='xlarge' onClick={onHandleConfirm}>
                Confirm
              </Button>
            </Modal>
          </Stack>
        </Drawer>
      </>;
  }
}
```

### Drawer With Modal No Use Portal

```tsx
{
  render: (args: DrawerProps) => {
    const [show, setShow] = useState(false);
    const [show_modal, setShowModal] = useState(false);
    const onHandleConfirm = () => {
      Confirm({
        zIndex: getZIndex('toast'),
        title: 'confirm'
      });
    };
    return <>
        <Button onClick={() => setShow(true)}>open</Button>
        <Drawer opened={show} onClose={() => setShow(false)} zIndex={getZIndex('modal')} {...args}>
          <Stack direction='row' mt={16} mb={16}>
            <BaseText kind='Body_12_Regular' color={semantic_colors.content.secondary}>
              Body Content
            </BaseText>
          </Stack>
          <Stack direction='column' gap={40}>
            <Button kind='primary' size='xlarge' onClick={onHandleConfirm}>
              Confirm
            </Button>
            <Button kind='secondary' size='xlarge' onClick={() => setShowModal(true)}>
              Open Modal
            </Button>
            <Button kind='primary' size='xlarge' onClick={() => setShow(false)}>
              Close
            </Button>
            <Modal opened={show_modal} onCancel={() => setShowModal(false)} cancelText='닫기' fullScreen>
              <Button kind='primary' size='xlarge' onClick={onHandleConfirm}>
                Confirm
              </Button>
            </Modal>
          </Stack>
        </Drawer>
      </>;
  },
  args: {
    noUsePortal: true
  }
}
```

### Drawer With Navigation

Drawer 내부에 원하는 요소를 조합할 수 있습니다.

```tsx
{
  parameters: {
    layout: 'fullscreen',
    docs: {
      description: {
        story: 'Drawer 내부에 원하는 요소를 조합할 수 있습니다.'
      }
    }
  },
  render: () => {
    const [open, setOpen] = useState(false);
    const [currentMenu, setCurrentMenu] = useState<string | undefined>();
    const handleMenuChange = (id?: string) => {
      setCurrentMenu(id);
      handelClose();
    };
    const handelClose = () => {
      setOpen(false);
    };
    return <>
        <TopBar.Container height={56}>
          <TopBar.Title>
            <ImagePartnerCenterWh size={172} />
          </TopBar.Title>
          <TopBar.ActionArea>
            <Stack direction='row' gap={16}>
              <TopBar.ActionButton role='button'>
                <ButtonIcon size={24} color={semantic_colors.content.primary_inverse}>
                  <IconBell />
                </ButtonIcon>
              </TopBar.ActionButton>
              <TopBar.ActionButton role='button' aria-label='메뉴 열기' onClick={() => setOpen(true)}>
                <ButtonIcon size={24} color={semantic_colors.content.primary_inverse}>
                  <IconThreeBars />
                </ButtonIcon>
              </TopBar.ActionButton>
            </Stack>
          </TopBar.ActionArea>
        </TopBar.Container>
        <Drawer opened={open} onClose={handelClose}>
          <Stack direction='column' height='100%' style={{
          backgroundColor: semantic_colors.background.surface
        }}>
            <ProfileWrapper direction='column' p={24} gap={12}>
              <Stack direction='row' align='flex-start' justify='space-between'>
                <Avatar />
                <CloseButton size={24} onClick={handelClose} />
              </Stack>
              <Stack direction='column'>
                <BaseText kind='Heading_17_Bold' color={semantic_colors.content.primary}>
                  지그재그
                </BaseText>
                <BaseText kind='Body_13_Regular' color={semantic_colors.content.tertiary}>
                  zigzag.co.kr
                </BaseText>
              </Stack>
            </ProfileWrapper>
            <Stack direction='column' height='100%' style={{
            flex: 1,
            overflow: 'auto'
          }}>
              <Menu selectedMenu={currentMenu} onClickMenu={handleMenuChange} toggleMode dense={false} style={{
              flexGrow: 1
            }}>
                <MenuItem id='menu-item-1' label='menu 1' icon={<IconHomeDashboard size={20} />} />
                <MenuGroup id='menu-group-1' label='menu group 1' icon={<IconCounselor size={20} />}>
                  <MenuItem id='menu-group-item-1-1' label='menu item 1-1' />
                  <MenuItem id='menu-group-item-1-2' label='menu item 1-2' suffix={<>
                        <Badge kind='fill' color='pink'>
                          N
                        </Badge>
                        <Badge kind='fill' color='gray' size='medium'>
                          Beta
                        </Badge>
                      </>} />
                  <MenuItem id='menu-group-item-1-3' label='menu item 1-3' />
                </MenuGroup>
                <MenuGroup id='menu-group-2' label='menu group 2' icon={<IconCircleInfo size={20} />}>
                  <MenuItem id='menu-group-item-2-1' label='menu item 2-1' />
                  <MenuItem id='menu-group-item-2-2' label='menu item 2-2' />
                  <MenuItem id='menu-group-item-2-3' label='menu item 2-3' />
                </MenuGroup>
                <MenuGroup id='menu-group-3' label='menu group 3' icon={<IconMegaphone size={20} />}>
                  <MenuItem id='menu-group-item-3-1' label='menu item 3-1' />
                  <MenuItem id='menu-group-item-3-2' label='menu item 3-2' />
                  <MenuItem id='menu-group-item-3-3' label='menu item 3-3' />
                  <MenuItem id='menu-group-item-3-4' label='menu item 3-4' />
                </MenuGroup>
              </Menu>
              <Stack direction='column' gap={20} p={20} mt={40} align='center'>
                <TextButton endIcon={<IconLinkExternal size={14} />}>파트너라운지</TextButton>
                <Button fill onClick={handelClose}>
                  로그아웃
                </Button>
              </Stack>
            </Stack>
          </Stack>
        </Drawer>
      </>;
  }
}
```

### No Use Animation On Close

```tsx
{
  render: args => {
    const [open, setOpen] = useState(false);
    return <>
        <Button onClick={() => setOpen(true)}>open</Button>
        <Drawer {...args} opened={open} onClose={() => setOpen(false)}>
          <Stack direction='column' p={24}>
            <Stack direction='row' align='center' justify='space-between'>
              <BaseText kind='Heading_17_Bold' color={semantic_colors.content.primary}>
                Drawer Content <br />
                {args?.width && `width: ${args.width}`}
              </BaseText>
              <CloseButton size={24} onClick={() => setOpen(false)} />
            </Stack>
          </Stack>
        </Drawer>
      </>;
  },
  args: {
    animationOnClose: false
  }
}
```

### No Use Portal

```tsx
{
  render: (args) => {
    const [open, setOpen] = useState(false);

    return (
      <Stack
        direction='column'
        width={500}
        height={500}
        style={{ position: 'relative', border: `1px solid ${semantic_colors.border.primary}` }}
      >
        <Button onClick={() => setOpen(true)}>inline open</Button>
        <Drawer {...args} opened={open} onClose={() => setOpen(false)}>
          <Stack direction='column' p={24}>
            <Stack direction='row' align='center' justify='space-between'>
              <BaseText kind='Heading_17_Bold' color={semantic_colors.content.primary}>
                Drawer Content
              </BaseText>
              <CloseButton size={24} onClick={() => setOpen(false)} />
            </Stack>
          </Stack>
        </Drawer>
      </Stack>
    );
  },
  args: {
    noUsePortal: true
  }
}
```

### Width

```tsx
{
  render: args => {
    const [open, setOpen] = useState(false);
    return <>
        <Button onClick={() => setOpen(true)}>open</Button>
        <Drawer {...args} opened={open} onClose={() => setOpen(false)}>
          <Stack direction='column' p={24}>
            <Stack direction='row' align='center' justify='space-between'>
              <BaseText kind='Heading_17_Bold' color={semantic_colors.content.primary}>
                Drawer Content <br />
                {args?.width && `width: ${args.width}`}
              </BaseText>
              <CloseButton size={24} onClick={() => setOpen(false)} />
            </Stack>
          </Stack>
        </Drawer>
      </>;
  },
  args: {
    width: '50%'
  }
}
```