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

# NavigationMenu

<Meta of={NavigationMenuStories} />

<br />

## Overview

웹사이트의 페이지를 탐색하기 위해 하이퍼텍스트 링크를 포함하고 있는 인터페이스 요소 컴포넌트입니다.

마우스 오버 시 메뉴 하단에 콘텐츠가 나타납니다.

<Canvas of={NavigationMenuStories.Default} />

<Controls />

<br />

## Usage

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

```vue
import { NavigationMenu } from '@lotte-innovate/lui-vue';

<template>
  <NavigationMenuRoot>
    <NavigationMenuList>
      <NavigationMenuItem>
        <NavigationMenuTrigger />
        <NavigationMenuContent />
      </NavigationMenuItem>

      <NavigationMenuItem>
        <NavigationMenuLink />
      </NavigationMenuItem>
    </NavigationMenuList>

    <NavigationMenuViewport />
  </NavigationMenuRoot>
</template>
```

<br />

## API Reference

### Root

`NavigationMenu`의 모든 부분을 포함합니다.

<table>
  <thead>
    <tr>
      <th>Props</th>
      <th>Type</th>
      <th>Description</th>
      <th>Default</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>as</td>
      <td>str AsTag | Component</td>
      <td>
        이 구성 요소가 렌더링되어야 하는 요소 또는 구성 요소입니다. asChild로 덮어쓸 수 있습니다.
      </td>
      <td>nav</td>
    </tr>
    <tr>
      <td>asChild</td>
      <td>boolean</td>
      <td>자식으로 전달된 기본 렌더링 요소를 변경하여 해당 props와 동작을 병합합니다.</td>
      <td></td>
    </tr>
    <tr>
      <td>defaultValue</td>
      <td>string</td>
      <td>
        처음 렌더링될 때 활성화되어야 하는 메뉴 항목의 값입니다. 값 상태를 제어할 필요가 없을 때
        사용합니다.
      </td>
      <td></td>
    </tr>
    <tr>
      <td>delayDuration</td>
      <td>number</td>
      <td>포인터가 트리거에 들어간 순간부터 툴팁이 열릴 때까지의 시간입니다.</td>
      <td>200</td>
    </tr>
    <tr>
      <td>disableClickTrigger</td>
      <td>boolean</td>
      <td>`true`이면 트리거를 클릭해도 메뉴가 열리지 않습니다.</td>
      <td>false</td>
    </tr>
    <tr>
      <td>disableHoverTrigger</td>
      <td>boolean</td>
      <td>`true`이면 트리거를 hover해도 메뉴가 열리지 않습니다.</td>
      <td>false</td>
    </tr>
    <tr>
      <td>modelValue</td>
      <td>string</td>
      <td>활성화할 메뉴 항목의 제어된 값입니다. `v-model`로 사용할 수 있습니다.</td>
      <td></td>
    </tr>
    <tr>
      <td>orientation</td>
      <td>'vertical' | 'horizontal'</td>
      <td>메뉴의 방향을 나타냅니다.</td>
      <td>horizontal</td>
    </tr>
    <tr>
      <td>skipDelayDuration</td>
      <td>number</td>
      <td>사용자가 지연 없이 다른 트리거를 입력할 때까지 걸리는 시간입니다.</td>
      <td>300</td>
    </tr>
  </tbody>
</table>

### List

`NavigationMenu`의 최상위 메뉴 항목을 포함합니다.

<table>
  <thead>
    <tr>
      <th>Props</th>
      <th>Type</th>
      <th>Description</th>
      <th>Default</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>as</td>
      <td>AsTag | Component</td>
      <td>
        이 구성 요소가 렌더링되어야 하는 요소 또는 구성 요소입니다. asChild로 덮어쓸 수 있습니다.
      </td>
      <td>div</td>
    </tr>
    <tr>
      <td>asChild</td>
      <td>boolean</td>
      <td>자식으로 전달된 기본 렌더링 요소를 변경하여 해당 props와 동작을 병합합니다.</td>
      <td></td>
    </tr>
  </tbody>
</table>

### Item

최상위 메뉴 항목에는 콘텐츠 조합이 포함된 링크나 트리거가 들어 있습니다.

<table>
  <thead>
    <tr>
      <th>Props</th>
      <th>Type</th>
      <th>Description</th>
      <th>Default</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>as</td>
      <td>AsTag | Component</td>
      <td>
        이 구성 요소가 렌더링되어야 하는 요소 또는 구성 요소입니다. asChild로 덮어쓸 수 있습니다.
      </td>
      <td>div</td>
    </tr>
    <tr>
      <td>asChild</td>
      <td>boolean</td>
      <td>자식으로 전달된 기본 렌더링 요소를 변경하여 해당 props와 동작을 병합합니다.</td>
      <td></td>
    </tr>
    <tr>
      <td>value</td>
      <td>string</td>
      <td>
        탐색 메뉴가 제어될 때 항목을 활성 값과 연결하는 고유한 값입니다. 이 prop은 제어되지 않을 때
        자동으로 관리됩니다.
      </td>
      <td></td>
    </tr>
  </tbody>
