# 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 endIcon={<IconArrowTriangleDown />}>email@.example.com</TopBar.ActionButton>
          <TopBar.ActionButton onClick={logout}>로그아웃</TopBar.ActionButton>
          <TopBar.ActionButton>도움말</TopBar.ActionButton>
          <TopBar.ActionButton>
            <Stack direction='row' as='span' gap={2} align='center'>
              파트너라운지
              <IconNew color={semantic_colors.brand.primary} size={8} />
            </Stack>
          </TopBar.ActionButton>
          <TopBar.ActionIconButton role='button'>
            <IconBell color='currentColor' size={18} />
            <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.ActionArea>
            <TopBar.ActionButton>
              <Stack direction='row' as='span' gap={2} align='center'>
                파트너라운지
                <IconNew color={semantic_colors.brand.primary} size={8} />
              </Stack>
            </TopBar.ActionButton>
          </TopBar.ActionArea>
        </TopBar.Container>
        <TopBar.Container height={56}>
          <TopBar.Title>
            <ImagePartnerCenterWh size={172} />
          </TopBar.Title>
          <TopBar.ActionArea>
            <TopBar.ActionButton onClick={logout}>로그아웃</TopBar.ActionButton>
            <TopBar.ActionButton>
              <Stack direction='row' as='span' gap={2} align='center'>
                파트너라운지
                <IconNew color={semantic_colors.brand.primary} size={8} />
              </Stack>
            </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>;
  }
}
```

### 알림 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 endIcon={<IconArrowTriangleDown />}>email@.example.com</TopBar.ActionButton>
          <TopBar.ActionButton onClick={logout}>로그아웃</TopBar.ActionButton>
          <TopBar.ActionButton>도움말</TopBar.ActionButton>
          <TopBar.ActionButton>
            <Stack direction='row' as='span' gap={2} align='center'>
              파트너라운지
              <IconNew color={semantic_colors.brand.primary} size={8} />
            </Stack>
          </TopBar.ActionButton>
          <TopBar.ActionIconButton role='button'>
            <IconBell color='currentColor' size={18} />
            <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.ActionArea>
            <TopBar.ActionButton>
              <Stack direction='row' as='span' gap={2} align='center'>
                파트너라운지
                <IconNew color={semantic_colors.brand.primary} size={8} />
              </Stack>
            </TopBar.ActionButton>
          </TopBar.ActionArea>
        </TopBar.Container>
        <TopBar.Container height={56}>
          <TopBar.Title>
            <ImagePartnerCenterWh size={172} />
          </TopBar.Title>
          <TopBar.ActionArea>
            <TopBar.ActionButton onClick={logout}>로그아웃</TopBar.ActionButton>
            <TopBar.ActionButton>
              <Stack direction='row' as='span' gap={2} align='center'>
                파트너라운지
                <IconNew color={semantic_colors.brand.primary} size={8} />
              </Stack>
            </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
  }
}
```