import { Canvas, Meta, Controls } from '@storybook/addon-docs';
import * as SidebarStories from './Sidebar.stories';

# Sidebar

<Meta of={SidebarStories} />

<br />

## Overview

<Canvas of={SidebarStories.Default} />

<br />

## API Reference

### SidebarProvider

`SidebarProvider` 컴포넌트는 `Sidebar` 컴포넌트의 context를 제공하는 데 사용합니다.
항상 `SidebarProvider` 컴포넌트를 감싸서 사용해야 합니다.

#### Props

<table>
  <tr>
    <th>Props</th>
    <th>Type</th>
    <th>Description</th>
  </tr>
  <tr>
    <td>defaultOpen</td>
    <td>boolean</td>
    <td>사이드바의 초기 오픈 상태</td>
  </tr>
  <tr>
    <td>open</td>
    <td>boolean</td>
    <td>사이드바의 오픈 상태</td>
  </tr>
  <tr>
    <td>onOpenChange</td>
    <td>(open: boolean) => void</td>
    <td>사이드바의 오픈 이벤트 핸들러</td>
  </tr>
  <tr>
    <td>size</td>
    <td>`small` | `medium` | `large`</td>
    <td>사이드바의 크기 상태</td>
  </tr>
  <tr>
    <td>color</td>
    <td>IColor</td>
    <td>사이드바의 색상 상태</td>
  </tr>
</table>

#### Width

사이드 바의 width를 조정하려면 style 속성을 사용해서 `--sidebar-width` 와 `--sidebar-width-mobile` 를 조정할 수 있습니다.

```javascript
<template>
  <SidebarProvider style="--sidebar-width: 20rem; --sidebar-width-mobile: 20rem;">
    <Sidebar />
  </SidebarProvider>
</template>
```

### Sidebar

기본 사이드바의 구성요소입니다.

#### Props

<table>
  <tr>
    <th>Props</th>
    <th>Type</th>
    <th>Description</th>
  </tr>
  <tr>
    <td>side</td>
    <td>`left` | `right`</td>
    <td>사이드바의 측면</td>
  </tr>
  <tr>
    <td>variant</td>
    <td>`sidebar` | `floating` | `inset`</td>
    <td>
      사이드바의 variant. `inset` 를 사용하려면 사이드바 컨텐츠에 `SidebarInset` 컴포넌트 랩핑 필수
    </td>
  </tr>
  <tr>
    <td>collapsible</td>
    <td>`offcanvas` | `icon` | `none`</td>
    <td>사이드바를 접는 요소</td>
  </tr>
</table>

### useSidebar

사이드바를 컨트롤합니다.

```javascript
<script setup lang="ts">
import { useSidebar } from "@/components/ui/sidebar";

const {
  state,
  open,
  setOpen,
  openMobile,
  setOpenMobile,
  isMobile,
  toggleSidebar,
} = useSidebar()
</script>
```

<table>
  <tr>
    <th>Props</th>
    <th>Type</th>
    <th>Description</th>
  </tr>
  <tr>
    <td>state</td>
    <td>`expanded` | `collapsed`</td>
    <td>사이드바의 현재 상태</td>
  </tr>
  <tr>
    <td>open</td>
    <td>boolean</td>
    <td>사이드바의 오픈 여부</td>
  </tr>
  <tr>
    <td>setOpen</td>
    <td>(open: boolean) => void</td>
    <td>사이드바의 오픈 상태를 설정</td>
  </tr>
  <tr>
    <td>openMobile</td>
    <td>boolean</td>
    <td>모바일에서의 사이드바의 오픈 여부</td>
  </tr>
  <tr>
    <td>setOpenMobile</td>
    <td>(open: boolean) => void</td>
    <td>모바일에서의 사이드바의 오픈 상태를 설정</td>
  </tr>
  <tr>
    <td>isMobile</td>
    <td>boolean</td>
    <td>사이드바가 모바일에서 작동하는 지 여부</td>
  </tr>
  <tr>
    <td>toggleSidebar</td>
    <td>() => void</td>
    <td>사이드바를 토글하는 함수</td>
  </tr>
</table>

### SidebarHeader

사이드바의 고정 헤더입니다.

### SidebarFooter

사이드바의 고정 바닥글입니다.

### SidebarContent

사이드바의 컨텐츠를 감싸줍니다. 스크롤이 가능한 컴포넌트입니다.

### SidebarGroup

사이드바에 section을 만들 수 있습니다. SidebarGroup 에는 SidebarGroupLabel 및 SidebarGroupContent이 있습니다. SidebarGroupAction는 선택적으로 사용할 수 있습니다.

<Canvas of={SidebarStories.SidebarGroupEx} />

### Collapsible SidebarGroup

`Collapsible`으로 감싸면 `SidebarGroup` 컴포넌트를 접을 수 있습니다.

### SidebarGroupAction

`SidebarGroup` 의 액션을 추가 할 수 있습니다.

### SidebarMenu