</table>

### Trigger

콘텐츠를 토글하는 버튼입니다.

<table>
  <thead>
    <tr>
      <th>Props</th>
      <th>Type</th>
      <th>Description</th>
      <th>Default</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>as</td>
      <td>AsTag | Component</td>
      <td>
        이 구성 요소가 렌더링되어야 하는 요소 또는 구성 요소입니다. `asChild`로 덮어쓸 수 있습니다.
      </td>
      <td>div</td>
    </tr>
    <tr>
      <td>asChild</td>
      <td>boolean</td>
      <td>자식으로 전달된 기본 렌더링 요소를 변경하여 해당 props와 동작을 병합합니다.</td>
      <td></td>
    </tr>
    <tr>
      <td>disabled</td>
      <td>boolean</td>
      <td>`true`인 경우 사용자가 항목과 상호 작용할 수 없습니다.</td>
      <td></td>
    </tr>
    <tr>
      <td>isShowIcon</td>
      <td>boolean</td>
      <td>`true`인 경우 메뉴 이름 오른편에 아이콘이 표시됩니다.</td>
      <td>true</td>
    </tr>
  </tbody>
</table>

### Content

각 트리거와 관련된 콘텐츠가 포함되어 있습니다.

<table>
  <thead>
    <tr>
      <th>Props</th>
      <th>Type</th>
      <th>Description</th>
      <th>Default</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>as</td>
      <td>AsTag | Component</td>
      <td>
        이 구성 요소가 렌더링되어야 하는 요소 또는 구성 요소입니다. `asChild`로 덮어쓸 수 있습니다.
      </td>
      <td>div</td>
    </tr>
    <tr>
      <td>asChild</td>
      <td>boolean</td>
      <td>자식으로 전달된 기본 렌더링 요소를 변경하여 해당 props와 동작을 병합합니다.</td>
      <td></td>
    </tr>
    <tr>
      <td>disableOutsidePointerEvents</td>
      <td>boolean</td>
      <td>
        `true`이면 `DismissableLayer` 외부의 요소에서 호버/포커스/클릭 상호작용이 비활성화됩니다.
        사용자는 외부 요소를 두 번 클릭해야 상호작용할 수 있습니다. 한 번은 `DismissableLayer`를
        닫고, 두 번은 요소를 트리거합니다.
      </td>
      <td></td>
    </tr>
  </tbody>
</table>

### Link

Link 바로가기를 렌더링합니다.

<table>
  <thead>
    <tr>
      <th>Props</th>
      <th>Type</th>
      <th>Description</th>
      <th>Default</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>as</td>
      <td>AsTag | Component</td>
      <td>
        이 구성 요소가 렌더링되어야 하는 요소 또는 구성 요소입니다. `asChild`로 덮어쓸 수 있습니다.
      </td>
      <td>div</td>
    </tr>
    <tr>
      <td>asChild</td>
      <td>boolean</td>
      <td>자식으로 전달된 기본 렌더링 요소를 변경하여 해당 props와 동작을 병합합니다.</td>
      <td></td>
    </tr>
    <tr>
      <td>active</td>
      <td>boolean</td>
      <td>현재 활성화된 페이지를 식별하는 데 사용됩니다</td>
      <td></td>
    </tr>
    <tr>
      <td>href</td>
      <td>string</td>
      <td>링크의 바로가기 주소를 나타냅니다.</td>
      <td></td>
    </tr>
  </tbody>
</table>

### Viewport

목록 외부의 활성 콘텐츠를 렌더링하는 데 사용되는 뷰포트 요소입니다.

<table>
  <thead>
    <tr>
      <th>Props</th>
      <th>Type</th>
      <th>Description</th>
      <th>Default</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>as</td>
      <td>AsTag | Component</td>
      <td>
        이 구성 요소가 렌더링되어야 하는 요소 또는 구성 요소입니다. `asChild`로 덮어쓸 수 있습니다.
      </td>
      <td>div</td>
    </tr>
    <tr>
      <td>asChild</td>
      <td>boolean</td>
      <td>자식으로 전달된 기본 렌더링 요소를 변경하여 해당 props와 동작을 병합합니다.</td>
      <td></td>
    </tr>
  </tbody>
</table>

## Variant

### Color

`color` props는 컴포넌트의 색상을 변경합니다.

기본 값은 `red` 입니다.

<Canvas of={NavigationMenuStories.Color} />

### Radius

`radius` props는 컴포넌트의 둥글기를 변경합니다.

기본 값은 `medium` 입니다.

<Canvas of={NavigationMenuStories.Radius} />

### Appearance

`appearance` props는 컴포넌트의 스타일을 변경합니다.

기본 값은 `ghost` 입니다.

<Canvas of={NavigationMenuStories.Appearance} />

### Size

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

기본 값은 `medium` 입니다.

<Canvas of={NavigationMenuStories.Size} />

### Scaling

`scaling` props는 컴포넌트의 비율을 변경합니다.

기본 값은 `100%` 입니다.

<Canvas of={NavigationMenuStories.Scaling} />