# Container/TopBar

## Examples


### Base

```tsx
{
  args: {
    notification_count: 9
  },
  render: (args: ArgsType) => {
    const logout = () => alert('logout');
    return <TopBar.Container>
        <TopBar.Title>
          <ImagePartnerCenterWh size={155.25} />
        </TopBar.Title>
        <TopBar.ActionArea>
          <TopBar.ActionButton rightIcon={<IconArrowTriangleDown />}>email@.example.com</TopBar.ActionButton>
          <TopBar.ActionButton onClick={logout}>로그아웃</TopBar.ActionButton>
          <TopBar.ActionIconButton role='button'>
            <IconBell color='currentColor' size={16} />
            <TopBar.NumberIcon value={args.notification_count}>
              {args.notification_count > 99 ? '99+' : args.notification_count}
            </TopBar.NumberIcon>
          </TopBar.ActionIconButton>
        </TopBar.ActionArea>
      </TopBar.Container>;
  }
}
```

### Mobile

조건에 따라 원하는 조합으로 작성할 수 있습니다.

```tsx
{
  args: {
    notification_count: 9
  },
  parameters: {
    docs: {
      description: {
        story: '조건에 따라 원하는 조합으로 작성할 수 있습니다.'
      }
    }
  },
  render: (args: ArgsType) => {
    const logout = () => alert('logout');
    return <Stack direction='column' width={375} gap={20}>
        <TopBar.Container height={56}>
          <TopBar.Title>
            <ImagePartnerCenterWh size={172} />
          </TopBar.Title>
        </TopBar.Container>
        <TopBar.Container height={56}>
          <TopBar.Title>
            <ImagePartnerCenterWh size={172} />
          </TopBar.Title>
          <TopBar.ActionArea>
            <TopBar.ActionButton onClick={logout}>로그아웃</TopBar.ActionButton>
          </TopBar.ActionArea>
        </TopBar.Container>
        <TopBar.Container height={56}>
          <TopBar.Title>
            <ImagePartnerCenterWh size={172} />
          </TopBar.Title>
          <TopBar.ActionArea>
            <TopBar.ActionIconButton role='button'>
              <IconBell color='currentColor' size={24} />
              <TopBar.NumberIcon size='large' value={args.notification_count}>
                {args.notification_count > 99 ? '99+' : args.notification_count}
              </TopBar.NumberIcon>
            </TopBar.ActionIconButton>
            <TopBar.ActionIconButton role='button' aria-label='메뉴 열기'>
              <IconThreeBars color='currentColor' size={24} />
            </TopBar.ActionIconButton>
          </TopBar.ActionArea>
        </TopBar.Container>
      </Stack>;
  }
}
```

### Sidebar Toggle

```tsx
{
  render: () => {
    const [isSidebarOpen, setIsSidebarOpen] = React.useState(true);
    return <TopBar.Container>
        <Stack direction='row' gap={12} align='center'>
          <TopBar.SidebarToggleButton aria-expanded={isSidebarOpen} onClick={() => setIsSidebarOpen(isOpen => !isOpen)} />
          <ImagePartnerCenterWh size={155.25} />
        </Stack>
      </TopBar.Container>;
  },
  play: async ({
    canvasElement
  }) => {
    const canvas = within(canvasElement);
    const toggle = canvas.getByRole('button', {
      name: '사이드바 닫기'
    });
    const expandedIcon = toggle.querySelector('svg')!.innerHTML;
    expect(getComputedStyle(toggle.parentElement!.parentElement!).height).toBe('44px');
    expect(toggle).toHaveAttribute('aria-expanded', 'true');
    expect(getComputedStyle(toggle).width).toBe('24px');
    expect(getComputedStyle(toggle).padding).toBe('2px');
    expect(toggle.querySelector('svg')).toHaveAttribute('width', '20');
    await userEvent.click(toggle);
    expect(toggle).toHaveAttribute('aria-expanded', 'false');
    expect(toggle).toHaveAccessibleName('사이드바 열기');
    expect(toggle.querySelector('svg')!.innerHTML).not.toBe(expandedIcon);
  }
}
```

### 알림 100개이상 케이스 PC

```tsx
{
  args: {
    notification_count: 9
  },
  render: (args: ArgsType) => {
    const logout = () => alert('logout');
    return <TopBar.Container>
        <TopBar.Title>
          <ImagePartnerCenterWh size={155.25} />
        </TopBar.Title>
        <TopBar.ActionArea>
          <TopBar.ActionButton rightIcon={<IconArrowTriangleDown />}>email@.example.com</TopBar.ActionButton>
          <TopBar.ActionButton onClick={logout}>로그아웃</TopBar.ActionButton>
          <TopBar.ActionIconButton role='button'>
            <IconBell color='currentColor' size={16} />
            <TopBar.NumberIcon value={args.notification_count}>
              {args.notification_count > 99 ? '99+' : args.notification_count}
            </TopBar.NumberIcon>
          </TopBar.ActionIconButton>
        </TopBar.ActionArea>
      </TopBar.Container>;
  },
  name: '알림 100개이상 케이스 PC',
  args: {
    notification_count: 999
  }
}
```

### 알림 100개이상 케이스 모바일

조건에 따라 원하는 조합으로 작성할 수 있습니다.

```tsx
{
  args: {
    notification_count: 9
  },
  parameters: {
    docs: {
      description: {
        story: '조건에 따라 원하는 조합으로 작성할 수 있습니다.'
      }
    }
  },
  render: (args: ArgsType) => {
    const logout = () => alert('logout');
    return <Stack direction='column' width={375} gap={20}>
        <TopBar.Container height={56}>
          <TopBar.Title>
            <ImagePartnerCenterWh size={172} />
          </TopBar.Title>
        </TopBar.Container>
        <TopBar.Container height={56}>
          <TopBar.Title>
            <ImagePartnerCenterWh size={172} />
          </TopBar.Title>
          <TopBar.ActionArea>
            <TopBar.ActionButton onClick={logout}>로그아웃</TopBar.ActionButton>
          </TopBar.ActionArea>
        </TopBar.Container>
        <TopBar.Container height={56}>
          <TopBar.Title>
            <ImagePartnerCenterWh size={172} />
          </TopBar.Title>
          <TopBar.ActionArea>
            <TopBar.ActionIconButton role='button'>
              <IconBell color='currentColor' size={24} />
              <TopBar.NumberIcon size='large' value={args.notification_count}>
                {args.notification_count > 99 ? '99+' : args.notification_count}
              </TopBar.NumberIcon>
            </TopBar.ActionIconButton>
            <TopBar.ActionIconButton role='button' aria-label='메뉴 열기'>
              <IconThreeBars color='currentColor' size={24} />
            </TopBar.ActionIconButton>
          </TopBar.ActionArea>
        </TopBar.Container>
      </Stack>;
  },
  name: '알림 100개이상 케이스 모바일',
  args: {
    notification_count: 999
  }
}
```