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

# Gnb

<Meta of={GnbStories} />

<br />

상단에 위치하며 주요 네비게이션 링크와 로고, 사용자 메뉴 등을 포함하는 UI 요소입니다.

<Canvas of={GnbStories.Default} />

<Controls />

<br />

## Usage

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

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

<template>
  <GnbRoot>
    <GnbLogo />
    <GnbMenu>
      <GnbMenuItem />
    </GnbMenu>
    <GnbInfo />
  </GnbRoot>
</template>;
```

<br />

## API Reference

### Root

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

### Logo

홈 화면으로 이동할 수 있는 링크를 나타냅니다.

이동할 링크는 `href`에 작성하고 `href`가 없을 경우, 클릭 이벤트가 발생하지 않습니다.

```javascript
<GnbRoot>
  <GnbLogo :href="'/'" />
</GnbRoot>
```

### Menu

`MenuItem`을 그룹화하는 요소입니다.

### MenuItem

클릭 시 페이지를 이동하거나 특정 함수를 실행하는 링크를 포함합니다.

페이지를 이동하는 경우, 이동할 페이지 링크를 `href`에 작성합니다.

```javascript
<GnbRoot>
  <GnbMenu>
    <GnbMenuItem :href="'/docs'">Document</GnbMenuItem>
  </GnbMenu>
</GnbRoot>
```

페이지 이동 대신 특정 함수를 실행할 경우 클릭 이벤트 핸들러를 바인딩합니다.

```javascript
const handleClick = () => {
  // 실행할 함수 작성
};

<GnbRoot>
  <GnbMenuItem @click={handleClick}>Document</GnbMenuItem>
</GnbRoot>;
```

### Info

로그인 상태에 따라 사용자 프로필, 설정, 로그아웃 등의 메뉴를 포함할 수 있습니다.

<br />

## Variant

### Custom Content

<Canvas of={GnbStories.CustomContent} />