`SidebarGroup` 내의 메뉴를 구성하는 데 사용합니다. `SidebarMenu` 는 `SidebarMenuItem`, `SidebarMenuButton`, `SidebarMenuAction`, 와 `SidebarMenuSub` 으로 구성되어 있습니다.

### SidebarMenuButton

`SidebarMenuItem` 내에 메뉴 버튼을 구성하는 데 사용됩니다.

#### Link or Anchor

`SidebarMenuButton` 는 기본적으로 메뉴 버튼을 구성하지만, `asChild` 속성을 사용해서 `<a>` 와 같은 테그를 내부에 사용할 수 있습니다.

#### Icon and Label

아이콘이나 잘린 라벨을 버튼 내부에 랜더링 할 수 있습니다. 라벨은 `<span>` 테그 내에 입력해야 합니다.

#### isActive

`isActive` 속성을 사용해서 메뉴 아이템을 활성화 할 수 있습니다.

### SidebarMenuAction

`SidebarMenuItem` 내의 메뉴 아이템의 액션을 렌더링하는 데 사용할 수 있습니다. `SidebarMenuButton` 와 독립적으로 작동하며 `SidebarMenuButton` 를 클릭가능 한 링크로, `SidebarMenuAction` 를 버튼으로 사용할 수 있습니다.

### SidebarMenuSub

`SidebarMenu` 내에 하위 메뉴로 사용할 수 있습니다. `SidebarMenuSubItem` 와 `SidebarMenuSubButton` 를 사용해서 아이템을 랜더링 할 수 있습니다.

<Canvas of={SidebarStories.SidebarSubEx} />
```javascript
<template>
  <SidebarMenuItem>
    <SidebarMenuButton />
    <SidebarMenuSub>
      <SidebarMenuSubItem>
        <SidebarMenuSubButton />
      </SidebarMenuSubItem>
      <SidebarMenuSubItem>
        <SidebarMenuSubButton />
      </SidebarMenuSubItem>
    </SidebarMenuSub>
  </SidebarMenuItem>
</template>
```

### SidebarMenuBadge

`SidebarMenuItem` 내의 뱃지를 랜더링 할 수 있습니다.

```
<template>
  <SidebarMenuItem>
    <SidebarMenuButton />
    <SidebarMenuBadge>24</SidebarMenuBadge>
  </SidebarMenuItem>
</template>
```

### SidebarMenuSkeleton

`SidebarMenu` 내의 skeleton을 랜더링 할 수 있습니다. 데이터가 로드되길 기다릴 때 로딩 상태로 사용할 수 있습니다.

```
<template>
  <SidebarMenu>
    <SidebarMenuItem v-for="i in 5" :key="i">
      <SidebarMenuSkeleton />
    </SidebarMenuItem>
  </SidebarMenu>
</template>
```

### SidebarSeparator

`Sidebar` 의 separator 로 사용 할 수 있습니다.

### SidebarTrigger

사이드바를 토글하는 버튼을 랜더링 할 수 있습니다. `SidebarTrigger` 는 반드시 `SidebarProvider` 내에 있어야 합니다.

### Custom Trigger

트리거를 커스텀하고 싶으면 `useSidebar` 를 이용하면 됩니다.

```
<script setup lang="ts">
import { useSidebar } from "@/components/ui/sidebar";
const { toggleSidebar } = useSidebar();
</script>

<template>
  <button @click="toggleSidebar">Toggle Sidebar</button>
</template>
```

### SidebarRail

## Usage

기본적인 <strong>Sidebar</strong> 컴포넌트 사용방법 입니다.

```javascript
import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupLabel,
  SidebarMenu,
  SidebarGroupAction,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarProvider,
  Plus
} from '@lotte-innovate/lui';

<SidebarProvider>
  <Sidebar>
    <SidebarContent>
      <SidebarGroup>
        <SidebarGroupLabel>Platform</SidebarGroupLabel>
        <SidebarGroupAction title="Add Project">
          <Plus /> <span class="sr-only">Add Project</span>
        </SidebarGroupAction>
        <SidebarMenu>
          <SidebarMenuItem>
            <SidebarMenuButton class="text-sidebar-foreground/70">
              <Globe class="text-sidebar-foreground/70" />
              <span>Hello World</span>
            </SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarGroup>
      <SidebarGroup>
        <SidebarGroupLabel>Platform2</SidebarGroupLabel>
        <SidebarGroupAction title="Add Project">
          <Plus /> <span class="sr-only">Add Project</span>
        </SidebarGroupAction>
        <SidebarMenu>
          <SidebarMenuItem>
            <SidebarMenuButton class="text-sidebar-foreground/70">
              <Globe class="text-sidebar-foreground/70" />
              <span>Hello Lui</span>
            </SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarGroup>
    </SidebarContent>
  </Sidebar>
</SidebarProvider>;
```

<br />

## Variant

### Size Props

`size` props는 컴포넌트의 크기를 변경합니다.

기본 값은 `medium` 입니다.

<Canvas of={SidebarStories.Small} />
### Color Props

`color` props는 컴포넌트의 크기를 변경합니다.

기본 값은 `slate` 입니다.

<Canvas of={SidebarStories.Color} />