doc_project/2x.antv.design/assets/index.fa852f3f.js

import{_ as Z,k as d,a as X,n as Y,d as v,r as R,j as p,l as W,w as s,f as e,e as t,b as n,B as w,s as L,H as P,ab as B,h as U,F as O,t as H}from"./index.c1b9962e.js";import{M as h,Q as M}from"./QqOutlined.e089f8d0.js";import{A as V,a as T,M as x,P as f,D as j}from"./PieChartOutlined.75340577.js";import{S}from"./SettingOutlined.83c252fc.js";import{I as F}from"./InboxOutlined.6c9ba79a.js";const z={pageData:{title:"Menu",description:"",frontmatter:{category:"Components",cols:1,type:"\u5BFC\u822A",title:"Menu",subtitle:"\u5BFC\u822A\u83DC\u5355",cover:"https://gw.alipayobjects.com/zos/alicdn/3XZcjGpvK/Menu.svg"},headers:[{level:2,title:"\u4F55\u65F6\u4F7F\u7528",slug:"\u4F55\u65F6\u4F7F\u7528",content:"\u5BFC\u822A\u83DC\u5355\u662F\u4E00\u4E2A\u7F51\u7AD9\u7684\u7075\u9B42\uFF0C\u7528\u6237\u4F9D\u8D56\u5BFC\u822A\u5728\u5404\u4E2A\u9875\u9762\u4E2D\u8FDB\u884C\u8DF3\u8F6C\u3002\u4E00\u822C\u5206\u4E3A\u9876\u90E8\u5BFC\u822A\u548C\u4FA7\u8FB9\u5BFC\u822A\uFF0C\u9876\u90E8\u5BFC\u822A\u63D0\u4F9B\u5168\u5C40\u6027\u7684\u7C7B\u76EE\u548C\u529F\u80FD\uFF0C\u4FA7\u8FB9\u5BFC\u822A\u63D0\u4F9B\u591A\u7EA7\u7ED3\u6784\u6765\u6536\u7EB3\u548C\u6392\u5217\u7F51\u7AD9\u67B6\u6784\u3002"},{level:2,title:"API",slug:"api",content:""},{level:3,title:"Menu",slug:"menu",content:""},{level:3,title:"Menu \u4E8B\u4EF6",slug:"menu-\u4E8B\u4EF6",content:""},{level:3,title:"Menu.Item",slug:"menu-item",content:""},{level:3,title:"Menu.SubMenu",slug:"menu-submenu",content:""},{level:3,title:"SubMenu \u4E8B\u4EF6",slug:"submenu-\u4E8B\u4EF6",content:""},{level:3,title:"Menu.ItemGroup",slug:"menu-itemgroup",content:""},{level:3,title:"Menu.Divider",slug:"menu-divider",content:"\u83DC\u5355\u9879\u5206\u5272\u7EBF\uFF0C\u53EA\u7528\u5728\u5F39\u51FA\u83DC\u5355\u5185\u3002"}],relativePath:"src/docs/menu/index.zh-CN.md",content:`
\u4E3A\u9875\u9762\u548C\u529F\u80FD\u63D0\u4F9B\u5BFC\u822A\u7684\u83DC\u5355\u5217\u8868\u3002

## \u4F55\u65F6\u4F7F\u7528

\u5BFC\u822A\u83DC\u5355\u662F\u4E00\u4E2A\u7F51\u7AD9\u7684\u7075\u9B42\uFF0C\u7528\u6237\u4F9D\u8D56\u5BFC\u822A\u5728\u5404\u4E2A\u9875\u9762\u4E2D\u8FDB\u884C\u8DF3\u8F6C\u3002\u4E00\u822C\u5206\u4E3A\u9876\u90E8\u5BFC\u822A\u548C\u4FA7\u8FB9\u5BFC\u822A\uFF0C\u9876\u90E8\u5BFC\u822A\u63D0\u4F9B\u5168\u5C40\u6027\u7684\u7C7B\u76EE\u548C\u529F\u80FD\uFF0C\u4FA7\u8FB9\u5BFC\u822A\u63D0\u4F9B\u591A\u7EA7\u7ED3\u6784\u6765\u6536\u7EB3\u548C\u6392\u5217\u7F51\u7AD9\u67B6\u6784\u3002

\u66F4\u591A\u5E03\u5C40\u548C\u5BFC\u822A\u7684\u4F7F\u7528\u53EF\u4EE5\u53C2\u8003\uFF1A[\u901A\u7528\u5E03\u5C40](/components/layout-cn)\u3002

## API

\`\`\`html
<template>
  <a-menu>
    <a-menu-item>\u83DC\u5355\u9879</a-menu-item>
    <a-sub-menu title="\u5B50\u83DC\u5355">
      <a-menu-item>\u5B50\u83DC\u5355\u9879</a-menu-item>
    </a-sub-menu>
  </a-menu>
</template>
\`\`\`

### Menu

| \u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C |
| --- | --- | --- | --- |
| forceSubMenuRender | \u5728\u5B50\u83DC\u5355\u5C55\u793A\u4E4B\u524D\u5C31\u6E32\u67D3\u8FDB DOM | boolean | false |
| inlineCollapsed | inline \u65F6\u83DC\u5355\u662F\u5426\u6536\u8D77\u72B6\u6001 | boolean | - |
| inlineIndent | inline \u6A21\u5F0F\u7684\u83DC\u5355\u7F29\u8FDB\u5BBD\u5EA6 | number | 24 |
| mode | \u83DC\u5355\u7C7B\u578B\uFF0C\u73B0\u5728\u652F\u6301\u5782\u76F4\u3001\u6C34\u5E73\u3001\u548C\u5185\u5D4C\u6A21\u5F0F\u4E09\u79CD | string: \`vertical\` \`vertical-right\` \`horizontal\` \`inline\` | \`vertical\` |
| multiple | \u662F\u5426\u5141\u8BB8\u591A\u9009 | boolean | false |
| openKeys(v-model) | \u5F53\u524D\u5C55\u5F00\u7684 SubMenu \u83DC\u5355\u9879 key \u6570\u7EC4 | string\\[] |  |
| selectable | \u662F\u5426\u5141\u8BB8\u9009\u4E2D | boolean | true |
| selectedKeys(v-model) | \u5F53\u524D\u9009\u4E2D\u7684\u83DC\u5355\u9879 key \u6570\u7EC4 | string\\[] |  |
| subMenuCloseDelay | \u7528\u6237\u9F20\u6807\u79BB\u5F00\u5B50\u83DC\u5355\u540E\u5173\u95ED\u5EF6\u65F6\uFF0C\u5355\u4F4D\uFF1A\u79D2 | number | 0.1 |
| subMenuOpenDelay | \u7528\u6237\u9F20\u6807\u8FDB\u5165\u5B50\u83DC\u5355\u540E\u5F00\u542F\u5EF6\u65F6\uFF0C\u5355\u4F4D\uFF1A\u79D2 | number | 0 |
| theme | \u4E3B\u9898\u989C\u8272 | string: \`light\` \`dark\` | \`light\` |
| overflowedIndicator | \u81EA\u5B9A\u4E49 Menu \u6298\u53E0\u65F6\u7684\u56FE\u6807 | DOM | \`<span>\xB7\xB7\xB7</span>\` |

### Menu \u4E8B\u4EF6

| \u4E8B\u4EF6\u540D\u79F0   | \u8BF4\u660E                               | \u56DE\u8C03\u53C2\u6570                              |
| ---------- | ---------------------------------- | ------------------------------------- |
| click      | \u70B9\u51FB MenuItem \u8C03\u7528\u6B64\u51FD\u6570           | function({ item, key, keyPath })      |
| deselect   | \u53D6\u6D88\u9009\u4E2D\u65F6\u8C03\u7528\uFF0C\u4EC5\u5728 multiple \u751F\u6548 | function({ item, key, selectedKeys }) |
| openChange | SubMenu \u5C55\u5F00/\u5173\u95ED\u7684\u56DE\u8C03            | function(openKeys: string\\[])         |
| select     | \u88AB\u9009\u4E2D\u65F6\u8C03\u7528                       | function({ item, key, selectedKeys }) |

### Menu.Item

| \u53C2\u6570     | \u8BF4\u660E                     | \u7C7B\u578B    | \u9ED8\u8BA4\u503C | \u7248\u672C  |
| -------- | ------------------------ | ------- | ------ | ----- |
| disabled | \u662F\u5426\u7981\u7528                 | boolean | false  | |
| key      | item \u7684\u552F\u4E00\u6807\u5FD7          | string  |        | |
| title    | \u8BBE\u7F6E\u6536\u7F29\u65F6\u5C55\u793A\u7684\u60AC\u6D6E\u6807\u9898 | string/slot  |        | |
| icon    | \u83DC\u5355\u56FE\u6807 | slot  |        | 2.8.0 |

### Menu.SubMenu

| \u53C2\u6570           | \u8BF4\u660E                     | \u7C7B\u578B         | \u9ED8\u8BA4\u503C   | \u7248\u672C  |
| -------------- | ------------------------ | ------------ | -------- | ----- |
| popupClassName | \u5B50\u83DC\u5355\u6837\u5F0F               | string       |          | 1.5.0 |
| disabled       | \u662F\u5426\u7981\u7528                 | boolean      | false    |       |
| key            | \u552F\u4E00\u6807\u5FD7                 | string       |          |       |
| title          | \u5B50\u83DC\u5355\u9879\u503C               | string\\|slot |          |       |
| expandIcon     | \u81EA\u5B9A\u4E49 Menu \u5C55\u5F00\u6536\u8D77\u56FE\u6807 | slot         | \u7BAD\u5934\u56FE\u6807 |       |
| icon    | \u83DC\u5355\u56FE\u6807 | slot  |        | 2.8.0 |

Menu.SubMenu \u7684\u5B50\u5143\u7D20\u5FC5\u987B\u662F \`MenuItem\` \u6216\u8005 \`SubMenu\`.

### SubMenu \u4E8B\u4EF6

| \u4E8B\u4EF6\u540D\u79F0   | \u8BF4\u660E           | \u56DE\u8C03\u53C2\u6570            |
| ---------- | -------------- | ------------------- |
| titleClick | \u70B9\u51FB\u5B50\u83DC\u5355\u6807\u9898 | ({ key, domEvent }) |

### Menu.ItemGroup

| \u53C2\u6570  | \u8BF4\u660E     | \u7C7B\u578B                     | \u9ED8\u8BA4\u503C |
| ----- | -------- | ------------------------ | ------ |
| title | \u5206\u7EC4\u6807\u9898 | string\\|\\|function\\|slot |        |

Menu.ItemGroup \u7684\u5B50\u5143\u7D20\u5FC5\u987B\u662F \`MenuItem\`.

### Menu.Divider

\u83DC\u5355\u9879\u5206\u5272\u7EBF\uFF0C\u53EA\u7528\u5728\u5F39\u51FA\u83DC\u5355\u5185\u3002
`,html:`<p>\u4E3A\u9875\u9762\u548C\u529F\u80FD\u63D0\u4F9B\u5BFC\u822A\u7684\u83DC\u5355\u5217\u8868\u3002</p>
<h2 id="\u4F55\u65F6\u4F7F\u7528">\u4F55\u65F6\u4F7F\u7528</h2>
<p>\u5BFC\u822A\u83DC\u5355\u662F\u4E00\u4E2A\u7F51\u7AD9\u7684\u7075\u9B42\uFF0C\u7528\u6237\u4F9D\u8D56\u5BFC\u822A\u5728\u5404\u4E2A\u9875\u9762\u4E2D\u8FDB\u884C\u8DF3\u8F6C\u3002\u4E00\u822C\u5206\u4E3A\u9876\u90E8\u5BFC\u822A\u548C\u4FA7\u8FB9\u5BFC\u822A\uFF0C\u9876\u90E8\u5BFC\u822A\u63D0\u4F9B\u5168\u5C40\u6027\u7684\u7C7B\u76EE\u548C\u529F\u80FD\uFF0C\u4FA7\u8FB9\u5BFC\u822A\u63D0\u4F9B\u591A\u7EA7\u7ED3\u6784\u6765\u6536\u7EB3\u548C\u6392\u5217\u7F51\u7AD9\u67B6\u6784\u3002</p>
<p>\u66F4\u591A\u5E03\u5C40\u548C\u5BFC\u822A\u7684\u4F7F\u7528\u53EF\u4EE5\u53C2\u8003\uFF1A<a href="/components/layout-cn.html">\u901A\u7528\u5E03\u5C40</a>\u3002</p>
<h2 id="api">API</h2>
<pre class="language-html" v-pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-menu</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-menu-item</span><span class="token punctuation">></span></span>\u83DC\u5355\u9879<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-menu-item</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-sub-menu</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>\u5B50\u83DC\u5355<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-menu-item</span><span class="token punctuation">></span></span>\u5B50\u83DC\u5355\u9879<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-menu-item</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-sub-menu</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-menu</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">></span></span>
</code></pre>
<h3 id="menu">Menu</h3>
<table>
<thead>
<tr>
<th>\u53C2\u6570</th>
<th>\u8BF4\u660E</th>
<th>\u7C7B\u578B</th>
<th>\u9ED8\u8BA4\u503C</th>
</tr>
</thead>
<tbody>
<tr>
<td>forceSubMenuRender</td>
<td>\u5728\u5B50\u83DC\u5355\u5C55\u793A\u4E4B\u524D\u5C31\u6E32\u67D3\u8FDB DOM</td>
<td>boolean</td>
<td>false</td>
</tr>
<tr>
<td>inlineCollapsed</td>
<td>inline \u65F6\u83DC\u5355\u662F\u5426\u6536\u8D77\u72B6\u6001</td>
<td>boolean</td>
<td>-</td>
</tr>
<tr>
<td>inlineIndent</td>
<td>inline \u6A21\u5F0F\u7684\u83DC\u5355\u7F29\u8FDB\u5BBD\u5EA6</td>
<td>number</td>
<td>24</td>
</tr>
<tr>
<td>mode</td>
<td>\u83DC\u5355\u7C7B\u578B\uFF0C\u73B0\u5728\u652F\u6301\u5782\u76F4\u3001\u6C34\u5E73\u3001\u548C\u5185\u5D4C\u6A21\u5F0F\u4E09\u79CD</td>
<td>string: <code>vertical</code> <code>vertical-right</code> <code>horizontal</code> <code>inline</code></td>
<td><code>vertical</code></td>
</tr>
<tr>
<td>multiple</td>
<td>\u662F\u5426\u5141\u8BB8\u591A\u9009</td>
<td>boolean</td>
<td>false</td>
</tr>
<tr>
<td>openKeys(v-model)</td>
<td>\u5F53\u524D\u5C55\u5F00\u7684 SubMenu \u83DC\u5355\u9879 key \u6570\u7EC4</td>
<td>string[]</td>
<td></td>
</tr>
<tr>
<td>selectable</td>
<td>\u662F\u5426\u5141\u8BB8\u9009\u4E2D</td>
<td>boolean</td>
<td>true</td>
</tr>
<tr>
<td>selectedKeys(v-model)</td>
<td>\u5F53\u524D\u9009\u4E2D\u7684\u83DC\u5355\u9879 key \u6570\u7EC4</td>
<td>string[]</td>
<td></td>
</tr>
<tr>
<td>subMenuCloseDelay</td>
<td>\u7528\u6237\u9F20\u6807\u79BB\u5F00\u5B50\u83DC\u5355\u540E\u5173\u95ED\u5EF6\u65F6\uFF0C\u5355\u4F4D\uFF1A\u79D2</td>
<td>number</td>
<td>0.1</td>
</tr>
<tr>
<td>subMenuOpenDelay</td>
<td>\u7528\u6237\u9F20\u6807\u8FDB\u5165\u5B50\u83DC\u5355\u540E\u5F00\u542F\u5EF6\u65F6\uFF0C\u5355\u4F4D\uFF1A\u79D2</td>
<td>number</td>
<td>0</td>
</tr>
<tr>
<td>theme</td>
<td>\u4E3B\u9898\u989C\u8272</td>
<td>string: <code>light</code> <code>dark</code></td>
<td><code>light</code></td>
</tr>
<tr>
<td>overflowedIndicator</td>
<td>\u81EA\u5B9A\u4E49 Menu \u6298\u53E0\u65F6\u7684\u56FE\u6807</td>
<td>DOM</td>
<td><code>&lt;span&gt;\xB7\xB7\xB7&lt;/span&gt;</code></td>
</tr>
</tbody>
</table>
<h3 id="menu-\u4E8B\u4EF6">Menu \u4E8B\u4EF6</h3>
<table>
<thead>
<tr>
<th>\u4E8B\u4EF6\u540D\u79F0</th>
<th>\u8BF4\u660E</th>
<th>\u56DE\u8C03\u53C2\u6570</th>
</tr>
</thead>
<tbody>
<tr>
<td>click</td>
<td>\u70B9\u51FB MenuItem \u8C03\u7528\u6B64\u51FD\u6570</td>
<td>function({ item, key, keyPath })</td>
</tr>
<tr>
<td>deselect</td>
<td>\u53D6\u6D88\u9009\u4E2D\u65F6\u8C03\u7528\uFF0C\u4EC5\u5728 multiple \u751F\u6548</td>
<td>function({ item, key, selectedKeys })</td>
</tr>
<tr>
<td>openChange</td>
<td>SubMenu \u5C55\u5F00/\u5173\u95ED\u7684\u56DE\u8C03</td>
<td>function(openKeys: string[])</td>
</tr>
<tr>
<td>select</td>
<td>\u88AB\u9009\u4E2D\u65F6\u8C03\u7528</td>
<td>function({ item, key, selectedKeys })</td>
</tr>
</tbody>
</table>
<h3 id="menu-item">Menu.Item</h3>
<table>
<thead>
<tr>
<th>\u53C2\u6570</th>
<th>\u8BF4\u660E</th>
<th>\u7C7B\u578B</th>
<th>\u9ED8\u8BA4\u503C</th>
<th>\u7248\u672C</th>
</tr>
</thead>
<tbody>
<tr>
<td>disabled</td>
<td>\u662F\u5426\u7981\u7528</td>
<td>boolean</td>
<td>false</td>
<td></td>
</tr>
<tr>
<td>key</td>
<td>item \u7684\u552F\u4E00\u6807\u5FD7</td>
<td>string</td>
<td></td>
<td></td>
</tr>
<tr>
<td>title</td>
<td>\u8BBE\u7F6E\u6536\u7F29\u65F6\u5C55\u793A\u7684\u60AC\u6D6E\u6807\u9898</td>
<td>string/slot</td>
<td></td>
<td></td>
</tr>
<tr>
<td>icon</td>
<td>\u83DC\u5355\u56FE\u6807</td>
<td>slot</td>
<td></td>
<td>2.8.0</td>
</tr>
</tbody>
</table>
<h3 id="menu-submenu">Menu.SubMenu</h3>
<table>
<thead>
<tr>
<th>\u53C2\u6570</th>
<th>\u8BF4\u660E</th>
<th>\u7C7B\u578B</th>
<th>\u9ED8\u8BA4\u503C</th>
<th>\u7248\u672C</th>
</tr>
</thead>
<tbody>
<tr>
<td>popupClassName</td>
<td>\u5B50\u83DC\u5355\u6837\u5F0F</td>
<td>string</td>
<td></td>
<td>1.5.0</td>
</tr>
<tr>
<td>disabled</td>
<td>\u662F\u5426\u7981\u7528</td>
<td>boolean</td>
<td>false</td>
<td></td>
</tr>
<tr>
<td>key</td>
<td>\u552F\u4E00\u6807\u5FD7</td>
<td>string</td>
<td></td>
<td></td>
</tr>
<tr>
<td>title</td>
<td>\u5B50\u83DC\u5355\u9879\u503C</td>
<td>string|slot</td>
<td></td>
<td></td>
</tr>
<tr>
<td>expandIcon</td>
<td>\u81EA\u5B9A\u4E49 Menu \u5C55\u5F00\u6536\u8D77\u56FE\u6807</td>
<td>slot</td>
<td>\u7BAD\u5934\u56FE\u6807</td>
<td></td>
</tr>
<tr>
<td>icon</td>
<td>\u83DC\u5355\u56FE\u6807</td>
<td>slot</td>
<td></td>
<td>2.8.0</td>
</tr>
</tbody>
</table>
<p>Menu.SubMenu \u7684\u5B50\u5143\u7D20\u5FC5\u987B\u662F <code>MenuItem</code> \u6216\u8005 <code>SubMenu</code>.</p>
<h3 id="submenu-\u4E8B\u4EF6">SubMenu \u4E8B\u4EF6</h3>
<table>
<thead>
<tr>
<th>\u4E8B\u4EF6\u540D\u79F0</th>
<th>\u8BF4\u660E</th>
<th>\u56DE\u8C03\u53C2\u6570</th>
</tr>
</thead>
<tbody>
<tr>
<td>titleClick</td>
<td>\u70B9\u51FB\u5B50\u83DC\u5355\u6807\u9898</td>
<td>({ key, domEvent })</td>
</tr>
</tbody>
</table>
<h3 id="menu-itemgroup">Menu.ItemGroup</h3>
<table>
<thead>
<tr>
<th>\u53C2\u6570</th>
<th>\u8BF4\u660E</th>
<th>\u7C7B\u578B</th>
<th>\u9ED8\u8BA4\u503C</th>
</tr>
</thead>
<tbody>
<tr>
<td>title</td>
<td>\u5206\u7EC4\u6807\u9898</td>
<td>string||function|slot</td>
<td></td>
</tr>
</tbody>
</table>
<p>Menu.ItemGroup \u7684\u5B50\u5143\u7D20\u5FC5\u987B\u662F <code>MenuItem</code>.</p>
<h3 id="menu-divider">Menu.Divider</h3>
<p>\u83DC\u5355\u9879\u5206\u5272\u7EBF\uFF0C\u53EA\u7528\u5728\u5F39\u51FA\u83DC\u5355\u5185\u3002</p>
`,lastUpdated:1748059052701}},q={class:"markdown"};function E(o,a,i,g,I,G){return d(),X("article",q,a[0]||(a[0]=[Y(`<p>\u4E3A\u9875\u9762\u548C\u529F\u80FD\u63D0\u4F9B\u5BFC\u822A\u7684\u83DC\u5355\u5217\u8868\u3002</p><h2 id="\u4F55\u65F6\u4F7F\u7528">\u4F55\u65F6\u4F7F\u7528</h2><p>\u5BFC\u822A\u83DC\u5355\u662F\u4E00\u4E2A\u7F51\u7AD9\u7684\u7075\u9B42\uFF0C\u7528\u6237\u4F9D\u8D56\u5BFC\u822A\u5728\u5404\u4E2A\u9875\u9762\u4E2D\u8FDB\u884C\u8DF3\u8F6C\u3002\u4E00\u822C\u5206\u4E3A\u9876\u90E8\u5BFC\u822A\u548C\u4FA7\u8FB9\u5BFC\u822A\uFF0C\u9876\u90E8\u5BFC\u822A\u63D0\u4F9B\u5168\u5C40\u6027\u7684\u7C7B\u76EE\u548C\u529F\u80FD\uFF0C\u4FA7\u8FB9\u5BFC\u822A\u63D0\u4F9B\u591A\u7EA7\u7ED3\u6784\u6765\u6536\u7EB3\u548C\u6392\u5217\u7F51\u7AD9\u67B6\u6784\u3002</p><p>\u66F4\u591A\u5E03\u5C40\u548C\u5BFC\u822A\u7684\u4F7F\u7528\u53EF\u4EE5\u53C2\u8003\uFF1A<a href="/components/layout-cn.html">\u901A\u7528\u5E03\u5C40</a>\u3002</p><h2 id="api">API</h2><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-menu</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-menu-item</span><span class="token punctuation">&gt;</span></span>\u83DC\u5355\u9879<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-menu-item</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-sub-menu</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>\u5B50\u83DC\u5355<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-menu-item</span><span class="token punctuation">&gt;</span></span>\u5B50\u83DC\u5355\u9879<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-menu-item</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-sub-menu</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-menu</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
</code></pre><h3 id="menu">Menu</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>forceSubMenuRender</td><td>\u5728\u5B50\u83DC\u5355\u5C55\u793A\u4E4B\u524D\u5C31\u6E32\u67D3\u8FDB DOM</td><td>boolean</td><td>false</td></tr><tr><td>inlineCollapsed</td><td>inline \u65F6\u83DC\u5355\u662F\u5426\u6536\u8D77\u72B6\u6001</td><td>boolean</td><td>-</td></tr><tr><td>inlineIndent</td><td>inline \u6A21\u5F0F\u7684\u83DC\u5355\u7F29\u8FDB\u5BBD\u5EA6</td><td>number</td><td>24</td></tr><tr><td>mode</td><td>\u83DC\u5355\u7C7B\u578B\uFF0C\u73B0\u5728\u652F\u6301\u5782\u76F4\u3001\u6C34\u5E73\u3001\u548C\u5185\u5D4C\u6A21\u5F0F\u4E09\u79CD</td><td>string: <code>vertical</code> <code>vertical-right</code> <code>horizontal</code> <code>inline</code></td><td><code>vertical</code></td></tr><tr><td>multiple</td><td>\u662F\u5426\u5141\u8BB8\u591A\u9009</td><td>boolean</td><td>false</td></tr><tr><td>openKeys(v-model)</td><td>\u5F53\u524D\u5C55\u5F00\u7684 SubMenu \u83DC\u5355\u9879 key \u6570\u7EC4</td><td>string[]</td><td></td></tr><tr><td>selectable</td><td>\u662F\u5426\u5141\u8BB8\u9009\u4E2D</td><td>boolean</td><td>true</td></tr><tr><td>selectedKeys(v-model)</td><td>\u5F53\u524D\u9009\u4E2D\u7684\u83DC\u5355\u9879 key \u6570\u7EC4</td><td>string[]</td><td></td></tr><tr><td>subMenuCloseDelay</td><td>\u7528\u6237\u9F20\u6807\u79BB\u5F00\u5B50\u83DC\u5355\u540E\u5173\u95ED\u5EF6\u65F6\uFF0C\u5355\u4F4D\uFF1A\u79D2</td><td>number</td><td>0.1</td></tr><tr><td>subMenuOpenDelay</td><td>\u7528\u6237\u9F20\u6807\u8FDB\u5165\u5B50\u83DC\u5355\u540E\u5F00\u542F\u5EF6\u65F6\uFF0C\u5355\u4F4D\uFF1A\u79D2</td><td>number</td><td>0</td></tr><tr><td>theme</td><td>\u4E3B\u9898\u989C\u8272</td><td>string: <code>light</code> <code>dark</code></td><td><code>light</code></td></tr><tr><td>overflowedIndicator</td><td>\u81EA\u5B9A\u4E49 Menu \u6298\u53E0\u65F6\u7684\u56FE\u6807</td><td>DOM</td><td><code>&lt;span&gt;\xB7\xB7\xB7&lt;/span&gt;</code></td></tr></tbody></table><h3 id="menu-\u4E8B\u4EF6">Menu \u4E8B\u4EF6</h3><table><thead><tr><th>\u4E8B\u4EF6\u540D\u79F0</th><th>\u8BF4\u660E</th><th>\u56DE\u8C03\u53C2\u6570</th></tr></thead><tbody><tr><td>click</td><td>\u70B9\u51FB MenuItem \u8C03\u7528\u6B64\u51FD\u6570</td><td>function({ item, key, keyPath })</td></tr><tr><td>deselect</td><td>\u53D6\u6D88\u9009\u4E2D\u65F6\u8C03\u7528\uFF0C\u4EC5\u5728 multiple \u751F\u6548</td><td>function({ item, key, selectedKeys })</td></tr><tr><td>openChange</td><td>SubMenu \u5C55\u5F00/\u5173\u95ED\u7684\u56DE\u8C03</td><td>function(openKeys: string[])</td></tr><tr><td>select</td><td>\u88AB\u9009\u4E2D\u65F6\u8C03\u7528</td><td>function({ item, key, selectedKeys })</td></tr></tbody></table><h3 id="menu-item">Menu.Item</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th><th>\u7248\u672C</th></tr></thead><tbody><tr><td>disabled</td><td>\u662F\u5426\u7981\u7528</td><td>boolean</td><td>false</td><td></td></tr><tr><td>key</td><td>item \u7684\u552F\u4E00\u6807\u5FD7</td><td>string</td><td></td><td></td></tr><tr><td>title</td><td>\u8BBE\u7F6E\u6536\u7F29\u65F6\u5C55\u793A\u7684\u60AC\u6D6E\u6807\u9898</td><td>string/slot</td><td></td><td></td></tr><tr><td>icon</td><td>\u83DC\u5355\u56FE\u6807</td><td>slot</td><td></td><td>2.8.0</td></tr></tbody></table><h3 id="menu-submenu">Menu.SubMenu</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th><th>\u7248\u672C</th></tr></thead><tbody><tr><td>popupClassName</td><td>\u5B50\u83DC\u5355\u6837\u5F0F</td><td>string</td><td></td><td>1.5.0</td></tr><tr><td>disabled</td><td>\u662F\u5426\u7981\u7528</td><td>boolean</td><td>false</td><td></td></tr><tr><td>key</td><td>\u552F\u4E00\u6807\u5FD7</td><td>string</td><td></td><td></td></tr><tr><td>title</td><td>\u5B50\u83DC\u5355\u9879\u503C</td><td>string|slot</td><td></td><td></td></tr><tr><td>expandIcon</td><td>\u81EA\u5B9A\u4E49 Menu \u5C55\u5F00\u6536\u8D77\u56FE\u6807</td><td>slot</td><td>\u7BAD\u5934\u56FE\u6807</td><td></td></tr><tr><td>icon</td><td>\u83DC\u5355\u56FE\u6807</td><td>slot</td><td></td><td>2.8.0</td></tr></tbody></table><p>Menu.SubMenu \u7684\u5B50\u5143\u7D20\u5FC5\u987B\u662F <code>MenuItem</code> \u6216\u8005 <code>SubMenu</code>.</p><h3 id="submenu-\u4E8B\u4EF6">SubMenu \u4E8B\u4EF6</h3><table><thead><tr><th>\u4E8B\u4EF6\u540D\u79F0</th><th>\u8BF4\u660E</th><th>\u56DE\u8C03\u53C2\u6570</th></tr></thead><tbody><tr><td>titleClick</td><td>\u70B9\u51FB\u5B50\u83DC\u5355\u6807\u9898</td><td>({ key, domEvent })</td></tr></tbody></table><h3 id="menu-itemgroup">Menu.ItemGroup</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>title</td><td>\u5206\u7EC4\u6807\u9898</td><td>string||function|slot</td><td></td></tr></tbody></table><p>Menu.ItemGroup \u7684\u5B50\u5143\u7D20\u5FC5\u987B\u662F <code>MenuItem</code>.</p><h3 id="menu-divider">Menu.Divider</h3><p>\u83DC\u5355\u9879\u5206\u5272\u7EBF\uFF0C\u53EA\u7528\u5728\u5F39\u51FA\u83DC\u5355\u5185\u3002</p>`,22)]))}var J=Z(z,[["render",E]]);const Q={pageData:{title:"Menu",description:"",frontmatter:{category:"Components",cols:1,type:"Navigation",title:"Menu",cover:"https://gw.alipayobjects.com/zos/alicdn/3XZcjGpvK/Menu.svg"},headers:[{level:2,title:"When To Use",slug:"when-to-use",content:"Navigation is an important part of any website, as a good navigation setup allows users to move around the site quickly and efficiently. Ant Design offers top and side navigation options. Top navigation provides all the categories and functions of the website. Side navigation provides the multi-level structure of the website."},{level:2,title:"API",slug:"api",content:""},{level:3,title:"Menu",slug:"menu",content:""},{level:3,title:"Menu Events",slug:"menu-events",content:""},{level:3,title:"Menu.Item",slug:"menu-item",content:""},{level:3,title:"Menu.SubMenu",slug:"menu-submenu",content:""},{level:3,title:"Menu.SubMenu Events",slug:"menu-submenu-events",content:""},{level:3,title:"Menu.ItemGroup",slug:"menu-itemgroup",content:""},{level:3,title:"Menu.Divider",slug:"menu-divider",content:"Divider line in between menu items, only used in vertical popup Menu or Dropdown Menu."}],relativePath:"src/docs/menu/index.en-US.md",content:`
A versatile menu for navigation.

## When To Use

Navigation is an important part of any website, as a good navigation setup allows users to move around the site quickly and efficiently. Ant Design offers top and side navigation options. Top navigation provides all the categories and functions of the website. Side navigation provides the multi-level structure of the website.

More layouts with navigation: [Layout](/components/layout).

## API

\`\`\`html
&lt;template&gt;
  &lt;a-menu&gt;
    &lt;a-menu-item&gt;Menu&lt;/a-menu-item&gt;
    &lt;a-sub-menu title=&quot;SubMenu&quot;&gt;
      &lt;a-menu-item&gt;SubMenuItem&lt;/a-menu-item&gt;
    &lt;/a-sub-menu&gt;
  &lt;/a-menu&gt;
&lt;/template&gt;
\`\`\`

### Menu

| Param | Description | Type | Default value |
| --- | --- | --- | --- |
| forceSubMenuRender | render submenu into DOM before it shows | boolean | false |
| inlineCollapsed | specifies the collapsed status when menu is inline mode | boolean | - |
| inlineIndent | indent px of inline menu item on each level | number | 24 |
| mode | type of the menu; \`vertical\`, \`horizontal\`, and \`inline\` modes are supported | string: \`vertical\` \\| \`vertical-right\` \\| \`horizontal\` \\| \`inline\` | \`vertical\` |
| multiple | Allow selection of multiple items | boolean | false |
| openKeys(v-model) | array with the keys of currently opened sub menus | string\\[] |  |
| selectable | allow selecting menu items | boolean | true |
| selectedKeys(v-model) | array with the keys of currently selected menu items | string\\[] |  |
| style | style of the root node | object |  |
| subMenuCloseDelay | delay time to hide submenu when mouse leave, unit: second | number | 0.1 |
| subMenuOpenDelay | delay time to show submenu when mouse enter, unit: second | number | 0 |
| theme | color theme of the menu | string: \`light\` \`dark\` | \`light\` |
| overflowedIndicator | Customized icon when menu is collapsed | DOM | \`&lt;span&gt;\xB7\xB7\xB7&lt;/span&gt;\` |

### Menu Events

| Events Name | Description | Arguments |
| --- | --- | --- |
| click | callback executed when a menu item is clicked | function({ item, key, keyPath }) |
| deselect | callback executed when a menu item is deselected, only supported for multiple mode | function({ item, key, selectedKeys }) |
| openChange | called when open/close sub menu | function(openKeys: string\\[]) |
| select | callback executed when a menu item is selected | function({ item, key, selectedKeys }) |

### Menu.Item

| Param    | Description                          | Type    | Default value |
| -------- | ------------------------------------ | ------- | ------------- |
| disabled | whether menu item is disabled or not | boolean | false         |
| key      | unique id of the menu item           | string  |               |
| title    | set display title for collapsed item | string  |               |

### Menu.SubMenu

| Param          | Description                         | Type         | Default value | Version |
| -------------- | ----------------------------------- | ------------ | ------------- | ------- |
| popupClassName | Sub-menu class name                 | string       |               | 1.5.0   |
| disabled       | whether sub menu is disabled or not | boolean      | false         |         |
| key            | Unique ID of the sub menu           | string       |               |         |
| title          | title of the sub menu               | string\\|slot |               |         |
| expandIcon     | Customized expandIcon               | slot         | arrow icon    | \uFF5C      |

The children of Menu.SubMenu must be \`MenuItem\` or \`SubMenu\`.

### Menu.SubMenu Events

| Events Name | Description                                          | Arguments                   |
| ----------- | ---------------------------------------------------- | --------------------------- |
| titleClick  | callback executed when the sub menu title is clicked | function({ key, domEvent }) |

### Menu.ItemGroup

| Param    | Description        | Type         | Default value |
| -------- | ------------------ | ------------ | ------------- |
| children | sub-menu items     | MenuItem\\[]  |               |
| title    | title of the group | string\\|slot |               |

The children of Menu.ItemGroup must be \`MenuItem\`.

### Menu.Divider

Divider line in between menu items, only used in vertical popup Menu or Dropdown Menu.
`,html:`<p>A versatile menu for navigation.</p>
<h2 id="when-to-use">When To Use</h2>
<p>Navigation is an important part of any website, as a good navigation setup allows users to move around the site quickly and efficiently. Ant Design offers top and side navigation options. Top navigation provides all the categories and functions of the website. Side navigation provides the multi-level structure of the website.</p>
<p>More layouts with navigation: <a href="/components/layout.html">Layout</a>.</p>
<h2 id="api">API</h2>
<pre class="language-html" v-pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-menu</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-menu-item</span><span class="token punctuation">></span></span>Menu<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-menu-item</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-sub-menu</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>SubMenu<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-menu-item</span><span class="token punctuation">></span></span>SubMenuItem<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-menu-item</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-sub-menu</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-menu</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">></span></span>
</code></pre>
<h3 id="menu">Menu</h3>
<table>
<thead>
<tr>
<th>Param</th>
<th>Description</th>
<th>Type</th>
<th>Default value</th>
</tr>
</thead>
<tbody>
<tr>
<td>forceSubMenuRender</td>
<td>render submenu into DOM before it shows</td>
<td>boolean</td>
<td>false</td>
</tr>
<tr>
<td>inlineCollapsed</td>
<td>specifies the collapsed status when menu is inline mode</td>
<td>boolean</td>
<td>-</td>
</tr>
<tr>
<td>inlineIndent</td>
<td>indent px of inline menu item on each level</td>
<td>number</td>
<td>24</td>
</tr>
<tr>
<td>mode</td>
<td>type of the menu; <code>vertical</code>, <code>horizontal</code>, and <code>inline</code> modes are supported</td>
<td>string: <code>vertical</code> | <code>vertical-right</code> | <code>horizontal</code> | <code>inline</code></td>
<td><code>vertical</code></td>
</tr>
<tr>
<td>multiple</td>
<td>Allow selection of multiple items</td>
<td>boolean</td>
<td>false</td>
</tr>
<tr>
<td>openKeys(v-model)</td>
<td>array with the keys of currently opened sub menus</td>
<td>string[]</td>
<td></td>
</tr>
<tr>
<td>selectable</td>
<td>allow selecting menu items</td>
<td>boolean</td>
<td>true</td>
</tr>
<tr>
<td>selectedKeys(v-model)</td>
<td>array with the keys of currently selected menu items</td>
<td>string[]</td>
<td></td>
</tr>
<tr>
<td>style</td>
<td>style of the root node</td>
<td>object</td>
<td></td>
</tr>
<tr>
<td>subMenuCloseDelay</td>
<td>delay time to hide submenu when mouse leave, unit: second</td>
<td>number</td>
<td>0.1</td>
</tr>
<tr>
<td>subMenuOpenDelay</td>
<td>delay time to show submenu when mouse enter, unit: second</td>
<td>number</td>
<td>0</td>
</tr>
<tr>
<td>theme</td>
<td>color theme of the menu</td>
<td>string: <code>light</code> <code>dark</code></td>
<td><code>light</code></td>
</tr>
<tr>
<td>overflowedIndicator</td>
<td>Customized icon when menu is collapsed</td>
<td>DOM</td>
<td><code>&lt;span&gt;\xB7\xB7\xB7&lt;/span&gt;</code></td>
</tr>
</tbody>
</table>
<h3 id="menu-events">Menu Events</h3>
<table>
<thead>
<tr>
<th>Events Name</th>
<th>Description</th>
<th>Arguments</th>
</tr>
</thead>
<tbody>
<tr>
<td>click</td>
<td>callback executed when a menu item is clicked</td>
<td>function({ item, key, keyPath })</td>
</tr>
<tr>
<td>deselect</td>
<td>callback executed when a menu item is deselected, only supported for multiple mode</td>
<td>function({ item, key, selectedKeys })</td>
</tr>
<tr>
<td>openChange</td>
<td>called when open/close sub menu</td>
<td>function(openKeys: string[])</td>
</tr>
<tr>
<td>select</td>
<td>callback executed when a menu item is selected</td>
<td>function({ item, key, selectedKeys })</td>
</tr>
</tbody>
</table>
<h3 id="menu-item">Menu.Item</h3>
<table>
<thead>
<tr>
<th>Param</th>
<th>Description</th>
<th>Type</th>
<th>Default value</th>
</tr>
</thead>
<tbody>
<tr>
<td>disabled</td>
<td>whether menu item is disabled or not</td>
<td>boolean</td>
<td>false</td>
</tr>
<tr>
<td>key</td>
<td>unique id of the menu item</td>
<td>string</td>
<td></td>
</tr>
<tr>
<td>title</td>
<td>set display title for collapsed item</td>
<td>string</td>
<td></td>
</tr>
</tbody>
</table>
<h3 id="menu-submenu">Menu.SubMenu</h3>
<table>
<thead>
<tr>
<th>Param</th>
<th>Description</th>
<th>Type</th>
<th>Default value</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>popupClassName</td>
<td>Sub-menu class name</td>
<td>string</td>
<td></td>
<td>1.5.0</td>
</tr>
<tr>
<td>disabled</td>
<td>whether sub menu is disabled or not</td>
<td>boolean</td>
<td>false</td>
<td></td>
</tr>
<tr>
<td>key</td>
<td>Unique ID of the sub menu</td>
<td>string</td>
<td></td>
<td></td>
</tr>
<tr>
<td>title</td>
<td>title of the sub menu</td>
<td>string|slot</td>
<td></td>
<td></td>
</tr>
<tr>
<td>expandIcon</td>
<td>Customized expandIcon</td>
<td>slot</td>
<td>arrow icon</td>
<td>\uFF5C</td>
</tr>
</tbody>
</table>
<p>The children of Menu.SubMenu must be <code>MenuItem</code> or <code>SubMenu</code>.</p>
<h3 id="menu-submenu-events">Menu.SubMenu Events</h3>
<table>
<thead>
<tr>
<th>Events Name</th>
<th>Description</th>
<th>Arguments</th>
</tr>
</thead>
<tbody>
<tr>
<td>titleClick</td>
<td>callback executed when the sub menu title is clicked</td>
<td>function({ key, domEvent })</td>
</tr>
</tbody>
</table>
<h3 id="menu-itemgroup">Menu.ItemGroup</h3>
<table>
<thead>
<tr>
<th>Param</th>
<th>Description</th>
<th>Type</th>
<th>Default value</th>
</tr>
</thead>
<tbody>
<tr>
<td>children</td>
<td>sub-menu items</td>
<td>MenuItem[]</td>
<td></td>
</tr>
<tr>
<td>title</td>
<td>title of the group</td>
<td>string|slot</td>
<td></td>
</tr>
</tbody>
</table>
<p>The children of Menu.ItemGroup must be <code>MenuItem</code>.</p>
<h3 id="menu-divider">Menu.Divider</h3>
<p>Divider line in between menu items, only used in vertical popup Menu or Dropdown Menu.</p>
`,lastUpdated:1748059052700}},_={class:"markdown"};function $(o,a,i,g,I,G){return d(),X("article",_,a[0]||(a[0]=[Y(`<p>A versatile menu for navigation.</p><h2 id="when-to-use">When To Use</h2><p>Navigation is an important part of any website, as a good navigation setup allows users to move around the site quickly and efficiently. Ant Design offers top and side navigation options. Top navigation provides all the categories and functions of the website. Side navigation provides the multi-level structure of the website.</p><p>More layouts with navigation: <a href="/components/layout.html">Layout</a>.</p><h2 id="api">API</h2><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-menu</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-menu-item</span><span class="token punctuation">&gt;</span></span>Menu<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-menu-item</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-sub-menu</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>SubMenu<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-menu-item</span><span class="token punctuation">&gt;</span></span>SubMenuItem<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-menu-item</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-sub-menu</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-menu</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
</code></pre><h3 id="menu">Menu</h3><table><thead><tr><th>Param</th><th>Description</th><th>Type</th><th>Default value</th></tr></thead><tbody><tr><td>forceSubMenuRender</td><td>render submenu into DOM before it shows</td><td>boolean</td><td>false</td></tr><tr><td>inlineCollapsed</td><td>specifies the collapsed status when menu is inline mode</td><td>boolean</td><td>-</td></tr><tr><td>inlineIndent</td><td>indent px of inline menu item on each level</td><td>number</td><td>24</td></tr><tr><td>mode</td><td>type of the menu; <code>vertical</code>, <code>horizontal</code>, and <code>inline</code> modes are supported</td><td>string: <code>vertical</code> | <code>vertical-right</code> | <code>horizontal</code> | <code>inline</code></td><td><code>vertical</code></td></tr><tr><td>multiple</td><td>Allow selection of multiple items</td><td>boolean</td><td>false</td></tr><tr><td>openKeys(v-model)</td><td>array with the keys of currently opened sub menus</td><td>string[]</td><td></td></tr><tr><td>selectable</td><td>allow selecting menu items</td><td>boolean</td><td>true</td></tr><tr><td>selectedKeys(v-model)</td><td>array with the keys of currently selected menu items</td><td>string[]</td><td></td></tr><tr><td>style</td><td>style of the root node</td><td>object</td><td></td></tr><tr><td>subMenuCloseDelay</td><td>delay time to hide submenu when mouse leave, unit: second</td><td>number</td><td>0.1</td></tr><tr><td>subMenuOpenDelay</td><td>delay time to show submenu when mouse enter, unit: second</td><td>number</td><td>0</td></tr><tr><td>theme</td><td>color theme of the menu</td><td>string: <code>light</code> <code>dark</code></td><td><code>light</code></td></tr><tr><td>overflowedIndicator</td><td>Customized icon when menu is collapsed</td><td>DOM</td><td><code>&lt;span&gt;\xB7\xB7\xB7&lt;/span&gt;</code></td></tr></tbody></table><h3 id="menu-events">Menu Events</h3><table><thead><tr><th>Events Name</th><th>Description</th><th>Arguments</th></tr></thead><tbody><tr><td>click</td><td>callback executed when a menu item is clicked</td><td>function({ item, key, keyPath })</td></tr><tr><td>deselect</td><td>callback executed when a menu item is deselected, only supported for multiple mode</td><td>function({ item, key, selectedKeys })</td></tr><tr><td>openChange</td><td>called when open/close sub menu</td><td>function(openKeys: string[])</td></tr><tr><td>select</td><td>callback executed when a menu item is selected</td><td>function({ item, key, selectedKeys })</td></tr></tbody></table><h3 id="menu-item">Menu.Item</h3><table><thead><tr><th>Param</th><th>Description</th><th>Type</th><th>Default value</th></tr></thead><tbody><tr><td>disabled</td><td>whether menu item is disabled or not</td><td>boolean</td><td>false</td></tr><tr><td>key</td><td>unique id of the menu item</td><td>string</td><td></td></tr><tr><td>title</td><td>set display title for collapsed item</td><td>string</td><td></td></tr></tbody></table><h3 id="menu-submenu">Menu.SubMenu</h3><table><thead><tr><th>Param</th><th>Description</th><th>Type</th><th>Default value</th><th>Version</th></tr></thead><tbody><tr><td>popupClassName</td><td>Sub-menu class name</td><td>string</td><td></td><td>1.5.0</td></tr><tr><td>disabled</td><td>whether sub menu is disabled or not</td><td>boolean</td><td>false</td><td></td></tr><tr><td>key</td><td>Unique ID of the sub menu</td><td>string</td><td></td><td></td></tr><tr><td>title</td><td>title of the sub menu</td><td>string|slot</td><td></td><td></td></tr><tr><td>expandIcon</td><td>Customized expandIcon</td><td>slot</td><td>arrow icon</td><td>\uFF5C</td></tr></tbody></table><p>The children of Menu.SubMenu must be <code>MenuItem</code> or <code>SubMenu</code>.</p><h3 id="menu-submenu-events">Menu.SubMenu Events</h3><table><thead><tr><th>Events Name</th><th>Description</th><th>Arguments</th></tr></thead><tbody><tr><td>titleClick</td><td>callback executed when the sub menu title is clicked</td><td>function({ key, domEvent })</td></tr></tbody></table><h3 id="menu-itemgroup">Menu.ItemGroup</h3><table><thead><tr><th>Param</th><th>Description</th><th>Type</th><th>Default value</th></tr></thead><tbody><tr><td>children</td><td>sub-menu items</td><td>MenuItem[]</td><td></td></tr><tr><td>title</td><td>title of the group</td><td>string|slot</td><td></td></tr></tbody></table><p>The children of Menu.ItemGroup must be <code>MenuItem</code>.</p><h3 id="menu-divider">Menu.Divider</h3><p>Divider line in between menu items, only used in vertical popup Menu or Dropdown Menu.</p>`,22)]))}var nn=Z(Q,[["render",$]]);const tn=v({setup(){return{current:R(["mail"])}},components:{MailOutlined:h,AppstoreOutlined:V,SettingOutlined:S}});function an(o,a,i,g,I,G){const m=p("mail-outlined"),l=p("a-menu-item"),c=p("appstore-outlined"),C=p("setting-outlined"),u=p("a-menu-item-group"),r=p("a-sub-menu"),A=p("a-menu"),b=p("demo-box");return d(),W(b,{jsfiddle:{us:"Horizontal top navigation menu.",cn:"\u6C34\u5E73\u7684\u9876\u90E8\u5BFC\u822A\u83DC\u5355\u3002",docHtml:`<h2 id="zh-cn">zh-CN</h2>
<p>\u6C34\u5E73\u7684\u9876\u90E8\u5BFC\u822A\u83DC\u5355\u3002</p>
<h2 id="en-us">en-US</h2>
<p>Horizontal top navigation menu.</p>
`,order:0,title:{"zh-CN":"\u9876\u90E8\u5BFC\u822A","en-US":"Top Navigation"},relativePath:"src/docs/menu/demo/horizontal.vue",sourceCode:"PHRlbXBsYXRlPgogIDxhLW1lbnUgdi1tb2RlbDpzZWxlY3RlZEtleXM9ImN1cnJlbnQiIG1vZGU9Imhvcml6b250YWwiPgogICAgPGEtbWVudS1pdGVtIGtleT0ibWFpbCI+CiAgICAgIDx0ZW1wbGF0ZSAjaWNvbj4KICAgICAgICA8bWFpbC1vdXRsaW5lZCAvPgogICAgICA8L3RlbXBsYXRlPgogICAgICBOYXZpZ2F0aW9uIE9uZQogICAgPC9hLW1lbnUtaXRlbT4KICAgIDxhLW1lbnUtaXRlbSBrZXk9ImFwcCIgZGlzYWJsZWQ+CiAgICAgIDx0ZW1wbGF0ZSAjaWNvbj4KICAgICAgICA8YXBwc3RvcmUtb3V0bGluZWQgLz4KICAgICAgPC90ZW1wbGF0ZT4KICAgICAgTmF2aWdhdGlvbiBUd28KICAgIDwvYS1tZW51LWl0ZW0+CiAgICA8YS1zdWItbWVudT4KICAgICAgPHRlbXBsYXRlICNpY29uPgogICAgICAgIDxzZXR0aW5nLW91dGxpbmVkIC8+CiAgICAgIDwvdGVtcGxhdGU+CiAgICAgIDx0ZW1wbGF0ZSAjdGl0bGU+TmF2aWdhdGlvbiBUaHJlZSAtIFN1Ym1lbnU8L3RlbXBsYXRlPgogICAgICA8YS1tZW51LWl0ZW0tZ3JvdXAgdGl0bGU9Ikl0ZW0gMSI+CiAgICAgICAgPGEtbWVudS1pdGVtIGtleT0ic2V0dGluZzoxIj5PcHRpb24gMTwvYS1tZW51LWl0ZW0+CiAgICAgICAgPGEtbWVudS1pdGVtIGtleT0ic2V0dGluZzoyIj5PcHRpb24gMjwvYS1tZW51LWl0ZW0+CiAgICAgIDwvYS1tZW51LWl0ZW0tZ3JvdXA+CiAgICAgIDxhLW1lbnUtaXRlbS1ncm91cCB0aXRsZT0iSXRlbSAyIj4KICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSJzZXR0aW5nOjMiPk9wdGlvbiAzPC9hLW1lbnUtaXRlbT4KICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSJzZXR0aW5nOjQiPk9wdGlvbiA0PC9hLW1lbnUtaXRlbT4KICAgICAgPC9hLW1lbnUtaXRlbS1ncm91cD4KICAgIDwvYS1zdWItbWVudT4KICAgIDxhLW1lbnUtaXRlbSBrZXk9ImFsaXBheSI+CiAgICAgIDxhIGhyZWY9Imh0dHBzOi8vYW50ZHYuY29tIiB0YXJnZXQ9Il9ibGFuayIgcmVsPSJub29wZW5lciBub3JlZmVycmVyIj4KICAgICAgICBOYXZpZ2F0aW9uIEZvdXIgLSBMaW5rCiAgICAgIDwvYT4KICAgIDwvYS1tZW51LWl0ZW0+CiAgPC9hLW1lbnU+CjwvdGVtcGxhdGU+CjxzY3JpcHQgbGFuZz0idHMiPgppbXBvcnQgeyBkZWZpbmVDb21wb25lbnQsIHJlZiB9IGZyb20gJ3Z1ZSc7CmltcG9ydCB7IE1haWxPdXRsaW5lZCwgQXBwc3RvcmVPdXRsaW5lZCwgU2V0dGluZ091dGxpbmVkIH0gZnJvbSAnQGFudC1kZXNpZ24vaWNvbnMtdnVlJzsKZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29tcG9uZW50KHsKICBzZXR1cCgpIHsKICAgIGNvbnN0IGN1cnJlbnQgPSByZWY8c3RyaW5nW10+KFsnbWFpbCddKTsKICAgIHJldHVybiB7CiAgICAgIGN1cnJlbnQsCiAgICB9OwogIH0sCiAgY29tcG9uZW50czogewogICAgTWFpbE91dGxpbmVkLAogICAgQXBwc3RvcmVPdXRsaW5lZCwKICAgIFNldHRpbmdPdXRsaW5lZCwKICB9LAp9KTsKPC9zY3JpcHQ+Cgo=",jsSourceCode:"PHRlbXBsYXRlPgogIDxhLW1lbnUgdi1tb2RlbDpzZWxlY3RlZEtleXM9ImN1cnJlbnQiIG1vZGU9Imhvcml6b250YWwiPgogICAgPGEtbWVudS1pdGVtIGtleT0ibWFpbCI+CiAgICAgIDx0ZW1wbGF0ZSAjaWNvbj4KICAgICAgICA8bWFpbC1vdXRsaW5lZCAvPgogICAgICA8L3RlbXBsYXRlPgogICAgICBOYXZpZ2F0aW9uIE9uZQogICAgPC9hLW1lbnUtaXRlbT4KICAgIDxhLW1lbnUtaXRlbSBrZXk9ImFwcCIgZGlzYWJsZWQ+CiAgICAgIDx0ZW1wbGF0ZSAjaWNvbj4KICAgICAgICA8YXBwc3RvcmUtb3V0bGluZWQgLz4KICAgICAgPC90ZW1wbGF0ZT4KICAgICAgTmF2aWdhdGlvbiBUd28KICAgIDwvYS1tZW51LWl0ZW0+CiAgICA8YS1zdWItbWVudT4KICAgICAgPHRlbXBsYXRlICNpY29uPgogICAgICAgIDxzZXR0aW5nLW91dGxpbmVkIC8+CiAgICAgIDwvdGVtcGxhdGU+CiAgICAgIDx0ZW1wbGF0ZSAjdGl0bGU+TmF2aWdhdGlvbiBUaHJlZSAtIFN1Ym1lbnU8L3RlbXBsYXRlPgogICAgICA8YS1tZW51LWl0ZW0tZ3JvdXAgdGl0bGU9Ikl0ZW0gMSI+CiAgICAgICAgPGEtbWVudS1pdGVtIGtleT0ic2V0dGluZzoxIj5PcHRpb24gMTwvYS1tZW51LWl0ZW0+CiAgICAgICAgPGEtbWVudS1pdGVtIGtleT0ic2V0dGluZzoyIj5PcHRpb24gMjwvYS1tZW51LWl0ZW0+CiAgICAgIDwvYS1tZW51LWl0ZW0tZ3JvdXA+CiAgICAgIDxhLW1lbnUtaXRlbS1ncm91cCB0aXRsZT0iSXRlbSAyIj4KICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSJzZXR0aW5nOjMiPk9wdGlvbiAzPC9hLW1lbnUtaXRlbT4KICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSJzZXR0aW5nOjQiPk9wdGlvbiA0PC9hLW1lbnUtaXRlbT4KICAgICAgPC9hLW1lbnUtaXRlbS1ncm91cD4KICAgIDwvYS1zdWItbWVudT4KICAgIDxhLW1lbnUtaXRlbSBrZXk9ImFsaXBheSI+CiAgICAgIDxhIGhyZWY9Imh0dHBzOi8vYW50ZHYuY29tIiB0YXJnZXQ9Il9ibGFuayIgcmVsPSJub29wZW5lciBub3JlZmVycmVyIj4KICAgICAgICBOYXZpZ2F0aW9uIEZvdXIgLSBMaW5rCiAgICAgIDwvYT4KICAgIDwvYS1tZW51LWl0ZW0+CiAgPC9hLW1lbnU+CjwvdGVtcGxhdGU+CjxzY3JpcHQ+CmltcG9ydCB7IGRlZmluZUNvbXBvbmVudCwgcmVmIH0gZnJvbSAndnVlJzsKaW1wb3J0IHsgTWFpbE91dGxpbmVkLCBBcHBzdG9yZU91dGxpbmVkLCBTZXR0aW5nT3V0bGluZWQgfSBmcm9tICdAYW50LWRlc2lnbi9pY29ucy12dWUnOwpleHBvcnQgZGVmYXVsdCBkZWZpbmVDb21wb25lbnQoewogIHNldHVwKCkgewogICAgY29uc3QgY3VycmVudCA9IHJlZihbJ21haWwnXSk7CiAgICByZXR1cm4gewogICAgICBjdXJyZW50LAogICAgfTsKICB9LAogIGNvbXBvbmVudHM6IHsKICAgIE1haWxPdXRsaW5lZCwKICAgIEFwcHN0b3JlT3V0bGluZWQsCiAgICBTZXR0aW5nT3V0bGluZWQsCiAgfSwKfSk7Cjwvc2NyaXB0Pg=="}},{default:s(()=>[e(A,{selectedKeys:o.current,"onUpdate:selectedKeys":a[0]||(a[0]=k=>o.current=k),mode:"horizontal"},{default:s(()=>[e(l,{key:"mail"},{icon:s(()=>[e(m)]),default:s(()=>[a[1]||(a[1]=t(" Navigation One "))]),_:1,__:[1]}),e(l,{key:"app",disabled:""},{icon:s(()=>[e(c)]),default:s(()=>[a[2]||(a[2]=t(" Navigation Two "))]),_:1,__:[2]}),e(r,null,{icon:s(()=>[e(C)]),title:s(()=>a[3]||(a[3]=[t("Navigation Three - Submenu")])),default:s(()=>[e(u,{title:"Item 1"},{default:s(()=>[e(l,{key:"setting:1"},{default:s(()=>a[4]||(a[4]=[t("Option 1")])),_:1,__:[4]}),e(l,{key:"setting:2"},{default:s(()=>a[5]||(a[5]=[t("Option 2")])),_:1,__:[5]})]),_:1}),e(u,{title:"Item 2"},{default:s(()=>[e(l,{key:"setting:3"},{default:s(()=>a[6]||(a[6]=[t("Option 3")])),_:1,__:[6]}),e(l,{key:"setting:4"},{default:s(()=>a[7]||(a[7]=[t("Option 4")])),_:1,__:[7]})]),_:1})]),_:1}),e(l,{key:"alipay"},{default:s(()=>a[8]||(a[8]=[n("a",{href:"https://antdv.com",target:"_blank",rel:"noopener noreferrer"}," Navigation Four - Link ",-1)])),_:1,__:[8]})]),_:1},8,["selectedKeys"])]),htmlCode:s(()=>a[9]||(a[9]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu")]),t(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),t("selectedKeys")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("current"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"mode"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("horizontal"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("mail"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("mail-outlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
      Navigation One
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("app"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"disabled"),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("appstore-outlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
      Navigation Two
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-sub-menu")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("setting-outlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#title"),n("span",{class:"token punctuation"},">")]),t("Navigation Three - Submenu"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item-group")]),t(),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("Item 1"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("setting:1"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 1"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("setting:2"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 2"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item-group")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item-group")]),t(),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("Item 2"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("setting:3"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 3"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("setting:4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 4"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item-group")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-sub-menu")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("alipay"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a")]),t(),n("span",{class:"token attr-name"},"href"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("https://antdv.com"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"target"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("_blank"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"rel"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("noopener noreferrer"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        Navigation Four - Link
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("script")]),t(),n("span",{class:"token attr-name"},"lang"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("ts"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" defineComponent"),n("span",{class:"token punctuation"},","),t(" ref "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" MailOutlined"),n("span",{class:"token punctuation"},","),t(" AppstoreOutlined"),n("span",{class:"token punctuation"},","),t(" SettingOutlined "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'@ant-design/icons-vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"export"),t(),n("span",{class:"token keyword"},"default"),t(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token punctuation"},"{"),t(`
    `),n("span",{class:"token keyword"},"const"),t(" current "),n("span",{class:"token operator"},"="),t(" ref"),n("span",{class:"token operator"},"<"),t("string"),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"]"),n("span",{class:"token operator"},">"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"["),n("span",{class:"token string"},"'mail'"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token keyword"},"return"),t(),n("span",{class:"token punctuation"},"{"),t(`
      current`),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token literal-property property"},"components"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"{"),t(`
    MailOutlined`),n("span",{class:"token punctuation"},","),t(`
    AppstoreOutlined`),n("span",{class:"token punctuation"},","),t(`
    SettingOutlined`),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("script")]),n("span",{class:"token punctuation"},">")]),t(`
`)])],-1)])),jsVersionHtml:s(()=>a[10]||(a[10]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu")]),t(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),t("selectedKeys")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("current"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"mode"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("horizontal"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("mail"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("mail-outlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
      Navigation One
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("app"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"disabled"),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("appstore-outlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
      Navigation Two
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-sub-menu")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("setting-outlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#title"),n("span",{class:"token punctuation"},">")]),t("Navigation Three - Submenu"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item-group")]),t(),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("Item 1"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("setting:1"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 1"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("setting:2"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 2"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item-group")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item-group")]),t(),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("Item 2"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("setting:3"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 3"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("setting:4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 4"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item-group")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-sub-menu")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("alipay"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a")]),t(),n("span",{class:"token attr-name"},"href"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("https://antdv.com"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"target"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("_blank"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"rel"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("noopener noreferrer"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        Navigation Four - Link
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("script")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" defineComponent"),n("span",{class:"token punctuation"},","),t(" ref "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" MailOutlined"),n("span",{class:"token punctuation"},","),t(" AppstoreOutlined"),n("span",{class:"token punctuation"},","),t(" SettingOutlined "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'@ant-design/icons-vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"export"),t(),n("span",{class:"token keyword"},"default"),t(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token punctuation"},"{"),t(`
    `),n("span",{class:"token keyword"},"const"),t(" current "),n("span",{class:"token operator"},"="),t(),n("span",{class:"token function"},"ref"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"["),n("span",{class:"token string"},"'mail'"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token keyword"},"return"),t(),n("span",{class:"token punctuation"},"{"),t(`
      current`),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token literal-property property"},"components"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"{"),t(`
    MailOutlined`),n("span",{class:"token punctuation"},","),t(`
    AppstoreOutlined`),n("span",{class:"token punctuation"},","),t(`
    SettingOutlined`),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("script")]),n("span",{class:"token punctuation"},">")]),t(`
`)])],-1)])),_:1})}var sn=Z(tn,[["render",an]]);const en=v({setup(){const o=w({collapsed:!1,selectedKeys:["1"],openKeys:["sub1"],preOpenKeys:["sub1"]});L(()=>o.openKeys,(i,g)=>{o.preOpenKeys=g});const a=()=>{o.collapsed=!o.collapsed,o.openKeys=o.collapsed?[]:o.preOpenKeys};return{...P(o),toggleCollapsed:a}},components:{MenuFoldOutlined:T,MenuUnfoldOutlined:x,PieChartOutlined:f,MailOutlined:h,DesktopOutlined:j,InboxOutlined:F,AppstoreOutlined:V}}),on={style:{width:"256px"}};function pn(o,a,i,g,I,G){const m=p("MenuUnfoldOutlined"),l=p("MenuFoldOutlined"),c=p("a-button"),C=p("PieChartOutlined"),u=p("a-menu-item"),r=p("DesktopOutlined"),A=p("InboxOutlined"),b=p("MailOutlined"),k=p("a-sub-menu"),y=p("AppstoreOutlined"),N=p("a-menu"),D=p("demo-box");return d(),W(D,{jsfiddle:{us:"Inline menu could be collapsed.",cn:"\u5185\u5D4C\u83DC\u5355\u53EF\u4EE5\u88AB\u7F29\u8D77/\u5C55\u5F00\u3002",docHtml:`<h2 id="zh-cn">zh-CN</h2>
<p>\u5185\u5D4C\u83DC\u5355\u53EF\u4EE5\u88AB\u7F29\u8D77/\u5C55\u5F00\u3002</p>
<p>\u4F60\u53EF\u4EE5\u5728 <a href="/components/layout-cn/#components-layout-demo-side">Layout</a> \u91CC\u67E5\u770B\u4FA7\u8FB9\u5E03\u5C40\u7ED3\u5408\u7684\u5B8C\u6574\u793A\u4F8B\u3002</p>
<h2 id="en-us">en-US</h2>
<p>Inline menu could be collapsed.</p>
<p>Here is <a href="/components/layout/#components-layout-demo-side">a complete demo</a> with sider layout.</p>
`,order:2,title:{"zh-CN":"\u7F29\u8D77\u5185\u5D4C\u83DC\u5355","en-US":"Collapsed inline menu"},relativePath:"src/docs/menu/demo/inline-collapsed.vue",sourceCode:"PHRlbXBsYXRlPgogIDxkaXYgc3R5bGU9IndpZHRoOiAyNTZweCI+CiAgICA8YS1idXR0b24gdHlwZT0icHJpbWFyeSIgQGNsaWNrPSJ0b2dnbGVDb2xsYXBzZWQiIHN0eWxlPSJtYXJnaW4tYm90dG9tOiAxNnB4Ij4KICAgICAgPE1lbnVVbmZvbGRPdXRsaW5lZCB2LWlmPSJjb2xsYXBzZWQiIC8+CiAgICAgIDxNZW51Rm9sZE91dGxpbmVkIHYtZWxzZSAvPgogICAgPC9hLWJ1dHRvbj4KICAgIDxhLW1lbnUKICAgICAgbW9kZT0iaW5saW5lIgogICAgICB0aGVtZT0iZGFyayIKICAgICAgOmlubGluZS1jb2xsYXBzZWQ9ImNvbGxhcHNlZCIKICAgICAgdi1tb2RlbDpvcGVuS2V5cz0ib3BlbktleXMiCiAgICAgIHYtbW9kZWw6c2VsZWN0ZWRLZXlzPSJzZWxlY3RlZEtleXMiCiAgICA+CiAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjEiPgogICAgICAgIDx0ZW1wbGF0ZSAjaWNvbj4KICAgICAgICAgIDxQaWVDaGFydE91dGxpbmVkIC8+CiAgICAgICAgPC90ZW1wbGF0ZT4KICAgICAgICA8c3Bhbj5PcHRpb24gMTwvc3Bhbj4KICAgICAgPC9hLW1lbnUtaXRlbT4KICAgICAgPGEtbWVudS1pdGVtIGtleT0iMiI+CiAgICAgICAgPHRlbXBsYXRlICNpY29uPgogICAgICAgICAgPERlc2t0b3BPdXRsaW5lZCAvPgogICAgICAgIDwvdGVtcGxhdGU+CiAgICAgICAgPHNwYW4+T3B0aW9uIDI8L3NwYW4+CiAgICAgIDwvYS1tZW51LWl0ZW0+CiAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjMiPgogICAgICAgIDx0ZW1wbGF0ZSAjaWNvbj4KICAgICAgICAgIDxJbmJveE91dGxpbmVkIC8+CiAgICAgICAgPC90ZW1wbGF0ZT4KICAgICAgICA8c3Bhbj5PcHRpb24gMzwvc3Bhbj4KICAgICAgPC9hLW1lbnUtaXRlbT4KICAgICAgPGEtc3ViLW1lbnUga2V5PSJzdWIxIj4KICAgICAgICA8dGVtcGxhdGUgI2ljb24+CiAgICAgICAgICA8TWFpbE91dGxpbmVkIC8+CiAgICAgICAgPC90ZW1wbGF0ZT4KICAgICAgICA8dGVtcGxhdGUgI3RpdGxlPk5hdmlnYXRpb24gT25lPC90ZW1wbGF0ZT4KICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSI1Ij5PcHRpb24gNTwvYS1tZW51LWl0ZW0+CiAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iNiI+T3B0aW9uIDY8L2EtbWVudS1pdGVtPgogICAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjciPk9wdGlvbiA3PC9hLW1lbnUtaXRlbT4KICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSI4Ij5PcHRpb24gODwvYS1tZW51LWl0ZW0+CiAgICAgIDwvYS1zdWItbWVudT4KICAgICAgPGEtc3ViLW1lbnUga2V5PSJzdWIyIj4KICAgICAgICA8dGVtcGxhdGUgI2ljb24+CiAgICAgICAgICA8QXBwc3RvcmVPdXRsaW5lZCAvPgogICAgICAgIDwvdGVtcGxhdGU+CiAgICAgICAgPHRlbXBsYXRlICN0aXRsZT5OYXZpZ2F0aW9uIFR3bzwvdGVtcGxhdGU+CiAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iOSI+T3B0aW9uIDk8L2EtbWVudS1pdGVtPgogICAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjEwIj5PcHRpb24gMTA8L2EtbWVudS1pdGVtPgogICAgICAgIDxhLXN1Yi1tZW51IGtleT0ic3ViMyIgdGl0bGU9IlN1Ym1lbnUiPgogICAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iMTEiPk9wdGlvbiAxMTwvYS1tZW51LWl0ZW0+CiAgICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSIxMiI+T3B0aW9uIDEyPC9hLW1lbnUtaXRlbT4KICAgICAgICA8L2Etc3ViLW1lbnU+CiAgICAgIDwvYS1zdWItbWVudT4KICAgIDwvYS1tZW51PgogIDwvZGl2Pgo8L3RlbXBsYXRlPgo8c2NyaXB0IGxhbmc9InRzIj4KaW1wb3J0IHsgZGVmaW5lQ29tcG9uZW50LCByZWFjdGl2ZSwgdG9SZWZzLCB3YXRjaCB9IGZyb20gJ3Z1ZSc7CmltcG9ydCB7CiAgTWVudUZvbGRPdXRsaW5lZCwKICBNZW51VW5mb2xkT3V0bGluZWQsCiAgUGllQ2hhcnRPdXRsaW5lZCwKICBNYWlsT3V0bGluZWQsCiAgRGVza3RvcE91dGxpbmVkLAogIEluYm94T3V0bGluZWQsCiAgQXBwc3RvcmVPdXRsaW5lZCwKfSBmcm9tICdAYW50LWRlc2lnbi9pY29ucy12dWUnOwpleHBvcnQgZGVmYXVsdCBkZWZpbmVDb21wb25lbnQoewogIHNldHVwKCkgewogICAgY29uc3Qgc3RhdGUgPSByZWFjdGl2ZSh7CiAgICAgIGNvbGxhcHNlZDogZmFsc2UsCiAgICAgIHNlbGVjdGVkS2V5czogWycxJ10sCiAgICAgIG9wZW5LZXlzOiBbJ3N1YjEnXSwKICAgICAgcHJlT3BlbktleXM6IFsnc3ViMSddLAogICAgfSk7CgogICAgd2F0Y2goCiAgICAgICgpID0+IHN0YXRlLm9wZW5LZXlzLAogICAgICAodmFsLCBvbGRWYWwpID0+IHsKICAgICAgICBzdGF0ZS5wcmVPcGVuS2V5cyA9IG9sZFZhbDsKICAgICAgfSwKICAgICk7CiAgICBjb25zdCB0b2dnbGVDb2xsYXBzZWQgPSAoKSA9PiB7CiAgICAgIHN0YXRlLmNvbGxhcHNlZCA9ICFzdGF0ZS5jb2xsYXBzZWQ7CiAgICAgIHN0YXRlLm9wZW5LZXlzID0gc3RhdGUuY29sbGFwc2VkID8gW10gOiBzdGF0ZS5wcmVPcGVuS2V5czsKICAgIH07CgogICAgcmV0dXJuIHsKICAgICAgLi4udG9SZWZzKHN0YXRlKSwKICAgICAgdG9nZ2xlQ29sbGFwc2VkLAogICAgfTsKICB9LAogIGNvbXBvbmVudHM6IHsKICAgIE1lbnVGb2xkT3V0bGluZWQsCiAgICBNZW51VW5mb2xkT3V0bGluZWQsCiAgICBQaWVDaGFydE91dGxpbmVkLAogICAgTWFpbE91dGxpbmVkLAogICAgRGVza3RvcE91dGxpbmVkLAogICAgSW5ib3hPdXRsaW5lZCwKICAgIEFwcHN0b3JlT3V0bGluZWQsCiAgfSwKfSk7Cjwvc2NyaXB0PgoK",jsSourceCode:"PHRlbXBsYXRlPgogIDxkaXYgc3R5bGU9IndpZHRoOiAyNTZweCI+CiAgICA8YS1idXR0b24gdHlwZT0icHJpbWFyeSIgQGNsaWNrPSJ0b2dnbGVDb2xsYXBzZWQiIHN0eWxlPSJtYXJnaW4tYm90dG9tOiAxNnB4Ij4KICAgICAgPE1lbnVVbmZvbGRPdXRsaW5lZCB2LWlmPSJjb2xsYXBzZWQiIC8+CiAgICAgIDxNZW51Rm9sZE91dGxpbmVkIHYtZWxzZSAvPgogICAgPC9hLWJ1dHRvbj4KICAgIDxhLW1lbnUKICAgICAgbW9kZT0iaW5saW5lIgogICAgICB0aGVtZT0iZGFyayIKICAgICAgOmlubGluZS1jb2xsYXBzZWQ9ImNvbGxhcHNlZCIKICAgICAgdi1tb2RlbDpvcGVuS2V5cz0ib3BlbktleXMiCiAgICAgIHYtbW9kZWw6c2VsZWN0ZWRLZXlzPSJzZWxlY3RlZEtleXMiCiAgICA+CiAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjEiPgogICAgICAgIDx0ZW1wbGF0ZSAjaWNvbj4KICAgICAgICAgIDxQaWVDaGFydE91dGxpbmVkIC8+CiAgICAgICAgPC90ZW1wbGF0ZT4KICAgICAgICA8c3Bhbj5PcHRpb24gMTwvc3Bhbj4KICAgICAgPC9hLW1lbnUtaXRlbT4KICAgICAgPGEtbWVudS1pdGVtIGtleT0iMiI+CiAgICAgICAgPHRlbXBsYXRlICNpY29uPgogICAgICAgICAgPERlc2t0b3BPdXRsaW5lZCAvPgogICAgICAgIDwvdGVtcGxhdGU+CiAgICAgICAgPHNwYW4+T3B0aW9uIDI8L3NwYW4+CiAgICAgIDwvYS1tZW51LWl0ZW0+CiAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjMiPgogICAgICAgIDx0ZW1wbGF0ZSAjaWNvbj4KICAgICAgICAgIDxJbmJveE91dGxpbmVkIC8+CiAgICAgICAgPC90ZW1wbGF0ZT4KICAgICAgICA8c3Bhbj5PcHRpb24gMzwvc3Bhbj4KICAgICAgPC9hLW1lbnUtaXRlbT4KICAgICAgPGEtc3ViLW1lbnUga2V5PSJzdWIxIj4KICAgICAgICA8dGVtcGxhdGUgI2ljb24+CiAgICAgICAgICA8TWFpbE91dGxpbmVkIC8+CiAgICAgICAgPC90ZW1wbGF0ZT4KICAgICAgICA8dGVtcGxhdGUgI3RpdGxlPk5hdmlnYXRpb24gT25lPC90ZW1wbGF0ZT4KICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSI1Ij5PcHRpb24gNTwvYS1tZW51LWl0ZW0+CiAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iNiI+T3B0aW9uIDY8L2EtbWVudS1pdGVtPgogICAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjciPk9wdGlvbiA3PC9hLW1lbnUtaXRlbT4KICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSI4Ij5PcHRpb24gODwvYS1tZW51LWl0ZW0+CiAgICAgIDwvYS1zdWItbWVudT4KICAgICAgPGEtc3ViLW1lbnUga2V5PSJzdWIyIj4KICAgICAgICA8dGVtcGxhdGUgI2ljb24+CiAgICAgICAgICA8QXBwc3RvcmVPdXRsaW5lZCAvPgogICAgICAgIDwvdGVtcGxhdGU+CiAgICAgICAgPHRlbXBsYXRlICN0aXRsZT5OYXZpZ2F0aW9uIFR3bzwvdGVtcGxhdGU+CiAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iOSI+T3B0aW9uIDk8L2EtbWVudS1pdGVtPgogICAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjEwIj5PcHRpb24gMTA8L2EtbWVudS1pdGVtPgogICAgICAgIDxhLXN1Yi1tZW51IGtleT0ic3ViMyIgdGl0bGU9IlN1Ym1lbnUiPgogICAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iMTEiPk9wdGlvbiAxMTwvYS1tZW51LWl0ZW0+CiAgICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSIxMiI+T3B0aW9uIDEyPC9hLW1lbnUtaXRlbT4KICAgICAgICA8L2Etc3ViLW1lbnU+CiAgICAgIDwvYS1zdWItbWVudT4KICAgIDwvYS1tZW51PgogIDwvZGl2Pgo8L3RlbXBsYXRlPgo8c2NyaXB0PgppbXBvcnQgeyBkZWZpbmVDb21wb25lbnQsIHJlYWN0aXZlLCB0b1JlZnMsIHdhdGNoIH0gZnJvbSAndnVlJzsKaW1wb3J0IHsKICBNZW51Rm9sZE91dGxpbmVkLAogIE1lbnVVbmZvbGRPdXRsaW5lZCwKICBQaWVDaGFydE91dGxpbmVkLAogIE1haWxPdXRsaW5lZCwKICBEZXNrdG9wT3V0bGluZWQsCiAgSW5ib3hPdXRsaW5lZCwKICBBcHBzdG9yZU91dGxpbmVkLAp9IGZyb20gJ0BhbnQtZGVzaWduL2ljb25zLXZ1ZSc7CmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbXBvbmVudCh7CiAgc2V0dXAoKSB7CiAgICBjb25zdCBzdGF0ZSA9IHJlYWN0aXZlKHsKICAgICAgY29sbGFwc2VkOiBmYWxzZSwKICAgICAgc2VsZWN0ZWRLZXlzOiBbJzEnXSwKICAgICAgb3BlbktleXM6IFsnc3ViMSddLAogICAgICBwcmVPcGVuS2V5czogWydzdWIxJ10sCiAgICB9KTsKICAgIHdhdGNoKAogICAgICAoKSA9PiBzdGF0ZS5vcGVuS2V5cywKICAgICAgKHZhbCwgb2xkVmFsKSA9PiB7CiAgICAgICAgc3RhdGUucHJlT3BlbktleXMgPSBvbGRWYWw7CiAgICAgIH0sCiAgICApOwogICAgY29uc3QgdG9nZ2xlQ29sbGFwc2VkID0gKCkgPT4gewogICAgICBzdGF0ZS5jb2xsYXBzZWQgPSAhc3RhdGUuY29sbGFwc2VkOwogICAgICBzdGF0ZS5vcGVuS2V5cyA9IHN0YXRlLmNvbGxhcHNlZCA/IFtdIDogc3RhdGUucHJlT3BlbktleXM7CiAgICB9OwogICAgcmV0dXJuIHsKICAgICAgLi4udG9SZWZzKHN0YXRlKSwKICAgICAgdG9nZ2xlQ29sbGFwc2VkLAogICAgfTsKICB9LAogIGNvbXBvbmVudHM6IHsKICAgIE1lbnVGb2xkT3V0bGluZWQsCiAgICBNZW51VW5mb2xkT3V0bGluZWQsCiAgICBQaWVDaGFydE91dGxpbmVkLAogICAgTWFpbE91dGxpbmVkLAogICAgRGVza3RvcE91dGxpbmVkLAogICAgSW5ib3hPdXRsaW5lZCwKICAgIEFwcHN0b3JlT3V0bGluZWQsCiAgfSwKfSk7Cjwvc2NyaXB0Pg=="}},{default:s(()=>[n("div",on,[e(c,{type:"primary",onClick:o.toggleCollapsed,style:{"margin-bottom":"16px"}},{default:s(()=>[o.collapsed?(d(),W(m,{key:0})):(d(),W(l,{key:1}))]),_:1},8,["onClick"]),e(N,{mode:"inline",theme:"dark","inline-collapsed":o.collapsed,openKeys:o.openKeys,"onUpdate:openKeys":a[0]||(a[0]=K=>o.openKeys=K),selectedKeys:o.selectedKeys,"onUpdate:selectedKeys":a[1]||(a[1]=K=>o.selectedKeys=K)},{default:s(()=>[e(u,{key:"1"},{icon:s(()=>[e(C)]),default:s(()=>[a[2]||(a[2]=n("span",null,"Option 1",-1))]),_:1,__:[2]}),e(u,{key:"2"},{icon:s(()=>[e(r)]),default:s(()=>[a[3]||(a[3]=n("span",null,"Option 2",-1))]),_:1,__:[3]}),e(u,{key:"3"},{icon:s(()=>[e(A)]),default:s(()=>[a[4]||(a[4]=n("span",null,"Option 3",-1))]),_:1,__:[4]}),e(k,{key:"sub1"},{icon:s(()=>[e(b)]),title:s(()=>a[5]||(a[5]=[t("Navigation One")])),default:s(()=>[e(u,{key:"5"},{default:s(()=>a[6]||(a[6]=[t("Option 5")])),_:1,__:[6]}),e(u,{key:"6"},{default:s(()=>a[7]||(a[7]=[t("Option 6")])),_:1,__:[7]}),e(u,{key:"7"},{default:s(()=>a[8]||(a[8]=[t("Option 7")])),_:1,__:[8]}),e(u,{key:"8"},{default:s(()=>a[9]||(a[9]=[t("Option 8")])),_:1,__:[9]})]),_:1}),e(k,{key:"sub2"},{icon:s(()=>[e(y)]),title:s(()=>a[10]||(a[10]=[t("Navigation Two")])),default:s(()=>[e(u,{key:"9"},{default:s(()=>a[11]||(a[11]=[t("Option 9")])),_:1,__:[11]}),e(u,{key:"10"},{default:s(()=>a[12]||(a[12]=[t("Option 10")])),_:1,__:[12]}),e(k,{key:"sub3",title:"Submenu"},{default:s(()=>[e(u,{key:"11"},{default:s(()=>a[13]||(a[13]=[t("Option 11")])),_:1,__:[13]}),e(u,{key:"12"},{default:s(()=>a[14]||(a[14]=[t("Option 12")])),_:1,__:[14]})]),_:1})]),_:1})]),_:1},8,["inline-collapsed","openKeys","selectedKeys"])])]),htmlCode:s(()=>a[15]||(a[15]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("div")]),t(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"width"),n("span",{class:"token punctuation"},":"),t(" 256px")]),n("span",{class:"token punctuation"},'"')])]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-button")]),t(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("primary"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("toggleCollapsed"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"margin-bottom"),n("span",{class:"token punctuation"},":"),t(" 16px")]),n("span",{class:"token punctuation"},'"')])]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("MenuUnfoldOutlined")]),t(),n("span",{class:"token attr-name"},"v-if"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("collapsed"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("MenuFoldOutlined")]),t(),n("span",{class:"token attr-name"},"v-else"),t(),n("span",{class:"token punctuation"},"/>")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-button")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu")]),t(`
      `),n("span",{class:"token attr-name"},"mode"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("inline"),n("span",{class:"token punctuation"},'"')]),t(`
      `),n("span",{class:"token attr-name"},"theme"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("dark"),n("span",{class:"token punctuation"},'"')]),t(`
      `),n("span",{class:"token attr-name"},":inline-collapsed"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("collapsed"),n("span",{class:"token punctuation"},'"')]),t(`
      `),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),t("openKeys")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("openKeys"),n("span",{class:"token punctuation"},'"')]),t(`
      `),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),t("selectedKeys")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("selectedKeys"),n("span",{class:"token punctuation"},'"')]),t(`
    `),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("1"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("PieChartOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("span")]),n("span",{class:"token punctuation"},">")]),t("Option 1"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("span")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("2"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("DesktopOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("span")]),n("span",{class:"token punctuation"},">")]),t("Option 2"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("span")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("3"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("InboxOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("span")]),n("span",{class:"token punctuation"},">")]),t("Option 3"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("span")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-sub-menu")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("sub1"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("MailOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#title"),n("span",{class:"token punctuation"},">")]),t("Navigation One"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("5"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 5"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("6"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 6"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("7"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 7"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("8"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 8"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-sub-menu")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-sub-menu")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("sub2"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("AppstoreOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#title"),n("span",{class:"token punctuation"},">")]),t("Navigation Two"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("9"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 9"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("10"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 10"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-sub-menu")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("sub3"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("Submenu"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("11"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 11"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("12"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 12"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-sub-menu")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-sub-menu")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("div")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("script")]),t(),n("span",{class:"token attr-name"},"lang"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("ts"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" defineComponent"),n("span",{class:"token punctuation"},","),t(" reactive"),n("span",{class:"token punctuation"},","),t(" toRefs"),n("span",{class:"token punctuation"},","),t(" watch "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(`
  MenuFoldOutlined`),n("span",{class:"token punctuation"},","),t(`
  MenuUnfoldOutlined`),n("span",{class:"token punctuation"},","),t(`
  PieChartOutlined`),n("span",{class:"token punctuation"},","),t(`
  MailOutlined`),n("span",{class:"token punctuation"},","),t(`
  DesktopOutlined`),n("span",{class:"token punctuation"},","),t(`
  InboxOutlined`),n("span",{class:"token punctuation"},","),t(`
  AppstoreOutlined`),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'@ant-design/icons-vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"export"),t(),n("span",{class:"token keyword"},"default"),t(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token punctuation"},"{"),t(`
    `),n("span",{class:"token keyword"},"const"),t(" state "),n("span",{class:"token operator"},"="),t(),n("span",{class:"token function"},"reactive"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
      `),n("span",{class:"token literal-property property"},"collapsed"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token boolean"},"false"),n("span",{class:"token punctuation"},","),t(`
      `),n("span",{class:"token literal-property property"},"selectedKeys"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"["),n("span",{class:"token string"},"'1'"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),t(`
      `),n("span",{class:"token literal-property property"},"openKeys"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"["),n("span",{class:"token string"},"'sub1'"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),t(`
      `),n("span",{class:"token literal-property property"},"preOpenKeys"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"["),n("span",{class:"token string"},"'sub1'"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`

    `),n("span",{class:"token function"},"watch"),n("span",{class:"token punctuation"},"("),t(`
      `),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token operator"},"=>"),t(" state"),n("span",{class:"token punctuation"},"."),t("openKeys"),n("span",{class:"token punctuation"},","),t(`
      `),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},[t("val"),n("span",{class:"token punctuation"},","),t(" oldVal")]),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token operator"},"=>"),t(),n("span",{class:"token punctuation"},"{"),t(`
        state`),n("span",{class:"token punctuation"},"."),t("preOpenKeys "),n("span",{class:"token operator"},"="),t(" oldVal"),n("span",{class:"token punctuation"},";"),t(`
      `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token keyword"},"const"),t(),n("span",{class:"token function-variable function"},"toggleCollapsed"),t(),n("span",{class:"token operator"},"="),t(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token operator"},"=>"),t(),n("span",{class:"token punctuation"},"{"),t(`
      state`),n("span",{class:"token punctuation"},"."),t("collapsed "),n("span",{class:"token operator"},"="),t(),n("span",{class:"token operator"},"!"),t("state"),n("span",{class:"token punctuation"},"."),t("collapsed"),n("span",{class:"token punctuation"},";"),t(`
      state`),n("span",{class:"token punctuation"},"."),t("openKeys "),n("span",{class:"token operator"},"="),t(" state"),n("span",{class:"token punctuation"},"."),t("collapsed "),n("span",{class:"token operator"},"?"),t(),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"]"),t(),n("span",{class:"token operator"},":"),t(" state"),n("span",{class:"token punctuation"},"."),t("preOpenKeys"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`

    `),n("span",{class:"token keyword"},"return"),t(),n("span",{class:"token punctuation"},"{"),t(`
      `),n("span",{class:"token operator"},"..."),n("span",{class:"token function"},"toRefs"),n("span",{class:"token punctuation"},"("),t("state"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},","),t(`
      toggleCollapsed`),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token literal-property property"},"components"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"{"),t(`
    MenuFoldOutlined`),n("span",{class:"token punctuation"},","),t(`
    MenuUnfoldOutlined`),n("span",{class:"token punctuation"},","),t(`
    PieChartOutlined`),n("span",{class:"token punctuation"},","),t(`
    MailOutlined`),n("span",{class:"token punctuation"},","),t(`
    DesktopOutlined`),n("span",{class:"token punctuation"},","),t(`
    InboxOutlined`),n("span",{class:"token punctuation"},","),t(`
    AppstoreOutlined`),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("script")]),n("span",{class:"token punctuation"},">")]),t(`
`)])],-1)])),jsVersionHtml:s(()=>a[16]||(a[16]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("div")]),t(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"width"),n("span",{class:"token punctuation"},":"),t(" 256px")]),n("span",{class:"token punctuation"},'"')])]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-button")]),t(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("primary"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("toggleCollapsed"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"margin-bottom"),n("span",{class:"token punctuation"},":"),t(" 16px")]),n("span",{class:"token punctuation"},'"')])]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("MenuUnfoldOutlined")]),t(),n("span",{class:"token attr-name"},"v-if"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("collapsed"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("MenuFoldOutlined")]),t(),n("span",{class:"token attr-name"},"v-else"),t(),n("span",{class:"token punctuation"},"/>")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-button")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu")]),t(`
      `),n("span",{class:"token attr-name"},"mode"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("inline"),n("span",{class:"token punctuation"},'"')]),t(`
      `),n("span",{class:"token attr-name"},"theme"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("dark"),n("span",{class:"token punctuation"},'"')]),t(`
      `),n("span",{class:"token attr-name"},":inline-collapsed"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("collapsed"),n("span",{class:"token punctuation"},'"')]),t(`
      `),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),t("openKeys")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("openKeys"),n("span",{class:"token punctuation"},'"')]),t(`
      `),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),t("selectedKeys")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("selectedKeys"),n("span",{class:"token punctuation"},'"')]),t(`
    `),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("1"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("PieChartOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("span")]),n("span",{class:"token punctuation"},">")]),t("Option 1"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("span")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("2"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("DesktopOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("span")]),n("span",{class:"token punctuation"},">")]),t("Option 2"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("span")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("3"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("InboxOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("span")]),n("span",{class:"token punctuation"},">")]),t("Option 3"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("span")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-sub-menu")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("sub1"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("MailOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#title"),n("span",{class:"token punctuation"},">")]),t("Navigation One"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("5"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 5"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("6"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 6"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("7"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 7"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("8"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 8"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-sub-menu")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-sub-menu")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("sub2"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("AppstoreOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#title"),n("span",{class:"token punctuation"},">")]),t("Navigation Two"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("9"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 9"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("10"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 10"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-sub-menu")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("sub3"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("Submenu"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("11"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 11"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("12"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 12"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-sub-menu")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-sub-menu")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("div")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("script")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" defineComponent"),n("span",{class:"token punctuation"},","),t(" reactive"),n("span",{class:"token punctuation"},","),t(" toRefs"),n("span",{class:"token punctuation"},","),t(" watch "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(`
  MenuFoldOutlined`),n("span",{class:"token punctuation"},","),t(`
  MenuUnfoldOutlined`),n("span",{class:"token punctuation"},","),t(`
  PieChartOutlined`),n("span",{class:"token punctuation"},","),t(`
  MailOutlined`),n("span",{class:"token punctuation"},","),t(`
  DesktopOutlined`),n("span",{class:"token punctuation"},","),t(`
  InboxOutlined`),n("span",{class:"token punctuation"},","),t(`
  AppstoreOutlined`),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'@ant-design/icons-vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"export"),t(),n("span",{class:"token keyword"},"default"),t(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token punctuation"},"{"),t(`
    `),n("span",{class:"token keyword"},"const"),t(" state "),n("span",{class:"token operator"},"="),t(),n("span",{class:"token function"},"reactive"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
      `),n("span",{class:"token literal-property property"},"collapsed"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token boolean"},"false"),n("span",{class:"token punctuation"},","),t(`
      `),n("span",{class:"token literal-property property"},"selectedKeys"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"["),n("span",{class:"token string"},"'1'"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),t(`
      `),n("span",{class:"token literal-property property"},"openKeys"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"["),n("span",{class:"token string"},"'sub1'"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),t(`
      `),n("span",{class:"token literal-property property"},"preOpenKeys"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"["),n("span",{class:"token string"},"'sub1'"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token function"},"watch"),n("span",{class:"token punctuation"},"("),t(`
      `),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token operator"},"=>"),t(" state"),n("span",{class:"token punctuation"},"."),t("openKeys"),n("span",{class:"token punctuation"},","),t(`
      `),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},[t("val"),n("span",{class:"token punctuation"},","),t(" oldVal")]),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token operator"},"=>"),t(),n("span",{class:"token punctuation"},"{"),t(`
        state`),n("span",{class:"token punctuation"},"."),t("preOpenKeys "),n("span",{class:"token operator"},"="),t(" oldVal"),n("span",{class:"token punctuation"},";"),t(`
      `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token keyword"},"const"),t(),n("span",{class:"token function-variable function"},"toggleCollapsed"),t(),n("span",{class:"token operator"},"="),t(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token operator"},"=>"),t(),n("span",{class:"token punctuation"},"{"),t(`
      state`),n("span",{class:"token punctuation"},"."),t("collapsed "),n("span",{class:"token operator"},"="),t(),n("span",{class:"token operator"},"!"),t("state"),n("span",{class:"token punctuation"},"."),t("collapsed"),n("span",{class:"token punctuation"},";"),t(`
      state`),n("span",{class:"token punctuation"},"."),t("openKeys "),n("span",{class:"token operator"},"="),t(" state"),n("span",{class:"token punctuation"},"."),t("collapsed "),n("span",{class:"token operator"},"?"),t(),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"]"),t(),n("span",{class:"token operator"},":"),t(" state"),n("span",{class:"token punctuation"},"."),t("preOpenKeys"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token keyword"},"return"),t(),n("span",{class:"token punctuation"},"{"),t(`
      `),n("span",{class:"token operator"},"..."),n("span",{class:"token function"},"toRefs"),n("span",{class:"token punctuation"},"("),t("state"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},","),t(`
      toggleCollapsed`),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token literal-property property"},"components"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"{"),t(`
    MenuFoldOutlined`),n("span",{class:"token punctuation"},","),t(`
    MenuUnfoldOutlined`),n("span",{class:"token punctuation"},","),t(`
    PieChartOutlined`),n("span",{class:"token punctuation"},","),t(`
    MailOutlined`),n("span",{class:"token punctuation"},","),t(`
    DesktopOutlined`),n("span",{class:"token punctuation"},","),t(`
    InboxOutlined`),n("span",{class:"token punctuation"},","),t(`
    AppstoreOutlined`),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("script")]),n("span",{class:"token punctuation"},">")]),t(`
`)])],-1)])),_:1})}var cn=Z(en,[["render",pn]]);const ln=v({setup(){const o=R(["1"]),a=R(["sub1"]),i=I=>{console.log("click",I)},g=I=>{console.log("titleClick",I)};return L(()=>a,I=>{console.log("openKeys",I)}),{selectedKeys:o,openKeys:a,handleClick:i,titleClick:g}},components:{MailOutlined:h,QqOutlined:M,AppstoreOutlined:V,SettingOutlined:S}});function un(o,a,i,g,I,G){const m=p("MailOutlined"),l=p("QqOutlined"),c=p("a-menu-item"),C=p("a-menu-item-group"),u=p("a-sub-menu"),r=p("AppstoreOutlined"),A=p("SettingOutlined"),b=p("a-menu"),k=p("demo-box");return d(),W(k,{jsfiddle:{us:"Vertical menu with inline submenus.",cn:"\u5782\u76F4\u83DC\u5355\uFF0C\u5B50\u83DC\u5355\u5185\u5D4C\u5728\u83DC\u5355\u533A\u57DF\u3002",docHtml:`<h2 id="zh-cn">zh-CN</h2>
<p>\u5782\u76F4\u83DC\u5355\uFF0C\u5B50\u83DC\u5355\u5185\u5D4C\u5728\u83DC\u5355\u533A\u57DF\u3002</p>
<h2 id="en-us">en-US</h2>
<p>Vertical menu with inline submenus.</p>
`,order:1,title:{"zh-CN":"\u5185\u5D4C\u83DC\u5355","en-US":"Inline menu"},relativePath:"src/docs/menu/demo/inline.vue",sourceCode:"PHRlbXBsYXRlPgogIDxhLW1lbnUKICAgIGlkPSJkZGRkZGQiCiAgICBzdHlsZT0id2lkdGg6IDI1NnB4IgogICAgdi1tb2RlbDpvcGVuS2V5cz0ib3BlbktleXMiCiAgICB2LW1vZGVsOnNlbGVjdGVkS2V5cz0ic2VsZWN0ZWRLZXlzIgogICAgbW9kZT0iaW5saW5lIgogICAgQGNsaWNrPSJoYW5kbGVDbGljayIKICA+CiAgICA8YS1zdWItbWVudSBrZXk9InN1YjEiIEB0aXRsZUNsaWNrPSJ0aXRsZUNsaWNrIj4KICAgICAgPHRlbXBsYXRlICNpY29uPgogICAgICAgIDxNYWlsT3V0bGluZWQgLz4KICAgICAgPC90ZW1wbGF0ZT4KICAgICAgPHRlbXBsYXRlICN0aXRsZT5OYXZpZ2F0aW9uIE9uZTwvdGVtcGxhdGU+CiAgICAgIDxhLW1lbnUtaXRlbS1ncm91cCBrZXk9ImcxIj4KICAgICAgICA8dGVtcGxhdGUgI2ljb24+CiAgICAgICAgICA8UXFPdXRsaW5lZCAvPgogICAgICAgIDwvdGVtcGxhdGU+CiAgICAgICAgPHRlbXBsYXRlICN0aXRsZT5JdGVtIDE8L3RlbXBsYXRlPgogICAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjEiPk9wdGlvbiAxPC9hLW1lbnUtaXRlbT4KICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSIyIj5PcHRpb24gMjwvYS1tZW51LWl0ZW0+CiAgICAgIDwvYS1tZW51LWl0ZW0tZ3JvdXA+CiAgICAgIDxhLW1lbnUtaXRlbS1ncm91cCBrZXk9ImcyIiB0aXRsZT0iSXRlbSAyIj4KICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSIzIj5PcHRpb24gMzwvYS1tZW51LWl0ZW0+CiAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iNCI+T3B0aW9uIDQ8L2EtbWVudS1pdGVtPgogICAgICA8L2EtbWVudS1pdGVtLWdyb3VwPgogICAgPC9hLXN1Yi1tZW51PgogICAgPGEtc3ViLW1lbnUga2V5PSJzdWIyIiBAdGl0bGVDbGljaz0idGl0bGVDbGljayI+CiAgICAgIDx0ZW1wbGF0ZSAjaWNvbj4KICAgICAgICA8QXBwc3RvcmVPdXRsaW5lZCAvPgogICAgICA8L3RlbXBsYXRlPgogICAgICA8dGVtcGxhdGUgI3RpdGxlPk5hdmlnYXRpb24gVHdvPC90ZW1wbGF0ZT4KICAgICAgPGEtbWVudS1pdGVtIGtleT0iNSI+T3B0aW9uIDU8L2EtbWVudS1pdGVtPgogICAgICA8YS1tZW51LWl0ZW0ga2V5PSI2Ij5PcHRpb24gNjwvYS1tZW51LWl0ZW0+CiAgICAgIDxhLXN1Yi1tZW51IGtleT0ic3ViMyIgdGl0bGU9IlN1Ym1lbnUiPgogICAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjciPk9wdGlvbiA3PC9hLW1lbnUtaXRlbT4KICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSI4Ij5PcHRpb24gODwvYS1tZW51LWl0ZW0+CiAgICAgIDwvYS1zdWItbWVudT4KICAgIDwvYS1zdWItbWVudT4KICAgIDxhLXN1Yi1tZW51IGtleT0ic3ViNCI+CiAgICAgIDx0ZW1wbGF0ZSAjaWNvbj4KICAgICAgICA8U2V0dGluZ091dGxpbmVkIC8+CiAgICAgIDwvdGVtcGxhdGU+CiAgICAgIDx0ZW1wbGF0ZSAjdGl0bGU+TmF2aWdhdGlvbiBUaHJlZTwvdGVtcGxhdGU+CiAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjkiPk9wdGlvbiA5PC9hLW1lbnUtaXRlbT4KICAgICAgPGEtbWVudS1pdGVtIGtleT0iMTAiPk9wdGlvbiAxMDwvYS1tZW51LWl0ZW0+CiAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjExIj5PcHRpb24gMTE8L2EtbWVudS1pdGVtPgogICAgICA8YS1tZW51LWl0ZW0ga2V5PSIxMiI+T3B0aW9uIDEyPC9hLW1lbnUtaXRlbT4KICAgIDwvYS1zdWItbWVudT4KICA8L2EtbWVudT4KPC90ZW1wbGF0ZT4KPHNjcmlwdCBsYW5nPSJ0cyI+CmltcG9ydCB7IGRlZmluZUNvbXBvbmVudCwgcmVmLCB3YXRjaCB9IGZyb20gJ3Z1ZSc7CmltcG9ydCB7IE1haWxPdXRsaW5lZCwgUXFPdXRsaW5lZCwgQXBwc3RvcmVPdXRsaW5lZCwgU2V0dGluZ091dGxpbmVkIH0gZnJvbSAnQGFudC1kZXNpZ24vaWNvbnMtdnVlJzsKZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29tcG9uZW50KHsKICBzZXR1cCgpIHsKICAgIGNvbnN0IHNlbGVjdGVkS2V5cyA9IHJlZjxzdHJpbmdbXT4oWycxJ10pOwogICAgY29uc3Qgb3BlbktleXMgPSByZWY8c3RyaW5nW10+KFsnc3ViMSddKTsKICAgIGNvbnN0IGhhbmRsZUNsaWNrID0gKGU6IEV2ZW50KSA9PiB7CiAgICAgIGNvbnNvbGUubG9nKCdjbGljaycsIGUpOwogICAgfTsKICAgIGNvbnN0IHRpdGxlQ2xpY2sgPSAoZTogRXZlbnQpID0+IHsKICAgICAgY29uc29sZS5sb2coJ3RpdGxlQ2xpY2snLCBlKTsKICAgIH07CiAgICB3YXRjaCgKICAgICAgKCkgPT4gb3BlbktleXMsCiAgICAgIHZhbCA9PiB7CiAgICAgICAgY29uc29sZS5sb2coJ29wZW5LZXlzJywgdmFsKTsKICAgICAgfSwKICAgICk7CiAgICByZXR1cm4gewogICAgICBzZWxlY3RlZEtleXMsCiAgICAgIG9wZW5LZXlzLAoKICAgICAgaGFuZGxlQ2xpY2ssCiAgICAgIHRpdGxlQ2xpY2ssCiAgICB9OwogIH0sCiAgY29tcG9uZW50czogewogICAgTWFpbE91dGxpbmVkLAogICAgUXFPdXRsaW5lZCwKICAgIEFwcHN0b3JlT3V0bGluZWQsCiAgICBTZXR0aW5nT3V0bGluZWQsCiAgfSwKfSk7Cjwvc2NyaXB0PgoK",jsSourceCode:"PHRlbXBsYXRlPgogIDxhLW1lbnUKICAgIGlkPSJkZGRkZGQiCiAgICBzdHlsZT0id2lkdGg6IDI1NnB4IgogICAgdi1tb2RlbDpvcGVuS2V5cz0ib3BlbktleXMiCiAgICB2LW1vZGVsOnNlbGVjdGVkS2V5cz0ic2VsZWN0ZWRLZXlzIgogICAgbW9kZT0iaW5saW5lIgogICAgQGNsaWNrPSJoYW5kbGVDbGljayIKICA+CiAgICA8YS1zdWItbWVudSBrZXk9InN1YjEiIEB0aXRsZUNsaWNrPSJ0aXRsZUNsaWNrIj4KICAgICAgPHRlbXBsYXRlICNpY29uPgogICAgICAgIDxNYWlsT3V0bGluZWQgLz4KICAgICAgPC90ZW1wbGF0ZT4KICAgICAgPHRlbXBsYXRlICN0aXRsZT5OYXZpZ2F0aW9uIE9uZTwvdGVtcGxhdGU+CiAgICAgIDxhLW1lbnUtaXRlbS1ncm91cCBrZXk9ImcxIj4KICAgICAgICA8dGVtcGxhdGUgI2ljb24+CiAgICAgICAgICA8UXFPdXRsaW5lZCAvPgogICAgICAgIDwvdGVtcGxhdGU+CiAgICAgICAgPHRlbXBsYXRlICN0aXRsZT5JdGVtIDE8L3RlbXBsYXRlPgogICAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjEiPk9wdGlvbiAxPC9hLW1lbnUtaXRlbT4KICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSIyIj5PcHRpb24gMjwvYS1tZW51LWl0ZW0+CiAgICAgIDwvYS1tZW51LWl0ZW0tZ3JvdXA+CiAgICAgIDxhLW1lbnUtaXRlbS1ncm91cCBrZXk9ImcyIiB0aXRsZT0iSXRlbSAyIj4KICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSIzIj5PcHRpb24gMzwvYS1tZW51LWl0ZW0+CiAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iNCI+T3B0aW9uIDQ8L2EtbWVudS1pdGVtPgogICAgICA8L2EtbWVudS1pdGVtLWdyb3VwPgogICAgPC9hLXN1Yi1tZW51PgogICAgPGEtc3ViLW1lbnUga2V5PSJzdWIyIiBAdGl0bGVDbGljaz0idGl0bGVDbGljayI+CiAgICAgIDx0ZW1wbGF0ZSAjaWNvbj4KICAgICAgICA8QXBwc3RvcmVPdXRsaW5lZCAvPgogICAgICA8L3RlbXBsYXRlPgogICAgICA8dGVtcGxhdGUgI3RpdGxlPk5hdmlnYXRpb24gVHdvPC90ZW1wbGF0ZT4KICAgICAgPGEtbWVudS1pdGVtIGtleT0iNSI+T3B0aW9uIDU8L2EtbWVudS1pdGVtPgogICAgICA8YS1tZW51LWl0ZW0ga2V5PSI2Ij5PcHRpb24gNjwvYS1tZW51LWl0ZW0+CiAgICAgIDxhLXN1Yi1tZW51IGtleT0ic3ViMyIgdGl0bGU9IlN1Ym1lbnUiPgogICAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjciPk9wdGlvbiA3PC9hLW1lbnUtaXRlbT4KICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSI4Ij5PcHRpb24gODwvYS1tZW51LWl0ZW0+CiAgICAgIDwvYS1zdWItbWVudT4KICAgIDwvYS1zdWItbWVudT4KICAgIDxhLXN1Yi1tZW51IGtleT0ic3ViNCI+CiAgICAgIDx0ZW1wbGF0ZSAjaWNvbj4KICAgICAgICA8U2V0dGluZ091dGxpbmVkIC8+CiAgICAgIDwvdGVtcGxhdGU+CiAgICAgIDx0ZW1wbGF0ZSAjdGl0bGU+TmF2aWdhdGlvbiBUaHJlZTwvdGVtcGxhdGU+CiAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjkiPk9wdGlvbiA5PC9hLW1lbnUtaXRlbT4KICAgICAgPGEtbWVudS1pdGVtIGtleT0iMTAiPk9wdGlvbiAxMDwvYS1tZW51LWl0ZW0+CiAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjExIj5PcHRpb24gMTE8L2EtbWVudS1pdGVtPgogICAgICA8YS1tZW51LWl0ZW0ga2V5PSIxMiI+T3B0aW9uIDEyPC9hLW1lbnUtaXRlbT4KICAgIDwvYS1zdWItbWVudT4KICA8L2EtbWVudT4KPC90ZW1wbGF0ZT4KPHNjcmlwdD4KaW1wb3J0IHsgZGVmaW5lQ29tcG9uZW50LCByZWYsIHdhdGNoIH0gZnJvbSAndnVlJzsKaW1wb3J0IHsgTWFpbE91dGxpbmVkLCBRcU91dGxpbmVkLCBBcHBzdG9yZU91dGxpbmVkLCBTZXR0aW5nT3V0bGluZWQgfSBmcm9tICdAYW50LWRlc2lnbi9pY29ucy12dWUnOwpleHBvcnQgZGVmYXVsdCBkZWZpbmVDb21wb25lbnQoewogIHNldHVwKCkgewogICAgY29uc3Qgc2VsZWN0ZWRLZXlzID0gcmVmKFsnMSddKTsKICAgIGNvbnN0IG9wZW5LZXlzID0gcmVmKFsnc3ViMSddKTsKICAgIGNvbnN0IGhhbmRsZUNsaWNrID0gZSA9PiB7CiAgICAgIGNvbnNvbGUubG9nKCdjbGljaycsIGUpOwogICAgfTsKICAgIGNvbnN0IHRpdGxlQ2xpY2sgPSBlID0+IHsKICAgICAgY29uc29sZS5sb2coJ3RpdGxlQ2xpY2snLCBlKTsKICAgIH07CiAgICB3YXRjaCgKICAgICAgKCkgPT4gb3BlbktleXMsCiAgICAgIHZhbCA9PiB7CiAgICAgICAgY29uc29sZS5sb2coJ29wZW5LZXlzJywgdmFsKTsKICAgICAgfSwKICAgICk7CiAgICByZXR1cm4gewogICAgICBzZWxlY3RlZEtleXMsCiAgICAgIG9wZW5LZXlzLAogICAgICBoYW5kbGVDbGljaywKICAgICAgdGl0bGVDbGljaywKICAgIH07CiAgfSwKICBjb21wb25lbnRzOiB7CiAgICBNYWlsT3V0bGluZWQsCiAgICBRcU91dGxpbmVkLAogICAgQXBwc3RvcmVPdXRsaW5lZCwKICAgIFNldHRpbmdPdXRsaW5lZCwKICB9LAp9KTsKPC9zY3JpcHQ+"}},{default:s(()=>[e(b,{id:"dddddd",style:{width:"256px"},openKeys:o.openKeys,"onUpdate:openKeys":a[0]||(a[0]=y=>o.openKeys=y),selectedKeys:o.selectedKeys,"onUpdate:selectedKeys":a[1]||(a[1]=y=>o.selectedKeys=y),mode:"inline",onClick:o.handleClick},{default:s(()=>[e(u,{key:"sub1",onTitleClick:o.titleClick},{icon:s(()=>[e(m)]),title:s(()=>a[2]||(a[2]=[t("Navigation One")])),default:s(()=>[e(C,{key:"g1"},{icon:s(()=>[e(l)]),title:s(()=>a[3]||(a[3]=[t("Item 1")])),default:s(()=>[e(c,{key:"1"},{default:s(()=>a[4]||(a[4]=[t("Option 1")])),_:1,__:[4]}),e(c,{key:"2"},{default:s(()=>a[5]||(a[5]=[t("Option 2")])),_:1,__:[5]})]),_:1}),e(C,{key:"g2",title:"Item 2"},{default:s(()=>[e(c,{key:"3"},{default:s(()=>a[6]||(a[6]=[t("Option 3")])),_:1,__:[6]}),e(c,{key:"4"},{default:s(()=>a[7]||(a[7]=[t("Option 4")])),_:1,__:[7]})]),_:1})]),_:1},8,["onTitleClick"]),e(u,{key:"sub2",onTitleClick:o.titleClick},{icon:s(()=>[e(r)]),title:s(()=>a[8]||(a[8]=[t("Navigation Two")])),default:s(()=>[e(c,{key:"5"},{default:s(()=>a[9]||(a[9]=[t("Option 5")])),_:1,__:[9]}),e(c,{key:"6"},{default:s(()=>a[10]||(a[10]=[t("Option 6")])),_:1,__:[10]}),e(u,{key:"sub3",title:"Submenu"},{default:s(()=>[e(c,{key:"7"},{default:s(()=>a[11]||(a[11]=[t("Option 7")])),_:1,__:[11]}),e(c,{key:"8"},{default:s(()=>a[12]||(a[12]=[t("Option 8")])),_:1,__:[12]})]),_:1})]),_:1},8,["onTitleClick"]),e(u,{key:"sub4"},{icon:s(()=>[e(A)]),title:s(()=>a[13]||(a[13]=[t("Navigation Three")])),default:s(()=>[e(c,{key:"9"},{default:s(()=>a[14]||(a[14]=[t("Option 9")])),_:1,__:[14]}),e(c,{key:"10"},{default:s(()=>a[15]||(a[15]=[t("Option 10")])),_:1,__:[15]}),e(c,{key:"11"},{default:s(()=>a[16]||(a[16]=[t("Option 11")])),_:1,__:[16]}),e(c,{key:"12"},{default:s(()=>a[17]||(a[17]=[t("Option 12")])),_:1,__:[17]})]),_:1})]),_:1},8,["openKeys","selectedKeys","onClick"])]),htmlCode:s(()=>a[18]||(a[18]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu")]),t(`
    `),n("span",{class:"token attr-name"},"id"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("dddddd"),n("span",{class:"token punctuation"},'"')]),t(`
    `),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"width"),n("span",{class:"token punctuation"},":"),t(" 256px")]),n("span",{class:"token punctuation"},'"')])]),t(`
    `),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),t("openKeys")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("openKeys"),n("span",{class:"token punctuation"},'"')]),t(`
    `),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),t("selectedKeys")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("selectedKeys"),n("span",{class:"token punctuation"},'"')]),t(`
    `),n("span",{class:"token attr-name"},"mode"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("inline"),n("span",{class:"token punctuation"},'"')]),t(`
    `),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("handleClick"),n("span",{class:"token punctuation"},'"')]),t(`
  `),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-sub-menu")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("sub1"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"@titleClick"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("titleClick"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("MailOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#title"),n("span",{class:"token punctuation"},">")]),t("Navigation One"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item-group")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("g1"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("QqOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#title"),n("span",{class:"token punctuation"},">")]),t("Item 1"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("1"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 1"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("2"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 2"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item-group")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item-group")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("g2"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("Item 2"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("3"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 3"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 4"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item-group")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-sub-menu")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-sub-menu")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("sub2"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"@titleClick"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("titleClick"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("AppstoreOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#title"),n("span",{class:"token punctuation"},">")]),t("Navigation Two"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("5"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 5"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("6"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 6"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-sub-menu")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("sub3"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("Submenu"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("7"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 7"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("8"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 8"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-sub-menu")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-sub-menu")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-sub-menu")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("sub4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("SettingOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#title"),n("span",{class:"token punctuation"},">")]),t("Navigation Three"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("9"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 9"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("10"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 10"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("11"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 11"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("12"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 12"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-sub-menu")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("script")]),t(),n("span",{class:"token attr-name"},"lang"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("ts"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" defineComponent"),n("span",{class:"token punctuation"},","),t(" ref"),n("span",{class:"token punctuation"},","),t(" watch "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" MailOutlined"),n("span",{class:"token punctuation"},","),t(" QqOutlined"),n("span",{class:"token punctuation"},","),t(" AppstoreOutlined"),n("span",{class:"token punctuation"},","),t(" SettingOutlined "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'@ant-design/icons-vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"export"),t(),n("span",{class:"token keyword"},"default"),t(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token punctuation"},"{"),t(`
    `),n("span",{class:"token keyword"},"const"),t(" selectedKeys "),n("span",{class:"token operator"},"="),t(" ref"),n("span",{class:"token operator"},"<"),t("string"),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"]"),n("span",{class:"token operator"},">"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"["),n("span",{class:"token string"},"'1'"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token keyword"},"const"),t(" openKeys "),n("span",{class:"token operator"},"="),t(" ref"),n("span",{class:"token operator"},"<"),t("string"),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"]"),n("span",{class:"token operator"},">"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"["),n("span",{class:"token string"},"'sub1'"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token keyword"},"const"),t(),n("span",{class:"token function-variable function"},"handleClick"),t(),n("span",{class:"token operator"},"="),t(),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},[n("span",{class:"token literal-property property"},"e"),n("span",{class:"token operator"},":"),t(" Event")]),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token operator"},"=>"),t(),n("span",{class:"token punctuation"},"{"),t(`
      console`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"log"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'click'"),n("span",{class:"token punctuation"},","),t(" e"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token keyword"},"const"),t(),n("span",{class:"token function-variable function"},"titleClick"),t(),n("span",{class:"token operator"},"="),t(),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},[n("span",{class:"token literal-property property"},"e"),n("span",{class:"token operator"},":"),t(" Event")]),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token operator"},"=>"),t(),n("span",{class:"token punctuation"},"{"),t(`
      console`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"log"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'titleClick'"),n("span",{class:"token punctuation"},","),t(" e"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token function"},"watch"),n("span",{class:"token punctuation"},"("),t(`
      `),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token operator"},"=>"),t(" openKeys"),n("span",{class:"token punctuation"},","),t(`
      `),n("span",{class:"token parameter"},"val"),t(),n("span",{class:"token operator"},"=>"),t(),n("span",{class:"token punctuation"},"{"),t(`
        console`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"log"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'openKeys'"),n("span",{class:"token punctuation"},","),t(" val"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
      `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token keyword"},"return"),t(),n("span",{class:"token punctuation"},"{"),t(`
      selectedKeys`),n("span",{class:"token punctuation"},","),t(`
      openKeys`),n("span",{class:"token punctuation"},","),t(`

      handleClick`),n("span",{class:"token punctuation"},","),t(`
      titleClick`),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token literal-property property"},"components"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"{"),t(`
    MailOutlined`),n("span",{class:"token punctuation"},","),t(`
    QqOutlined`),n("span",{class:"token punctuation"},","),t(`
    AppstoreOutlined`),n("span",{class:"token punctuation"},","),t(`
    SettingOutlined`),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("script")]),n("span",{class:"token punctuation"},">")]),t(`
`)])],-1)])),jsVersionHtml:s(()=>a[19]||(a[19]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu")]),t(`
    `),n("span",{class:"token attr-name"},"id"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("dddddd"),n("span",{class:"token punctuation"},'"')]),t(`
    `),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"width"),n("span",{class:"token punctuation"},":"),t(" 256px")]),n("span",{class:"token punctuation"},'"')])]),t(`
    `),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),t("openKeys")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("openKeys"),n("span",{class:"token punctuation"},'"')]),t(`
    `),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),t("selectedKeys")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("selectedKeys"),n("span",{class:"token punctuation"},'"')]),t(`
    `),n("span",{class:"token attr-name"},"mode"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("inline"),n("span",{class:"token punctuation"},'"')]),t(`
    `),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("handleClick"),n("span",{class:"token punctuation"},'"')]),t(`
  `),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-sub-menu")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("sub1"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"@titleClick"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("titleClick"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("MailOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#title"),n("span",{class:"token punctuation"},">")]),t("Navigation One"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item-group")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("g1"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("QqOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#title"),n("span",{class:"token punctuation"},">")]),t("Item 1"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("1"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 1"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("2"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 2"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item-group")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item-group")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("g2"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("Item 2"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("3"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 3"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 4"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item-group")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-sub-menu")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-sub-menu")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("sub2"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"@titleClick"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("titleClick"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("AppstoreOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#title"),n("span",{class:"token punctuation"},">")]),t("Navigation Two"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("5"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 5"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("6"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 6"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-sub-menu")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("sub3"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("Submenu"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("7"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 7"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("8"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 8"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-sub-menu")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-sub-menu")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-sub-menu")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("sub4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("SettingOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#title"),n("span",{class:"token punctuation"},">")]),t("Navigation Three"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("9"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 9"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("10"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 10"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("11"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 11"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("12"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 12"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-sub-menu")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("script")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" defineComponent"),n("span",{class:"token punctuation"},","),t(" ref"),n("span",{class:"token punctuation"},","),t(" watch "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" MailOutlined"),n("span",{class:"token punctuation"},","),t(" QqOutlined"),n("span",{class:"token punctuation"},","),t(" AppstoreOutlined"),n("span",{class:"token punctuation"},","),t(" SettingOutlined "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'@ant-design/icons-vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"export"),t(),n("span",{class:"token keyword"},"default"),t(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token punctuation"},"{"),t(`
    `),n("span",{class:"token keyword"},"const"),t(" selectedKeys "),n("span",{class:"token operator"},"="),t(),n("span",{class:"token function"},"ref"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"["),n("span",{class:"token string"},"'1'"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token keyword"},"const"),t(" openKeys "),n("span",{class:"token operator"},"="),t(),n("span",{class:"token function"},"ref"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"["),n("span",{class:"token string"},"'sub1'"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token keyword"},"const"),t(),n("span",{class:"token function-variable function"},"handleClick"),t(),n("span",{class:"token operator"},"="),t(),n("span",{class:"token parameter"},"e"),t(),n("span",{class:"token operator"},"=>"),t(),n("span",{class:"token punctuation"},"{"),t(`
      console`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"log"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'click'"),n("span",{class:"token punctuation"},","),t(" e"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token keyword"},"const"),t(),n("span",{class:"token function-variable function"},"titleClick"),t(),n("span",{class:"token operator"},"="),t(),n("span",{class:"token parameter"},"e"),t(),n("span",{class:"token operator"},"=>"),t(),n("span",{class:"token punctuation"},"{"),t(`
      console`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"log"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'titleClick'"),n("span",{class:"token punctuation"},","),t(" e"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token function"},"watch"),n("span",{class:"token punctuation"},"("),t(`
      `),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token operator"},"=>"),t(" openKeys"),n("span",{class:"token punctuation"},","),t(`
      `),n("span",{class:"token parameter"},"val"),t(),n("span",{class:"token operator"},"=>"),t(),n("span",{class:"token punctuation"},"{"),t(`
        console`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"log"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'openKeys'"),n("span",{class:"token punctuation"},","),t(" val"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
      `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token keyword"},"return"),t(),n("span",{class:"token punctuation"},"{"),t(`
      selectedKeys`),n("span",{class:"token punctuation"},","),t(`
      openKeys`),n("span",{class:"token punctuation"},","),t(`
      handleClick`),n("span",{class:"token punctuation"},","),t(`
      titleClick`),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token literal-property property"},"components"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"{"),t(`
    MailOutlined`),n("span",{class:"token punctuation"},","),t(`
    QqOutlined`),n("span",{class:"token punctuation"},","),t(`
    AppstoreOutlined`),n("span",{class:"token punctuation"},","),t(`
    SettingOutlined`),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("script")]),n("span",{class:"token punctuation"},">")]),t(`
`)])],-1)])),_:1})}var kn=Z(ln,[["render",un]]);const gn=v({setup(){const o=w({rootSubmenuKeys:["sub1","sub2","sub4"],openKeys:["sub1"],selectedKeys:[]}),a=i=>{const g=i.find(I=>o.openKeys.indexOf(I)===-1);o.rootSubmenuKeys.indexOf(g)===-1?o.openKeys=i:o.openKeys=g?[g]:[]};return{...P(o),onOpenChange:a}},components:{MailOutlined:h,AppstoreOutlined:V,SettingOutlined:S}});function rn(o,a,i,g,I,G){const m=p("MailOutlined"),l=p("a-menu-item"),c=p("a-sub-menu"),C=p("AppstoreOutlined"),u=p("SettingOutlined"),r=p("a-menu"),A=p("demo-box");return d(),W(A,{jsfiddle:{us:"Click the menu and you will see that all the other menus gets collapsed to keep the entire menu compact.",cn:"\u70B9\u51FB\u83DC\u5355\uFF0C\u6536\u8D77\u5176\u4ED6\u5C55\u5F00\u7684\u6240\u6709\u83DC\u5355\uFF0C\u4FDD\u6301\u83DC\u5355\u805A\u7126\u7B80\u6D01\u3002",docHtml:`<h2 id="zh-cn">zh-CN</h2>
<p>\u70B9\u51FB\u83DC\u5355\uFF0C\u6536\u8D77\u5176\u4ED6\u5C55\u5F00\u7684\u6240\u6709\u83DC\u5355\uFF0C\u4FDD\u6301\u83DC\u5355\u805A\u7126\u7B80\u6D01\u3002</p>
<h2 id="en-us">en-US</h2>
<p>Click the menu and you will see that all the other menus gets collapsed to keep the entire menu compact.</p>
`,order:2,title:{"zh-CN":"\u53EA\u5C55\u5F00\u5F53\u524D\u7236\u7EA7\u83DC\u5355","en-US":"Open current submenu only"},relativePath:"src/docs/menu/demo/sider-current.vue",sourceCode:"PHRlbXBsYXRlPgogIDxkaXY+CiAgICA8YS1tZW51CiAgICAgIHN0eWxlPSJ3aWR0aDogMjU2cHgiCiAgICAgIG1vZGU9ImlubGluZSIKICAgICAgOm9wZW5LZXlzPSJvcGVuS2V5cyIKICAgICAgdi1tb2RlbDpzZWxlY3RlZEtleXM9InNlbGVjdGVkS2V5cyIKICAgICAgQG9wZW5DaGFuZ2U9Im9uT3BlbkNoYW5nZSIKICAgID4KICAgICAgPGEtc3ViLW1lbnUga2V5PSJzdWIxIj4KICAgICAgICA8dGVtcGxhdGUgI2ljb24+CiAgICAgICAgICA8TWFpbE91dGxpbmVkIC8+CiAgICAgICAgPC90ZW1wbGF0ZT4KICAgICAgICA8dGVtcGxhdGUgI3RpdGxlPk5hdmlnYXRpb24gT25lPC90ZW1wbGF0ZT4KICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSIxIj5PcHRpb24gMTwvYS1tZW51LWl0ZW0+CiAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iMiI+T3B0aW9uIDI8L2EtbWVudS1pdGVtPgogICAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjMiPk9wdGlvbiAzPC9hLW1lbnUtaXRlbT4KICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSI0Ij5PcHRpb24gNDwvYS1tZW51LWl0ZW0+CiAgICAgIDwvYS1zdWItbWVudT4KICAgICAgPGEtc3ViLW1lbnUga2V5PSJzdWIyIj4KICAgICAgICA8dGVtcGxhdGUgI2ljb24+PC90ZW1wbGF0ZT4KICAgICAgICA8dGVtcGxhdGUgI3RpdGxlPgogICAgICAgICAgPEFwcHN0b3JlT3V0bGluZWQgLz4KICAgICAgICAgIE5hdmlnYXRpb24gVHdvCiAgICAgICAgPC90ZW1wbGF0ZT4KICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSI1Ij5PcHRpb24gNTwvYS1tZW51LWl0ZW0+CiAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iNiI+T3B0aW9uIDY8L2EtbWVudS1pdGVtPgogICAgICAgIDxhLXN1Yi1tZW51IGtleT0ic3ViMyIgdGl0bGU9IlN1Ym1lbnUiPgogICAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iNyI+T3B0aW9uIDc8L2EtbWVudS1pdGVtPgogICAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iOCI+T3B0aW9uIDg8L2EtbWVudS1pdGVtPgogICAgICAgIDwvYS1zdWItbWVudT4KICAgICAgPC9hLXN1Yi1tZW51PgogICAgICA8YS1zdWItbWVudSBrZXk9InN1YjQiPgogICAgICAgIDx0ZW1wbGF0ZSAjaWNvbj4KICAgICAgICAgIDxTZXR0aW5nT3V0bGluZWQgLz4KICAgICAgICA8L3RlbXBsYXRlPgogICAgICAgIDx0ZW1wbGF0ZSAjdGl0bGU+TmF2aWdhdGlvbiBUaHJlZTwvdGVtcGxhdGU+CiAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iOSI+T3B0aW9uIDk8L2EtbWVudS1pdGVtPgogICAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjEwIj5PcHRpb24gMTA8L2EtbWVudS1pdGVtPgogICAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjExIj5PcHRpb24gMTE8L2EtbWVudS1pdGVtPgogICAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjEyIj5PcHRpb24gMTI8L2EtbWVudS1pdGVtPgogICAgICA8L2Etc3ViLW1lbnU+CiAgICA8L2EtbWVudT4KICA8L2Rpdj4KPC90ZW1wbGF0ZT4KPHNjcmlwdCBsYW5nPSJ0cyI+CmltcG9ydCB7IGRlZmluZUNvbXBvbmVudCwgcmVhY3RpdmUsIHRvUmVmcyB9IGZyb20gJ3Z1ZSc7CmltcG9ydCB7IE1haWxPdXRsaW5lZCwgQXBwc3RvcmVPdXRsaW5lZCwgU2V0dGluZ091dGxpbmVkIH0gZnJvbSAnQGFudC1kZXNpZ24vaWNvbnMtdnVlJzsKZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29tcG9uZW50KHsKICBzZXR1cCgpIHsKICAgIGNvbnN0IHN0YXRlID0gcmVhY3RpdmUoewogICAgICByb290U3VibWVudUtleXM6IFsnc3ViMScsICdzdWIyJywgJ3N1YjQnXSwKICAgICAgb3BlbktleXM6IFsnc3ViMSddLAogICAgICBzZWxlY3RlZEtleXM6IFtdLAogICAgfSk7CiAgICBjb25zdCBvbk9wZW5DaGFuZ2UgPSAob3BlbktleXM6IHN0cmluZ1tdKSA9PiB7CiAgICAgIGNvbnN0IGxhdGVzdE9wZW5LZXkgPSBvcGVuS2V5cy5maW5kKGtleSA9PiBzdGF0ZS5vcGVuS2V5cy5pbmRleE9mKGtleSkgPT09IC0xKTsKICAgICAgaWYgKHN0YXRlLnJvb3RTdWJtZW51S2V5cy5pbmRleE9mKGxhdGVzdE9wZW5LZXkhKSA9PT0gLTEpIHsKICAgICAgICBzdGF0ZS5vcGVuS2V5cyA9IG9wZW5LZXlzOwogICAgICB9IGVsc2UgewogICAgICAgIHN0YXRlLm9wZW5LZXlzID0gbGF0ZXN0T3BlbktleSA/IFtsYXRlc3RPcGVuS2V5XSA6IFtdOwogICAgICB9CiAgICB9OwogICAgcmV0dXJuIHsKICAgICAgLi4udG9SZWZzKHN0YXRlKSwKICAgICAgb25PcGVuQ2hhbmdlLAogICAgfTsKICB9LAogIGNvbXBvbmVudHM6IHsKICAgIE1haWxPdXRsaW5lZCwKICAgIEFwcHN0b3JlT3V0bGluZWQsCiAgICBTZXR0aW5nT3V0bGluZWQsCiAgfSwKfSk7Cjwvc2NyaXB0PgoK",jsSourceCode:"PHRlbXBsYXRlPgogIDxkaXY+CiAgICA8YS1tZW51CiAgICAgIHN0eWxlPSJ3aWR0aDogMjU2cHgiCiAgICAgIG1vZGU9ImlubGluZSIKICAgICAgOm9wZW5LZXlzPSJvcGVuS2V5cyIKICAgICAgdi1tb2RlbDpzZWxlY3RlZEtleXM9InNlbGVjdGVkS2V5cyIKICAgICAgQG9wZW5DaGFuZ2U9Im9uT3BlbkNoYW5nZSIKICAgID4KICAgICAgPGEtc3ViLW1lbnUga2V5PSJzdWIxIj4KICAgICAgICA8dGVtcGxhdGUgI2ljb24+CiAgICAgICAgICA8TWFpbE91dGxpbmVkIC8+CiAgICAgICAgPC90ZW1wbGF0ZT4KICAgICAgICA8dGVtcGxhdGUgI3RpdGxlPk5hdmlnYXRpb24gT25lPC90ZW1wbGF0ZT4KICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSIxIj5PcHRpb24gMTwvYS1tZW51LWl0ZW0+CiAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iMiI+T3B0aW9uIDI8L2EtbWVudS1pdGVtPgogICAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjMiPk9wdGlvbiAzPC9hLW1lbnUtaXRlbT4KICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSI0Ij5PcHRpb24gNDwvYS1tZW51LWl0ZW0+CiAgICAgIDwvYS1zdWItbWVudT4KICAgICAgPGEtc3ViLW1lbnUga2V5PSJzdWIyIj4KICAgICAgICA8dGVtcGxhdGUgI2ljb24+PC90ZW1wbGF0ZT4KICAgICAgICA8dGVtcGxhdGUgI3RpdGxlPgogICAgICAgICAgPEFwcHN0b3JlT3V0bGluZWQgLz4KICAgICAgICAgIE5hdmlnYXRpb24gVHdvCiAgICAgICAgPC90ZW1wbGF0ZT4KICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSI1Ij5PcHRpb24gNTwvYS1tZW51LWl0ZW0+CiAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iNiI+T3B0aW9uIDY8L2EtbWVudS1pdGVtPgogICAgICAgIDxhLXN1Yi1tZW51IGtleT0ic3ViMyIgdGl0bGU9IlN1Ym1lbnUiPgogICAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iNyI+T3B0aW9uIDc8L2EtbWVudS1pdGVtPgogICAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iOCI+T3B0aW9uIDg8L2EtbWVudS1pdGVtPgogICAgICAgIDwvYS1zdWItbWVudT4KICAgICAgPC9hLXN1Yi1tZW51PgogICAgICA8YS1zdWItbWVudSBrZXk9InN1YjQiPgogICAgICAgIDx0ZW1wbGF0ZSAjaWNvbj4KICAgICAgICAgIDxTZXR0aW5nT3V0bGluZWQgLz4KICAgICAgICA8L3RlbXBsYXRlPgogICAgICAgIDx0ZW1wbGF0ZSAjdGl0bGU+TmF2aWdhdGlvbiBUaHJlZTwvdGVtcGxhdGU+CiAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iOSI+T3B0aW9uIDk8L2EtbWVudS1pdGVtPgogICAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjEwIj5PcHRpb24gMTA8L2EtbWVudS1pdGVtPgogICAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjExIj5PcHRpb24gMTE8L2EtbWVudS1pdGVtPgogICAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjEyIj5PcHRpb24gMTI8L2EtbWVudS1pdGVtPgogICAgICA8L2Etc3ViLW1lbnU+CiAgICA8L2EtbWVudT4KICA8L2Rpdj4KPC90ZW1wbGF0ZT4KPHNjcmlwdD4KaW1wb3J0IHsgZGVmaW5lQ29tcG9uZW50LCByZWFjdGl2ZSwgdG9SZWZzIH0gZnJvbSAndnVlJzsKaW1wb3J0IHsgTWFpbE91dGxpbmVkLCBBcHBzdG9yZU91dGxpbmVkLCBTZXR0aW5nT3V0bGluZWQgfSBmcm9tICdAYW50LWRlc2lnbi9pY29ucy12dWUnOwpleHBvcnQgZGVmYXVsdCBkZWZpbmVDb21wb25lbnQoewogIHNldHVwKCkgewogICAgY29uc3Qgc3RhdGUgPSByZWFjdGl2ZSh7CiAgICAgIHJvb3RTdWJtZW51S2V5czogWydzdWIxJywgJ3N1YjInLCAnc3ViNCddLAogICAgICBvcGVuS2V5czogWydzdWIxJ10sCiAgICAgIHNlbGVjdGVkS2V5czogW10sCiAgICB9KTsKICAgIGNvbnN0IG9uT3BlbkNoYW5nZSA9IG9wZW5LZXlzID0+IHsKICAgICAgY29uc3QgbGF0ZXN0T3BlbktleSA9IG9wZW5LZXlzLmZpbmQoa2V5ID0+IHN0YXRlLm9wZW5LZXlzLmluZGV4T2Yoa2V5KSA9PT0gLTEpOwogICAgICBpZiAoc3RhdGUucm9vdFN1Ym1lbnVLZXlzLmluZGV4T2YobGF0ZXN0T3BlbktleSkgPT09IC0xKSB7CiAgICAgICAgc3RhdGUub3BlbktleXMgPSBvcGVuS2V5czsKICAgICAgfSBlbHNlIHsKICAgICAgICBzdGF0ZS5vcGVuS2V5cyA9IGxhdGVzdE9wZW5LZXkgPyBbbGF0ZXN0T3BlbktleV0gOiBbXTsKICAgICAgfQogICAgfTsKICAgIHJldHVybiB7CiAgICAgIC4uLnRvUmVmcyhzdGF0ZSksCiAgICAgIG9uT3BlbkNoYW5nZSwKICAgIH07CiAgfSwKICBjb21wb25lbnRzOiB7CiAgICBNYWlsT3V0bGluZWQsCiAgICBBcHBzdG9yZU91dGxpbmVkLAogICAgU2V0dGluZ091dGxpbmVkLAogIH0sCn0pOwo8L3NjcmlwdD4="}},{default:s(()=>[n("div",null,[e(r,{style:{width:"256px"},mode:"inline",openKeys:o.openKeys,selectedKeys:o.selectedKeys,"onUpdate:selectedKeys":a[0]||(a[0]=b=>o.selectedKeys=b),onOpenChange:o.onOpenChange},{default:s(()=>[e(c,{key:"sub1"},{icon:s(()=>[e(m)]),title:s(()=>a[1]||(a[1]=[t("Navigation One")])),default:s(()=>[e(l,{key:"1"},{default:s(()=>a[2]||(a[2]=[t("Option 1")])),_:1,__:[2]}),e(l,{key:"2"},{default:s(()=>a[3]||(a[3]=[t("Option 2")])),_:1,__:[3]}),e(l,{key:"3"},{default:s(()=>a[4]||(a[4]=[t("Option 3")])),_:1,__:[4]}),e(l,{key:"4"},{default:s(()=>a[5]||(a[5]=[t("Option 4")])),_:1,__:[5]})]),_:1}),e(c,{key:"sub2"},{icon:s(()=>a[6]||(a[6]=[])),title:s(()=>[e(C),a[7]||(a[7]=t(" Navigation Two "))]),default:s(()=>[e(l,{key:"5"},{default:s(()=>a[8]||(a[8]=[t("Option 5")])),_:1,__:[8]}),e(l,{key:"6"},{default:s(()=>a[9]||(a[9]=[t("Option 6")])),_:1,__:[9]}),e(c,{key:"sub3",title:"Submenu"},{default:s(()=>[e(l,{key:"7"},{default:s(()=>a[10]||(a[10]=[t("Option 7")])),_:1,__:[10]}),e(l,{key:"8"},{default:s(()=>a[11]||(a[11]=[t("Option 8")])),_:1,__:[11]})]),_:1})]),_:1}),e(c,{key:"sub4"},{icon:s(()=>[e(u)]),title:s(()=>a[12]||(a[12]=[t("Navigation Three")])),default:s(()=>[e(l,{key:"9"},{default:s(()=>a[13]||(a[13]=[t("Option 9")])),_:1,__:[13]}),e(l,{key:"10"},{default:s(()=>a[14]||(a[14]=[t("Option 10")])),_:1,__:[14]}),e(l,{key:"11"},{default:s(()=>a[15]||(a[15]=[t("Option 11")])),_:1,__:[15]}),e(l,{key:"12"},{default:s(()=>a[16]||(a[16]=[t("Option 12")])),_:1,__:[16]})]),_:1})]),_:1},8,["openKeys","selectedKeys","onOpenChange"])])]),htmlCode:s(()=>a[17]||(a[17]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("div")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu")]),t(`
      `),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"width"),n("span",{class:"token punctuation"},":"),t(" 256px")]),n("span",{class:"token punctuation"},'"')])]),t(`
      `),n("span",{class:"token attr-name"},"mode"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("inline"),n("span",{class:"token punctuation"},'"')]),t(`
      `),n("span",{class:"token attr-name"},":openKeys"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("openKeys"),n("span",{class:"token punctuation"},'"')]),t(`
      `),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),t("selectedKeys")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("selectedKeys"),n("span",{class:"token punctuation"},'"')]),t(`
      `),n("span",{class:"token attr-name"},"@openChange"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("onOpenChange"),n("span",{class:"token punctuation"},'"')]),t(`
    `),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-sub-menu")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("sub1"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("MailOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#title"),n("span",{class:"token punctuation"},">")]),t("Navigation One"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("1"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 1"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("2"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 2"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("3"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 3"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 4"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-sub-menu")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-sub-menu")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("sub2"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#title"),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("AppstoreOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
          Navigation Two
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("5"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 5"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("6"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 6"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-sub-menu")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("sub3"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("Submenu"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("7"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 7"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("8"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 8"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-sub-menu")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-sub-menu")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-sub-menu")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("sub4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("SettingOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#title"),n("span",{class:"token punctuation"},">")]),t("Navigation Three"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("9"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 9"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("10"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 10"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("11"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 11"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("12"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 12"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-sub-menu")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("div")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("script")]),t(),n("span",{class:"token attr-name"},"lang"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("ts"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" defineComponent"),n("span",{class:"token punctuation"},","),t(" reactive"),n("span",{class:"token punctuation"},","),t(" toRefs "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" MailOutlined"),n("span",{class:"token punctuation"},","),t(" AppstoreOutlined"),n("span",{class:"token punctuation"},","),t(" SettingOutlined "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'@ant-design/icons-vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"export"),t(),n("span",{class:"token keyword"},"default"),t(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token punctuation"},"{"),t(`
    `),n("span",{class:"token keyword"},"const"),t(" state "),n("span",{class:"token operator"},"="),t(),n("span",{class:"token function"},"reactive"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
      `),n("span",{class:"token literal-property property"},"rootSubmenuKeys"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"["),n("span",{class:"token string"},"'sub1'"),n("span",{class:"token punctuation"},","),t(),n("span",{class:"token string"},"'sub2'"),n("span",{class:"token punctuation"},","),t(),n("span",{class:"token string"},"'sub4'"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),t(`
      `),n("span",{class:"token literal-property property"},"openKeys"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"["),n("span",{class:"token string"},"'sub1'"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),t(`
      `),n("span",{class:"token literal-property property"},"selectedKeys"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token keyword"},"const"),t(),n("span",{class:"token function-variable function"},"onOpenChange"),t(),n("span",{class:"token operator"},"="),t(),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},[n("span",{class:"token literal-property property"},"openKeys"),n("span",{class:"token operator"},":"),t(" string"),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"]")]),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token operator"},"=>"),t(),n("span",{class:"token punctuation"},"{"),t(`
      `),n("span",{class:"token keyword"},"const"),t(" latestOpenKey "),n("span",{class:"token operator"},"="),t(" openKeys"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"find"),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},"key"),t(),n("span",{class:"token operator"},"=>"),t(" state"),n("span",{class:"token punctuation"},"."),t("openKeys"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"indexOf"),n("span",{class:"token punctuation"},"("),t("key"),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token operator"},"==="),t(),n("span",{class:"token operator"},"-"),n("span",{class:"token number"},"1"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
      `),n("span",{class:"token keyword"},"if"),t(),n("span",{class:"token punctuation"},"("),t("state"),n("span",{class:"token punctuation"},"."),t("rootSubmenuKeys"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"indexOf"),n("span",{class:"token punctuation"},"("),t("latestOpenKey"),n("span",{class:"token operator"},"!"),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token operator"},"==="),t(),n("span",{class:"token operator"},"-"),n("span",{class:"token number"},"1"),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token punctuation"},"{"),t(`
        state`),n("span",{class:"token punctuation"},"."),t("openKeys "),n("span",{class:"token operator"},"="),t(" openKeys"),n("span",{class:"token punctuation"},";"),t(`
      `),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"else"),t(),n("span",{class:"token punctuation"},"{"),t(`
        state`),n("span",{class:"token punctuation"},"."),t("openKeys "),n("span",{class:"token operator"},"="),t(" latestOpenKey "),n("span",{class:"token operator"},"?"),t(),n("span",{class:"token punctuation"},"["),t("latestOpenKey"),n("span",{class:"token punctuation"},"]"),t(),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},";"),t(`
      `),n("span",{class:"token punctuation"},"}"),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token keyword"},"return"),t(),n("span",{class:"token punctuation"},"{"),t(`
      `),n("span",{class:"token operator"},"..."),n("span",{class:"token function"},"toRefs"),n("span",{class:"token punctuation"},"("),t("state"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},","),t(`
      onOpenChange`),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token literal-property property"},"components"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"{"),t(`
    MailOutlined`),n("span",{class:"token punctuation"},","),t(`
    AppstoreOutlined`),n("span",{class:"token punctuation"},","),t(`
    SettingOutlined`),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("script")]),n("span",{class:"token punctuation"},">")]),t(`
`)])],-1)])),jsVersionHtml:s(()=>a[18]||(a[18]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("div")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu")]),t(`
      `),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"width"),n("span",{class:"token punctuation"},":"),t(" 256px")]),n("span",{class:"token punctuation"},'"')])]),t(`
      `),n("span",{class:"token attr-name"},"mode"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("inline"),n("span",{class:"token punctuation"},'"')]),t(`
      `),n("span",{class:"token attr-name"},":openKeys"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("openKeys"),n("span",{class:"token punctuation"},'"')]),t(`
      `),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),t("selectedKeys")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("selectedKeys"),n("span",{class:"token punctuation"},'"')]),t(`
      `),n("span",{class:"token attr-name"},"@openChange"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("onOpenChange"),n("span",{class:"token punctuation"},'"')]),t(`
    `),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-sub-menu")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("sub1"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("MailOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#title"),n("span",{class:"token punctuation"},">")]),t("Navigation One"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("1"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 1"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("2"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 2"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("3"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 3"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 4"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-sub-menu")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-sub-menu")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("sub2"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#title"),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("AppstoreOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
          Navigation Two
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("5"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 5"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("6"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 6"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-sub-menu")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("sub3"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("Submenu"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("7"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 7"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("8"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 8"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-sub-menu")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-sub-menu")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-sub-menu")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("sub4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("SettingOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#title"),n("span",{class:"token punctuation"},">")]),t("Navigation Three"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("9"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 9"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("10"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 10"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("11"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 11"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("12"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 12"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-sub-menu")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("div")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("script")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" defineComponent"),n("span",{class:"token punctuation"},","),t(" reactive"),n("span",{class:"token punctuation"},","),t(" toRefs "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" MailOutlined"),n("span",{class:"token punctuation"},","),t(" AppstoreOutlined"),n("span",{class:"token punctuation"},","),t(" SettingOutlined "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'@ant-design/icons-vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"export"),t(),n("span",{class:"token keyword"},"default"),t(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token punctuation"},"{"),t(`
    `),n("span",{class:"token keyword"},"const"),t(" state "),n("span",{class:"token operator"},"="),t(),n("span",{class:"token function"},"reactive"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
      `),n("span",{class:"token literal-property property"},"rootSubmenuKeys"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"["),n("span",{class:"token string"},"'sub1'"),n("span",{class:"token punctuation"},","),t(),n("span",{class:"token string"},"'sub2'"),n("span",{class:"token punctuation"},","),t(),n("span",{class:"token string"},"'sub4'"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),t(`
      `),n("span",{class:"token literal-property property"},"openKeys"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"["),n("span",{class:"token string"},"'sub1'"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),t(`
      `),n("span",{class:"token literal-property property"},"selectedKeys"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token keyword"},"const"),t(),n("span",{class:"token function-variable function"},"onOpenChange"),t(),n("span",{class:"token operator"},"="),t(),n("span",{class:"token parameter"},"openKeys"),t(),n("span",{class:"token operator"},"=>"),t(),n("span",{class:"token punctuation"},"{"),t(`
      `),n("span",{class:"token keyword"},"const"),t(" latestOpenKey "),n("span",{class:"token operator"},"="),t(" openKeys"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"find"),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},"key"),t(),n("span",{class:"token operator"},"=>"),t(" state"),n("span",{class:"token punctuation"},"."),t("openKeys"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"indexOf"),n("span",{class:"token punctuation"},"("),t("key"),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token operator"},"==="),t(),n("span",{class:"token operator"},"-"),n("span",{class:"token number"},"1"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
      `),n("span",{class:"token keyword"},"if"),t(),n("span",{class:"token punctuation"},"("),t("state"),n("span",{class:"token punctuation"},"."),t("rootSubmenuKeys"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"indexOf"),n("span",{class:"token punctuation"},"("),t("latestOpenKey"),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token operator"},"==="),t(),n("span",{class:"token operator"},"-"),n("span",{class:"token number"},"1"),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token punctuation"},"{"),t(`
        state`),n("span",{class:"token punctuation"},"."),t("openKeys "),n("span",{class:"token operator"},"="),t(" openKeys"),n("span",{class:"token punctuation"},";"),t(`
      `),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"else"),t(),n("span",{class:"token punctuation"},"{"),t(`
        state`),n("span",{class:"token punctuation"},"."),t("openKeys "),n("span",{class:"token operator"},"="),t(" latestOpenKey "),n("span",{class:"token operator"},"?"),t(),n("span",{class:"token punctuation"},"["),t("latestOpenKey"),n("span",{class:"token punctuation"},"]"),t(),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},";"),t(`
      `),n("span",{class:"token punctuation"},"}"),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token keyword"},"return"),t(),n("span",{class:"token punctuation"},"{"),t(`
      `),n("span",{class:"token operator"},"..."),n("span",{class:"token function"},"toRefs"),n("span",{class:"token punctuation"},"("),t("state"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},","),t(`
      onOpenChange`),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token literal-property property"},"components"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"{"),t(`
    MailOutlined`),n("span",{class:"token punctuation"},","),t(`
    AppstoreOutlined`),n("span",{class:"token punctuation"},","),t(`
    SettingOutlined`),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("script")]),n("span",{class:"token punctuation"},">")]),t(`
`)])],-1)])),_:1})}var dn=Z(gn,[["render",rn]]);const In=v({setup(){const o=w({mode:"inline",theme:"light",selectedKeys:["1"],openKeys:["sub1"]}),a=g=>{o.mode=g?"vertical":"inline"},i=g=>{o.theme=g?"dark":"light"};return{...P(o),changeMode:a,changeTheme:i}},components:{MailOutlined:h,CalendarOutlined:B,AppstoreOutlined:V,SettingOutlined:S}});function mn(o,a,i,g,I,G){const m=p("a-switch"),l=p("MailOutlined"),c=p("a-menu-item"),C=p("CalendarOutlined"),u=p("AppstoreOutlined"),r=p("a-sub-menu"),A=p("SettingOutlined"),b=p("a-menu"),k=p("demo-box");return d(),W(k,{jsfiddle:{us:"Show the dynamic switching mode (between `inline` and `vertical`).",cn:"\u5C55\u793A\u52A8\u6001\u5207\u6362\u6A21\u5F0F\u3002",docHtml:`<h2 id="zh-cn">zh-CN</h2>
<p>\u5C55\u793A\u52A8\u6001\u5207\u6362\u6A21\u5F0F\u3002</p>
<h2 id="en-us">en-US</h2>
<p>Show the dynamic switching mode (between <code>inline</code> and <code>vertical</code>).</p>
`,order:5,title:{"zh-CN":"\u5207\u6362\u83DC\u5355\u7C7B\u578B","en-US":"Switch the menu type"},relativePath:"src/docs/menu/demo/switch-mode.vue",sourceCode:"PHRlbXBsYXRlPgogIDxkaXY+CiAgICA8YS1zd2l0Y2ggOmNoZWNrZWQ9Im1vZGUgPT09ICd2ZXJ0aWNhbCciIEBjaGFuZ2U9ImNoYW5nZU1vZGUiIC8+CiAgICBDaGFuZ2UgTW9kZQogICAgPHNwYW4gY2xhc3M9ImFudC1kaXZpZGVyIiBzdHlsZT0ibWFyZ2luOiAwIDFlbSIgLz4KICAgIDxhLXN3aXRjaCA6Y2hlY2tlZD0idGhlbWUgPT09ICdkYXJrJyIgQGNoYW5nZT0iY2hhbmdlVGhlbWUiIC8+CiAgICBDaGFuZ2UgVGhlbWUKICAgIDxiciAvPgogICAgPGJyIC8+CiAgICA8YS1tZW51CiAgICAgIHN0eWxlPSJ3aWR0aDogMjU2cHgiCiAgICAgIHYtbW9kZWw6b3BlbktleXM9Im9wZW5LZXlzIgogICAgICB2LW1vZGVsOnNlbGVjdGVkS2V5cz0ic2VsZWN0ZWRLZXlzIgogICAgICA6bW9kZT0ibW9kZSIKICAgICAgOnRoZW1lPSJ0aGVtZSIKICAgID4KICAgICAgPGEtbWVudS1pdGVtIGtleT0iMSI+CiAgICAgICAgPHRlbXBsYXRlICNpY29uPgogICAgICAgICAgPE1haWxPdXRsaW5lZCAvPgogICAgICAgIDwvdGVtcGxhdGU+CiAgICAgICAgTmF2aWdhdGlvbiBPbmUKICAgICAgPC9hLW1lbnUtaXRlbT4KICAgICAgPGEtbWVudS1pdGVtIGtleT0iMiI+CiAgICAgICAgPHRlbXBsYXRlICNpY29uPgogICAgICAgICAgPENhbGVuZGFyT3V0bGluZWQgLz4KICAgICAgICA8L3RlbXBsYXRlPgogICAgICAgIE5hdmlnYXRpb24gVHdvCiAgICAgIDwvYS1tZW51LWl0ZW0+CiAgICAgIDxhLXN1Yi1tZW51IGtleT0ic3ViMSI+CiAgICAgICAgPHRlbXBsYXRlICNpY29uPgogICAgICAgICAgPEFwcHN0b3JlT3V0bGluZWQgLz4KICAgICAgICA8L3RlbXBsYXRlPgogICAgICAgIDx0ZW1wbGF0ZSAjdGl0bGU+TmF2aWdhdGlvbiBUaHJlZTwvdGVtcGxhdGU+CiAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iMyI+T3B0aW9uIDM8L2EtbWVudS1pdGVtPgogICAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjQiPk9wdGlvbiA0PC9hLW1lbnUtaXRlbT4KICAgICAgICA8YS1zdWItbWVudSBrZXk9InN1YjEtMiIgdGl0bGU9IlN1Ym1lbnUiPgogICAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iNSI+T3B0aW9uIDU8L2EtbWVudS1pdGVtPgogICAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iNiI+T3B0aW9uIDY8L2EtbWVudS1pdGVtPgogICAgICAgIDwvYS1zdWItbWVudT4KICAgICAgPC9hLXN1Yi1tZW51PgogICAgICA8YS1zdWItbWVudSBrZXk9InN1YjIiPgogICAgICAgIDx0ZW1wbGF0ZSAjaWNvbj4KICAgICAgICAgIDxTZXR0aW5nT3V0bGluZWQgLz4KICAgICAgICA8L3RlbXBsYXRlPgoKICAgICAgICA8dGVtcGxhdGUgI3RpdGxlPk5hdmlnYXRpb24gRm91cjwvdGVtcGxhdGU+CiAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iNyI+T3B0aW9uIDc8L2EtbWVudS1pdGVtPgogICAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjgiPk9wdGlvbiA4PC9hLW1lbnUtaXRlbT4KICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSI5Ij5PcHRpb24gOTwvYS1tZW51LWl0ZW0+CiAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iMTAiPk9wdGlvbiAxMDwvYS1tZW51LWl0ZW0+CiAgICAgIDwvYS1zdWItbWVudT4KICAgIDwvYS1tZW51PgogIDwvZGl2Pgo8L3RlbXBsYXRlPgo8c2NyaXB0IGxhbmc9InRzIj4KaW1wb3J0IHsgZGVmaW5lQ29tcG9uZW50LCByZWFjdGl2ZSwgdG9SZWZzIH0gZnJvbSAndnVlJzsKaW1wb3J0IHsKICBNYWlsT3V0bGluZWQsCiAgQ2FsZW5kYXJPdXRsaW5lZCwKICBBcHBzdG9yZU91dGxpbmVkLAogIFNldHRpbmdPdXRsaW5lZCwKfSBmcm9tICdAYW50LWRlc2lnbi9pY29ucy12dWUnOwpleHBvcnQgZGVmYXVsdCBkZWZpbmVDb21wb25lbnQoewogIHNldHVwKCkgewogICAgY29uc3Qgc3RhdGUgPSByZWFjdGl2ZSh7CiAgICAgIG1vZGU6ICdpbmxpbmUnLAogICAgICB0aGVtZTogJ2xpZ2h0JywKICAgICAgc2VsZWN0ZWRLZXlzOiBbJzEnXSwKICAgICAgb3BlbktleXM6IFsnc3ViMSddLAogICAgfSk7CiAgICBjb25zdCBjaGFuZ2VNb2RlID0gKGNoZWNrZWQ6IGJvb2xlYW4pID0+IHsKICAgICAgc3RhdGUubW9kZSA9IGNoZWNrZWQgPyAndmVydGljYWwnIDogJ2lubGluZSc7CiAgICB9OwogICAgY29uc3QgY2hhbmdlVGhlbWUgPSAoY2hlY2tlZDogYm9vbGVhbikgPT4gewogICAgICBzdGF0ZS50aGVtZSA9IGNoZWNrZWQgPyAnZGFyaycgOiAnbGlnaHQnOwogICAgfTsKICAgIHJldHVybiB7CiAgICAgIC4uLnRvUmVmcyhzdGF0ZSksCiAgICAgIGNoYW5nZU1vZGUsCiAgICAgIGNoYW5nZVRoZW1lLAogICAgfTsKICB9LAogIGNvbXBvbmVudHM6IHsKICAgIE1haWxPdXRsaW5lZCwKICAgIENhbGVuZGFyT3V0bGluZWQsCiAgICBBcHBzdG9yZU91dGxpbmVkLAogICAgU2V0dGluZ091dGxpbmVkLAogIH0sCn0pOwo8L3NjcmlwdD4KCg==",jsSourceCode:"PHRlbXBsYXRlPgogIDxkaXY+CiAgICA8YS1zd2l0Y2ggOmNoZWNrZWQ9Im1vZGUgPT09ICd2ZXJ0aWNhbCciIEBjaGFuZ2U9ImNoYW5nZU1vZGUiIC8+CiAgICBDaGFuZ2UgTW9kZQogICAgPHNwYW4gY2xhc3M9ImFudC1kaXZpZGVyIiBzdHlsZT0ibWFyZ2luOiAwIDFlbSIgLz4KICAgIDxhLXN3aXRjaCA6Y2hlY2tlZD0idGhlbWUgPT09ICdkYXJrJyIgQGNoYW5nZT0iY2hhbmdlVGhlbWUiIC8+CiAgICBDaGFuZ2UgVGhlbWUKICAgIDxiciAvPgogICAgPGJyIC8+CiAgICA8YS1tZW51CiAgICAgIHN0eWxlPSJ3aWR0aDogMjU2cHgiCiAgICAgIHYtbW9kZWw6b3BlbktleXM9Im9wZW5LZXlzIgogICAgICB2LW1vZGVsOnNlbGVjdGVkS2V5cz0ic2VsZWN0ZWRLZXlzIgogICAgICA6bW9kZT0ibW9kZSIKICAgICAgOnRoZW1lPSJ0aGVtZSIKICAgID4KICAgICAgPGEtbWVudS1pdGVtIGtleT0iMSI+CiAgICAgICAgPHRlbXBsYXRlICNpY29uPgogICAgICAgICAgPE1haWxPdXRsaW5lZCAvPgogICAgICAgIDwvdGVtcGxhdGU+CiAgICAgICAgTmF2aWdhdGlvbiBPbmUKICAgICAgPC9hLW1lbnUtaXRlbT4KICAgICAgPGEtbWVudS1pdGVtIGtleT0iMiI+CiAgICAgICAgPHRlbXBsYXRlICNpY29uPgogICAgICAgICAgPENhbGVuZGFyT3V0bGluZWQgLz4KICAgICAgICA8L3RlbXBsYXRlPgogICAgICAgIE5hdmlnYXRpb24gVHdvCiAgICAgIDwvYS1tZW51LWl0ZW0+CiAgICAgIDxhLXN1Yi1tZW51IGtleT0ic3ViMSI+CiAgICAgICAgPHRlbXBsYXRlICNpY29uPgogICAgICAgICAgPEFwcHN0b3JlT3V0bGluZWQgLz4KICAgICAgICA8L3RlbXBsYXRlPgogICAgICAgIDx0ZW1wbGF0ZSAjdGl0bGU+TmF2aWdhdGlvbiBUaHJlZTwvdGVtcGxhdGU+CiAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iMyI+T3B0aW9uIDM8L2EtbWVudS1pdGVtPgogICAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjQiPk9wdGlvbiA0PC9hLW1lbnUtaXRlbT4KICAgICAgICA8YS1zdWItbWVudSBrZXk9InN1YjEtMiIgdGl0bGU9IlN1Ym1lbnUiPgogICAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iNSI+T3B0aW9uIDU8L2EtbWVudS1pdGVtPgogICAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iNiI+T3B0aW9uIDY8L2EtbWVudS1pdGVtPgogICAgICAgIDwvYS1zdWItbWVudT4KICAgICAgPC9hLXN1Yi1tZW51PgogICAgICA8YS1zdWItbWVudSBrZXk9InN1YjIiPgogICAgICAgIDx0ZW1wbGF0ZSAjaWNvbj4KICAgICAgICAgIDxTZXR0aW5nT3V0bGluZWQgLz4KICAgICAgICA8L3RlbXBsYXRlPgoKICAgICAgICA8dGVtcGxhdGUgI3RpdGxlPk5hdmlnYXRpb24gRm91cjwvdGVtcGxhdGU+CiAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iNyI+T3B0aW9uIDc8L2EtbWVudS1pdGVtPgogICAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjgiPk9wdGlvbiA4PC9hLW1lbnUtaXRlbT4KICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSI5Ij5PcHRpb24gOTwvYS1tZW51LWl0ZW0+CiAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iMTAiPk9wdGlvbiAxMDwvYS1tZW51LWl0ZW0+CiAgICAgIDwvYS1zdWItbWVudT4KICAgIDwvYS1tZW51PgogIDwvZGl2Pgo8L3RlbXBsYXRlPgo8c2NyaXB0PgppbXBvcnQgeyBkZWZpbmVDb21wb25lbnQsIHJlYWN0aXZlLCB0b1JlZnMgfSBmcm9tICd2dWUnOwppbXBvcnQgewogIE1haWxPdXRsaW5lZCwKICBDYWxlbmRhck91dGxpbmVkLAogIEFwcHN0b3JlT3V0bGluZWQsCiAgU2V0dGluZ091dGxpbmVkLAp9IGZyb20gJ0BhbnQtZGVzaWduL2ljb25zLXZ1ZSc7CmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbXBvbmVudCh7CiAgc2V0dXAoKSB7CiAgICBjb25zdCBzdGF0ZSA9IHJlYWN0aXZlKHsKICAgICAgbW9kZTogJ2lubGluZScsCiAgICAgIHRoZW1lOiAnbGlnaHQnLAogICAgICBzZWxlY3RlZEtleXM6IFsnMSddLAogICAgICBvcGVuS2V5czogWydzdWIxJ10sCiAgICB9KTsKICAgIGNvbnN0IGNoYW5nZU1vZGUgPSBjaGVja2VkID0+IHsKICAgICAgc3RhdGUubW9kZSA9IGNoZWNrZWQgPyAndmVydGljYWwnIDogJ2lubGluZSc7CiAgICB9OwogICAgY29uc3QgY2hhbmdlVGhlbWUgPSBjaGVja2VkID0+IHsKICAgICAgc3RhdGUudGhlbWUgPSBjaGVja2VkID8gJ2RhcmsnIDogJ2xpZ2h0JzsKICAgIH07CiAgICByZXR1cm4gewogICAgICAuLi50b1JlZnMoc3RhdGUpLAogICAgICBjaGFuZ2VNb2RlLAogICAgICBjaGFuZ2VUaGVtZSwKICAgIH07CiAgfSwKICBjb21wb25lbnRzOiB7CiAgICBNYWlsT3V0bGluZWQsCiAgICBDYWxlbmRhck91dGxpbmVkLAogICAgQXBwc3RvcmVPdXRsaW5lZCwKICAgIFNldHRpbmdPdXRsaW5lZCwKICB9LAp9KTsKPC9zY3JpcHQ+"}},{default:s(()=>[n("div",null,[e(m,{checked:o.mode==="vertical",onChange:o.changeMode},null,8,["checked","onChange"]),a[14]||(a[14]=t(" Change Mode ")),a[15]||(a[15]=n("span",{class:"ant-divider",style:{margin:"0 1em"}},null,-1)),e(m,{checked:o.theme==="dark",onChange:o.changeTheme},null,8,["checked","onChange"]),a[16]||(a[16]=t(" Change Theme ")),a[17]||(a[17]=n("br",null,null,-1)),a[18]||(a[18]=n("br",null,null,-1)),e(b,{style:{width:"256px"},openKeys:o.openKeys,"onUpdate:openKeys":a[0]||(a[0]=y=>o.openKeys=y),selectedKeys:o.selectedKeys,"onUpdate:selectedKeys":a[1]||(a[1]=y=>o.selectedKeys=y),mode:o.mode,theme:o.theme},{default:s(()=>[e(c,{key:"1"},{icon:s(()=>[e(l)]),default:s(()=>[a[2]||(a[2]=t(" Navigation One "))]),_:1,__:[2]}),e(c,{key:"2"},{icon:s(()=>[e(C)]),default:s(()=>[a[3]||(a[3]=t(" Navigation Two "))]),_:1,__:[3]}),e(r,{key:"sub1"},{icon:s(()=>[e(u)]),title:s(()=>a[4]||(a[4]=[t("Navigation Three")])),default:s(()=>[e(c,{key:"3"},{default:s(()=>a[5]||(a[5]=[t("Option 3")])),_:1,__:[5]}),e(c,{key:"4"},{default:s(()=>a[6]||(a[6]=[t("Option 4")])),_:1,__:[6]}),e(r,{key:"sub1-2",title:"Submenu"},{default:s(()=>[e(c,{key:"5"},{default:s(()=>a[7]||(a[7]=[t("Option 5")])),_:1,__:[7]}),e(c,{key:"6"},{default:s(()=>a[8]||(a[8]=[t("Option 6")])),_:1,__:[8]})]),_:1})]),_:1}),e(r,{key:"sub2"},{icon:s(()=>[e(A)]),title:s(()=>a[9]||(a[9]=[t("Navigation Four")])),default:s(()=>[e(c,{key:"7"},{default:s(()=>a[10]||(a[10]=[t("Option 7")])),_:1,__:[10]}),e(c,{key:"8"},{default:s(()=>a[11]||(a[11]=[t("Option 8")])),_:1,__:[11]}),e(c,{key:"9"},{default:s(()=>a[12]||(a[12]=[t("Option 9")])),_:1,__:[12]}),e(c,{key:"10"},{default:s(()=>a[13]||(a[13]=[t("Option 10")])),_:1,__:[13]})]),_:1})]),_:1},8,["openKeys","selectedKeys","mode","theme"])])]),htmlCode:s(()=>a[19]||(a[19]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("div")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-switch")]),t(),n("span",{class:"token attr-name"},":checked"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("mode === 'vertical'"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"@change"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("changeMode"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
    Change Mode
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("span")]),t(),n("span",{class:"token attr-name"},"class"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("ant-divider"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"margin"),n("span",{class:"token punctuation"},":"),t(" 0 1em")]),n("span",{class:"token punctuation"},'"')])]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-switch")]),t(),n("span",{class:"token attr-name"},":checked"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("theme === 'dark'"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"@change"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("changeTheme"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
    Change Theme
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("br")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("br")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu")]),t(`
      `),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"width"),n("span",{class:"token punctuation"},":"),t(" 256px")]),n("span",{class:"token punctuation"},'"')])]),t(`
      `),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),t("openKeys")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("openKeys"),n("span",{class:"token punctuation"},'"')]),t(`
      `),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),t("selectedKeys")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("selectedKeys"),n("span",{class:"token punctuation"},'"')]),t(`
      `),n("span",{class:"token attr-name"},":mode"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("mode"),n("span",{class:"token punctuation"},'"')]),t(`
      `),n("span",{class:"token attr-name"},":theme"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("theme"),n("span",{class:"token punctuation"},'"')]),t(`
    `),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("1"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("MailOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        Navigation One
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("2"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("CalendarOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        Navigation Two
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-sub-menu")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("sub1"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("AppstoreOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#title"),n("span",{class:"token punctuation"},">")]),t("Navigation Three"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("3"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 3"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 4"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-sub-menu")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("sub1-2"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("Submenu"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("5"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 5"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("6"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 6"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-sub-menu")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-sub-menu")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-sub-menu")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("sub2"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("SettingOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`

        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#title"),n("span",{class:"token punctuation"},">")]),t("Navigation Four"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("7"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 7"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("8"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 8"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("9"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 9"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("10"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 10"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-sub-menu")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("div")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("script")]),t(),n("span",{class:"token attr-name"},"lang"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("ts"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" defineComponent"),n("span",{class:"token punctuation"},","),t(" reactive"),n("span",{class:"token punctuation"},","),t(" toRefs "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(`
  MailOutlined`),n("span",{class:"token punctuation"},","),t(`
  CalendarOutlined`),n("span",{class:"token punctuation"},","),t(`
  AppstoreOutlined`),n("span",{class:"token punctuation"},","),t(`
  SettingOutlined`),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'@ant-design/icons-vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"export"),t(),n("span",{class:"token keyword"},"default"),t(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token punctuation"},"{"),t(`
    `),n("span",{class:"token keyword"},"const"),t(" state "),n("span",{class:"token operator"},"="),t(),n("span",{class:"token function"},"reactive"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
      `),n("span",{class:"token literal-property property"},"mode"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'inline'"),n("span",{class:"token punctuation"},","),t(`
      `),n("span",{class:"token literal-property property"},"theme"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'light'"),n("span",{class:"token punctuation"},","),t(`
      `),n("span",{class:"token literal-property property"},"selectedKeys"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"["),n("span",{class:"token string"},"'1'"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),t(`
      `),n("span",{class:"token literal-property property"},"openKeys"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"["),n("span",{class:"token string"},"'sub1'"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token keyword"},"const"),t(),n("span",{class:"token function-variable function"},"changeMode"),t(),n("span",{class:"token operator"},"="),t(),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},[n("span",{class:"token literal-property property"},"checked"),n("span",{class:"token operator"},":"),t(" boolean")]),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token operator"},"=>"),t(),n("span",{class:"token punctuation"},"{"),t(`
      state`),n("span",{class:"token punctuation"},"."),t("mode "),n("span",{class:"token operator"},"="),t(" checked "),n("span",{class:"token operator"},"?"),t(),n("span",{class:"token string"},"'vertical'"),t(),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'inline'"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token keyword"},"const"),t(),n("span",{class:"token function-variable function"},"changeTheme"),t(),n("span",{class:"token operator"},"="),t(),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},[n("span",{class:"token literal-property property"},"checked"),n("span",{class:"token operator"},":"),t(" boolean")]),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token operator"},"=>"),t(),n("span",{class:"token punctuation"},"{"),t(`
      state`),n("span",{class:"token punctuation"},"."),t("theme "),n("span",{class:"token operator"},"="),t(" checked "),n("span",{class:"token operator"},"?"),t(),n("span",{class:"token string"},"'dark'"),t(),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'light'"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token keyword"},"return"),t(),n("span",{class:"token punctuation"},"{"),t(`
      `),n("span",{class:"token operator"},"..."),n("span",{class:"token function"},"toRefs"),n("span",{class:"token punctuation"},"("),t("state"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},","),t(`
      changeMode`),n("span",{class:"token punctuation"},","),t(`
      changeTheme`),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token literal-property property"},"components"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"{"),t(`
    MailOutlined`),n("span",{class:"token punctuation"},","),t(`
    CalendarOutlined`),n("span",{class:"token punctuation"},","),t(`
    AppstoreOutlined`),n("span",{class:"token punctuation"},","),t(`
    SettingOutlined`),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("script")]),n("span",{class:"token punctuation"},">")]),t(`
`)])],-1)])),jsVersionHtml:s(()=>a[20]||(a[20]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("div")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-switch")]),t(),n("span",{class:"token attr-name"},":checked"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("mode === 'vertical'"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"@change"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("changeMode"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
    Change Mode
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("span")]),t(),n("span",{class:"token attr-name"},"class"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("ant-divider"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"margin"),n("span",{class:"token punctuation"},":"),t(" 0 1em")]),n("span",{class:"token punctuation"},'"')])]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-switch")]),t(),n("span",{class:"token attr-name"},":checked"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("theme === 'dark'"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"@change"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("changeTheme"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
    Change Theme
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("br")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("br")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu")]),t(`
      `),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"width"),n("span",{class:"token punctuation"},":"),t(" 256px")]),n("span",{class:"token punctuation"},'"')])]),t(`
      `),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),t("openKeys")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("openKeys"),n("span",{class:"token punctuation"},'"')]),t(`
      `),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),t("selectedKeys")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("selectedKeys"),n("span",{class:"token punctuation"},'"')]),t(`
      `),n("span",{class:"token attr-name"},":mode"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("mode"),n("span",{class:"token punctuation"},'"')]),t(`
      `),n("span",{class:"token attr-name"},":theme"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("theme"),n("span",{class:"token punctuation"},'"')]),t(`
    `),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("1"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("MailOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        Navigation One
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("2"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("CalendarOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        Navigation Two
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-sub-menu")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("sub1"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("AppstoreOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#title"),n("span",{class:"token punctuation"},">")]),t("Navigation Three"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("3"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 3"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 4"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-sub-menu")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("sub1-2"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("Submenu"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("5"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 5"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("6"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 6"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-sub-menu")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-sub-menu")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-sub-menu")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("sub2"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("SettingOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`

        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#title"),n("span",{class:"token punctuation"},">")]),t("Navigation Four"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("7"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 7"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("8"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 8"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("9"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 9"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("10"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 10"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-sub-menu")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("div")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("script")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" defineComponent"),n("span",{class:"token punctuation"},","),t(" reactive"),n("span",{class:"token punctuation"},","),t(" toRefs "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(`
  MailOutlined`),n("span",{class:"token punctuation"},","),t(`
  CalendarOutlined`),n("span",{class:"token punctuation"},","),t(`
  AppstoreOutlined`),n("span",{class:"token punctuation"},","),t(`
  SettingOutlined`),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'@ant-design/icons-vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"export"),t(),n("span",{class:"token keyword"},"default"),t(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token punctuation"},"{"),t(`
    `),n("span",{class:"token keyword"},"const"),t(" state "),n("span",{class:"token operator"},"="),t(),n("span",{class:"token function"},"reactive"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
      `),n("span",{class:"token literal-property property"},"mode"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'inline'"),n("span",{class:"token punctuation"},","),t(`
      `),n("span",{class:"token literal-property property"},"theme"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'light'"),n("span",{class:"token punctuation"},","),t(`
      `),n("span",{class:"token literal-property property"},"selectedKeys"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"["),n("span",{class:"token string"},"'1'"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),t(`
      `),n("span",{class:"token literal-property property"},"openKeys"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"["),n("span",{class:"token string"},"'sub1'"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token keyword"},"const"),t(),n("span",{class:"token function-variable function"},"changeMode"),t(),n("span",{class:"token operator"},"="),t(),n("span",{class:"token parameter"},"checked"),t(),n("span",{class:"token operator"},"=>"),t(),n("span",{class:"token punctuation"},"{"),t(`
      state`),n("span",{class:"token punctuation"},"."),t("mode "),n("span",{class:"token operator"},"="),t(" checked "),n("span",{class:"token operator"},"?"),t(),n("span",{class:"token string"},"'vertical'"),t(),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'inline'"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token keyword"},"const"),t(),n("span",{class:"token function-variable function"},"changeTheme"),t(),n("span",{class:"token operator"},"="),t(),n("span",{class:"token parameter"},"checked"),t(),n("span",{class:"token operator"},"=>"),t(),n("span",{class:"token punctuation"},"{"),t(`
      state`),n("span",{class:"token punctuation"},"."),t("theme "),n("span",{class:"token operator"},"="),t(" checked "),n("span",{class:"token operator"},"?"),t(),n("span",{class:"token string"},"'dark'"),t(),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'light'"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token keyword"},"return"),t(),n("span",{class:"token punctuation"},"{"),t(`
      `),n("span",{class:"token operator"},"..."),n("span",{class:"token function"},"toRefs"),n("span",{class:"token punctuation"},"("),t("state"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},","),t(`
      changeMode`),n("span",{class:"token punctuation"},","),t(`
      changeTheme`),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token literal-property property"},"components"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"{"),t(`
    MailOutlined`),n("span",{class:"token punctuation"},","),t(`
    CalendarOutlined`),n("span",{class:"token punctuation"},","),t(`
    AppstoreOutlined`),n("span",{class:"token punctuation"},","),t(`
    SettingOutlined`),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("script")]),n("span",{class:"token punctuation"},">")]),t(`
`)])],-1)])),_:1})}var Cn=Z(In,[["render",mn]]);const An=v({setup(){const o=w({theme:"dark",selectedKeys:["1"],openKeys:["sub1"]}),a=i=>{o.theme=i?"dark":"light"};return{...P(o),changeTheme:a}},components:{MailOutlined:h,CalendarOutlined:B,AppstoreOutlined:V,SettingOutlined:S}});function bn(o,a,i,g,I,G){const m=p("a-switch"),l=p("MailOutlined"),c=p("a-menu-item"),C=p("CalendarOutlined"),u=p("AppstoreOutlined"),r=p("a-sub-menu"),A=p("SettingOutlined"),b=p("a-menu"),k=p("demo-box");return d(),W(k,{jsfiddle:{us:"There are two built-in themes: `light` and `dark`. The default value is `light`.",cn:"\u5185\u5EFA\u4E86\u4E24\u5957\u4E3B\u9898 `light` \u548C `dark`\uFF0C\u9ED8\u8BA4 `light`\u3002",docHtml:`<h2 id="zh-cn">zh-CN</h2>
<p>\u5185\u5EFA\u4E86\u4E24\u5957\u4E3B\u9898 <code>light</code> \u548C <code>dark</code>\uFF0C\u9ED8\u8BA4 <code>light</code>\u3002</p>
<h2 id="en-us">en-US</h2>
<p>There are two built-in themes: <code>light</code> and <code>dark</code>. The default value is <code>light</code>.</p>
`,order:4,title:{"zh-CN":"\u4E3B\u9898","en-US":"Menu Themes"},relativePath:"src/docs/menu/demo/theme.vue",sourceCode:"PHRlbXBsYXRlPgogIDxkaXY+CiAgICA8YS1zd2l0Y2gKICAgICAgOmNoZWNrZWQ9InRoZW1lID09PSAnZGFyayciCiAgICAgIGNoZWNrZWQtY2hpbGRyZW49IkRhcmsiCiAgICAgIHVuLWNoZWNrZWQtY2hpbGRyZW49IkxpZ2h0IgogICAgICBAY2hhbmdlPSJjaGFuZ2VUaGVtZSIKICAgIC8+CiAgICA8YnIgLz4KICAgIDxiciAvPgogICAgPGEtbWVudQogICAgICBzdHlsZT0id2lkdGg6IDI1NnB4IgogICAgICB2LW1vZGVsOm9wZW5LZXlzPSJvcGVuS2V5cyIKICAgICAgdi1tb2RlbDpzZWxlY3RlZEtleXM9InNlbGVjdGVkS2V5cyIKICAgICAgbW9kZT0iaW5saW5lIgogICAgICA6dGhlbWU9InRoZW1lIgogICAgPgogICAgICA8YS1tZW51LWl0ZW0ga2V5PSIxIj4KICAgICAgICA8dGVtcGxhdGUgI2ljb24+CiAgICAgICAgICA8TWFpbE91dGxpbmVkIC8+CiAgICAgICAgPC90ZW1wbGF0ZT4KICAgICAgICBOYXZpZ2F0aW9uIE9uZQogICAgICA8L2EtbWVudS1pdGVtPgogICAgICA8YS1tZW51LWl0ZW0ga2V5PSIyIj4KICAgICAgICA8dGVtcGxhdGUgI2ljb24+CiAgICAgICAgICA8Q2FsZW5kYXJPdXRsaW5lZCAvPgogICAgICAgIDwvdGVtcGxhdGU+CiAgICAgICAgTmF2aWdhdGlvbiBUd28KICAgICAgPC9hLW1lbnUtaXRlbT4KICAgICAgPGEtc3ViLW1lbnUga2V5PSJzdWIxIj4KICAgICAgICA8dGVtcGxhdGUgI2ljb24+CiAgICAgICAgICA8QXBwc3RvcmVPdXRsaW5lZCAvPgogICAgICAgIDwvdGVtcGxhdGU+CiAgICAgICAgPHRlbXBsYXRlICN0aXRsZT5OYXZpZ2F0aW9uIFRocmVlPC90ZW1wbGF0ZT4KICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSIzIj5PcHRpb24gMzwvYS1tZW51LWl0ZW0+CiAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iNCI+T3B0aW9uIDQ8L2EtbWVudS1pdGVtPgogICAgICAgIDxhLXN1Yi1tZW51IGtleT0ic3ViMS0yIiB0aXRsZT0iU3VibWVudSI+CiAgICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSI1Ij5PcHRpb24gNTwvYS1tZW51LWl0ZW0+CiAgICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSI2Ij5PcHRpb24gNjwvYS1tZW51LWl0ZW0+CiAgICAgICAgPC9hLXN1Yi1tZW51PgogICAgICA8L2Etc3ViLW1lbnU+CiAgICAgIDxhLXN1Yi1tZW51IGtleT0ic3ViMiI+CiAgICAgICAgPHRlbXBsYXRlICNpY29uPgogICAgICAgICAgPFNldHRpbmdPdXRsaW5lZCAvPgogICAgICAgIDwvdGVtcGxhdGU+CiAgICAgICAgPHRlbXBsYXRlICN0aXRsZT5OYXZpZ2F0aW9uIEZvdXI8L3RlbXBsYXRlPgogICAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjciPk9wdGlvbiA3PC9hLW1lbnUtaXRlbT4KICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSI4Ij5PcHRpb24gODwvYS1tZW51LWl0ZW0+CiAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iOSI+T3B0aW9uIDk8L2EtbWVudS1pdGVtPgogICAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjEwIj5PcHRpb24gMTA8L2EtbWVudS1pdGVtPgogICAgICA8L2Etc3ViLW1lbnU+CiAgICA8L2EtbWVudT4KICA8L2Rpdj4KPC90ZW1wbGF0ZT4KPHNjcmlwdCBsYW5nPSJ0cyI+CmltcG9ydCB7IGRlZmluZUNvbXBvbmVudCwgcmVhY3RpdmUsIHRvUmVmcyB9IGZyb20gJ3Z1ZSc7CmltcG9ydCB7CiAgTWFpbE91dGxpbmVkLAogIENhbGVuZGFyT3V0bGluZWQsCiAgQXBwc3RvcmVPdXRsaW5lZCwKICBTZXR0aW5nT3V0bGluZWQsCn0gZnJvbSAnQGFudC1kZXNpZ24vaWNvbnMtdnVlJzsKZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29tcG9uZW50KHsKICBzZXR1cCgpIHsKICAgIGNvbnN0IHN0YXRlID0gcmVhY3RpdmUoewogICAgICB0aGVtZTogJ2RhcmsnLAogICAgICBzZWxlY3RlZEtleXM6IFsnMSddLAogICAgICBvcGVuS2V5czogWydzdWIxJ10sCiAgICB9KTsKICAgIGNvbnN0IGNoYW5nZVRoZW1lID0gKGNoZWNrZWQ6IGJvb2xlYW4pID0+IHsKICAgICAgc3RhdGUudGhlbWUgPSBjaGVja2VkID8gJ2RhcmsnIDogJ2xpZ2h0JzsKICAgIH07CgogICAgcmV0dXJuIHsKICAgICAgLi4udG9SZWZzKHN0YXRlKSwKICAgICAgY2hhbmdlVGhlbWUsCiAgICB9OwogIH0sCiAgY29tcG9uZW50czogewogICAgTWFpbE91dGxpbmVkLAogICAgQ2FsZW5kYXJPdXRsaW5lZCwKICAgIEFwcHN0b3JlT3V0bGluZWQsCiAgICBTZXR0aW5nT3V0bGluZWQsCiAgfSwKfSk7Cjwvc2NyaXB0PgoK",jsSourceCode:"PHRlbXBsYXRlPgogIDxkaXY+CiAgICA8YS1zd2l0Y2gKICAgICAgOmNoZWNrZWQ9InRoZW1lID09PSAnZGFyayciCiAgICAgIGNoZWNrZWQtY2hpbGRyZW49IkRhcmsiCiAgICAgIHVuLWNoZWNrZWQtY2hpbGRyZW49IkxpZ2h0IgogICAgICBAY2hhbmdlPSJjaGFuZ2VUaGVtZSIKICAgIC8+CiAgICA8YnIgLz4KICAgIDxiciAvPgogICAgPGEtbWVudQogICAgICBzdHlsZT0id2lkdGg6IDI1NnB4IgogICAgICB2LW1vZGVsOm9wZW5LZXlzPSJvcGVuS2V5cyIKICAgICAgdi1tb2RlbDpzZWxlY3RlZEtleXM9InNlbGVjdGVkS2V5cyIKICAgICAgbW9kZT0iaW5saW5lIgogICAgICA6dGhlbWU9InRoZW1lIgogICAgPgogICAgICA8YS1tZW51LWl0ZW0ga2V5PSIxIj4KICAgICAgICA8dGVtcGxhdGUgI2ljb24+CiAgICAgICAgICA8TWFpbE91dGxpbmVkIC8+CiAgICAgICAgPC90ZW1wbGF0ZT4KICAgICAgICBOYXZpZ2F0aW9uIE9uZQogICAgICA8L2EtbWVudS1pdGVtPgogICAgICA8YS1tZW51LWl0ZW0ga2V5PSIyIj4KICAgICAgICA8dGVtcGxhdGUgI2ljb24+CiAgICAgICAgICA8Q2FsZW5kYXJPdXRsaW5lZCAvPgogICAgICAgIDwvdGVtcGxhdGU+CiAgICAgICAgTmF2aWdhdGlvbiBUd28KICAgICAgPC9hLW1lbnUtaXRlbT4KICAgICAgPGEtc3ViLW1lbnUga2V5PSJzdWIxIj4KICAgICAgICA8dGVtcGxhdGUgI2ljb24+CiAgICAgICAgICA8QXBwc3RvcmVPdXRsaW5lZCAvPgogICAgICAgIDwvdGVtcGxhdGU+CiAgICAgICAgPHRlbXBsYXRlICN0aXRsZT5OYXZpZ2F0aW9uIFRocmVlPC90ZW1wbGF0ZT4KICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSIzIj5PcHRpb24gMzwvYS1tZW51LWl0ZW0+CiAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iNCI+T3B0aW9uIDQ8L2EtbWVudS1pdGVtPgogICAgICAgIDxhLXN1Yi1tZW51IGtleT0ic3ViMS0yIiB0aXRsZT0iU3VibWVudSI+CiAgICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSI1Ij5PcHRpb24gNTwvYS1tZW51LWl0ZW0+CiAgICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSI2Ij5PcHRpb24gNjwvYS1tZW51LWl0ZW0+CiAgICAgICAgPC9hLXN1Yi1tZW51PgogICAgICA8L2Etc3ViLW1lbnU+CiAgICAgIDxhLXN1Yi1tZW51IGtleT0ic3ViMiI+CiAgICAgICAgPHRlbXBsYXRlICNpY29uPgogICAgICAgICAgPFNldHRpbmdPdXRsaW5lZCAvPgogICAgICAgIDwvdGVtcGxhdGU+CiAgICAgICAgPHRlbXBsYXRlICN0aXRsZT5OYXZpZ2F0aW9uIEZvdXI8L3RlbXBsYXRlPgogICAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjciPk9wdGlvbiA3PC9hLW1lbnUtaXRlbT4KICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSI4Ij5PcHRpb24gODwvYS1tZW51LWl0ZW0+CiAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iOSI+T3B0aW9uIDk8L2EtbWVudS1pdGVtPgogICAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjEwIj5PcHRpb24gMTA8L2EtbWVudS1pdGVtPgogICAgICA8L2Etc3ViLW1lbnU+CiAgICA8L2EtbWVudT4KICA8L2Rpdj4KPC90ZW1wbGF0ZT4KPHNjcmlwdD4KaW1wb3J0IHsgZGVmaW5lQ29tcG9uZW50LCByZWFjdGl2ZSwgdG9SZWZzIH0gZnJvbSAndnVlJzsKaW1wb3J0IHsKICBNYWlsT3V0bGluZWQsCiAgQ2FsZW5kYXJPdXRsaW5lZCwKICBBcHBzdG9yZU91dGxpbmVkLAogIFNldHRpbmdPdXRsaW5lZCwKfSBmcm9tICdAYW50LWRlc2lnbi9pY29ucy12dWUnOwpleHBvcnQgZGVmYXVsdCBkZWZpbmVDb21wb25lbnQoewogIHNldHVwKCkgewogICAgY29uc3Qgc3RhdGUgPSByZWFjdGl2ZSh7CiAgICAgIHRoZW1lOiAnZGFyaycsCiAgICAgIHNlbGVjdGVkS2V5czogWycxJ10sCiAgICAgIG9wZW5LZXlzOiBbJ3N1YjEnXSwKICAgIH0pOwogICAgY29uc3QgY2hhbmdlVGhlbWUgPSBjaGVja2VkID0+IHsKICAgICAgc3RhdGUudGhlbWUgPSBjaGVja2VkID8gJ2RhcmsnIDogJ2xpZ2h0JzsKICAgIH07CiAgICByZXR1cm4gewogICAgICAuLi50b1JlZnMoc3RhdGUpLAogICAgICBjaGFuZ2VUaGVtZSwKICAgIH07CiAgfSwKICBjb21wb25lbnRzOiB7CiAgICBNYWlsT3V0bGluZWQsCiAgICBDYWxlbmRhck91dGxpbmVkLAogICAgQXBwc3RvcmVPdXRsaW5lZCwKICAgIFNldHRpbmdPdXRsaW5lZCwKICB9LAp9KTsKPC9zY3JpcHQ+"}},{default:s(()=>[n("div",null,[e(m,{checked:o.theme==="dark","checked-children":"Dark","un-checked-children":"Light",onChange:o.changeTheme},null,8,["checked","onChange"]),a[14]||(a[14]=n("br",null,null,-1)),a[15]||(a[15]=n("br",null,null,-1)),e(b,{style:{width:"256px"},openKeys:o.openKeys,"onUpdate:openKeys":a[0]||(a[0]=y=>o.openKeys=y),selectedKeys:o.selectedKeys,"onUpdate:selectedKeys":a[1]||(a[1]=y=>o.selectedKeys=y),mode:"inline",theme:o.theme},{default:s(()=>[e(c,{key:"1"},{icon:s(()=>[e(l)]),default:s(()=>[a[2]||(a[2]=t(" Navigation One "))]),_:1,__:[2]}),e(c,{key:"2"},{icon:s(()=>[e(C)]),default:s(()=>[a[3]||(a[3]=t(" Navigation Two "))]),_:1,__:[3]}),e(r,{key:"sub1"},{icon:s(()=>[e(u)]),title:s(()=>a[4]||(a[4]=[t("Navigation Three")])),default:s(()=>[e(c,{key:"3"},{default:s(()=>a[5]||(a[5]=[t("Option 3")])),_:1,__:[5]}),e(c,{key:"4"},{default:s(()=>a[6]||(a[6]=[t("Option 4")])),_:1,__:[6]}),e(r,{key:"sub1-2",title:"Submenu"},{default:s(()=>[e(c,{key:"5"},{default:s(()=>a[7]||(a[7]=[t("Option 5")])),_:1,__:[7]}),e(c,{key:"6"},{default:s(()=>a[8]||(a[8]=[t("Option 6")])),_:1,__:[8]})]),_:1})]),_:1}),e(r,{key:"sub2"},{icon:s(()=>[e(A)]),title:s(()=>a[9]||(a[9]=[t("Navigation Four")])),default:s(()=>[e(c,{key:"7"},{default:s(()=>a[10]||(a[10]=[t("Option 7")])),_:1,__:[10]}),e(c,{key:"8"},{default:s(()=>a[11]||(a[11]=[t("Option 8")])),_:1,__:[11]}),e(c,{key:"9"},{default:s(()=>a[12]||(a[12]=[t("Option 9")])),_:1,__:[12]}),e(c,{key:"10"},{default:s(()=>a[13]||(a[13]=[t("Option 10")])),_:1,__:[13]})]),_:1})]),_:1},8,["openKeys","selectedKeys","theme"])])]),htmlCode:s(()=>a[16]||(a[16]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("div")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-switch")]),t(`
      `),n("span",{class:"token attr-name"},":checked"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("theme === 'dark'"),n("span",{class:"token punctuation"},'"')]),t(`
      `),n("span",{class:"token attr-name"},"checked-children"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("Dark"),n("span",{class:"token punctuation"},'"')]),t(`
      `),n("span",{class:"token attr-name"},"un-checked-children"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("Light"),n("span",{class:"token punctuation"},'"')]),t(`
      `),n("span",{class:"token attr-name"},"@change"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("changeTheme"),n("span",{class:"token punctuation"},'"')]),t(`
    `),n("span",{class:"token punctuation"},"/>")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("br")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("br")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu")]),t(`
      `),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"width"),n("span",{class:"token punctuation"},":"),t(" 256px")]),n("span",{class:"token punctuation"},'"')])]),t(`
      `),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),t("openKeys")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("openKeys"),n("span",{class:"token punctuation"},'"')]),t(`
      `),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),t("selectedKeys")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("selectedKeys"),n("span",{class:"token punctuation"},'"')]),t(`
      `),n("span",{class:"token attr-name"},"mode"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("inline"),n("span",{class:"token punctuation"},'"')]),t(`
      `),n("span",{class:"token attr-name"},":theme"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("theme"),n("span",{class:"token punctuation"},'"')]),t(`
    `),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("1"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("MailOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        Navigation One
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("2"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("CalendarOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        Navigation Two
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-sub-menu")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("sub1"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("AppstoreOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#title"),n("span",{class:"token punctuation"},">")]),t("Navigation Three"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("3"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 3"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 4"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-sub-menu")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("sub1-2"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("Submenu"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("5"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 5"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("6"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 6"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-sub-menu")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-sub-menu")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-sub-menu")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("sub2"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("SettingOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#title"),n("span",{class:"token punctuation"},">")]),t("Navigation Four"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("7"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 7"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("8"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 8"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("9"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 9"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("10"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 10"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-sub-menu")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("div")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("script")]),t(),n("span",{class:"token attr-name"},"lang"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("ts"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" defineComponent"),n("span",{class:"token punctuation"},","),t(" reactive"),n("span",{class:"token punctuation"},","),t(" toRefs "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(`
  MailOutlined`),n("span",{class:"token punctuation"},","),t(`
  CalendarOutlined`),n("span",{class:"token punctuation"},","),t(`
  AppstoreOutlined`),n("span",{class:"token punctuation"},","),t(`
  SettingOutlined`),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'@ant-design/icons-vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"export"),t(),n("span",{class:"token keyword"},"default"),t(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token punctuation"},"{"),t(`
    `),n("span",{class:"token keyword"},"const"),t(" state "),n("span",{class:"token operator"},"="),t(),n("span",{class:"token function"},"reactive"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
      `),n("span",{class:"token literal-property property"},"theme"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'dark'"),n("span",{class:"token punctuation"},","),t(`
      `),n("span",{class:"token literal-property property"},"selectedKeys"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"["),n("span",{class:"token string"},"'1'"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),t(`
      `),n("span",{class:"token literal-property property"},"openKeys"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"["),n("span",{class:"token string"},"'sub1'"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token keyword"},"const"),t(),n("span",{class:"token function-variable function"},"changeTheme"),t(),n("span",{class:"token operator"},"="),t(),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},[n("span",{class:"token literal-property property"},"checked"),n("span",{class:"token operator"},":"),t(" boolean")]),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token operator"},"=>"),t(),n("span",{class:"token punctuation"},"{"),t(`
      state`),n("span",{class:"token punctuation"},"."),t("theme "),n("span",{class:"token operator"},"="),t(" checked "),n("span",{class:"token operator"},"?"),t(),n("span",{class:"token string"},"'dark'"),t(),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'light'"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`

    `),n("span",{class:"token keyword"},"return"),t(),n("span",{class:"token punctuation"},"{"),t(`
      `),n("span",{class:"token operator"},"..."),n("span",{class:"token function"},"toRefs"),n("span",{class:"token punctuation"},"("),t("state"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},","),t(`
      changeTheme`),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token literal-property property"},"components"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"{"),t(`
    MailOutlined`),n("span",{class:"token punctuation"},","),t(`
    CalendarOutlined`),n("span",{class:"token punctuation"},","),t(`
    AppstoreOutlined`),n("span",{class:"token punctuation"},","),t(`
    SettingOutlined`),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("script")]),n("span",{class:"token punctuation"},">")]),t(`
`)])],-1)])),jsVersionHtml:s(()=>a[17]||(a[17]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("div")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-switch")]),t(`
      `),n("span",{class:"token attr-name"},":checked"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("theme === 'dark'"),n("span",{class:"token punctuation"},'"')]),t(`
      `),n("span",{class:"token attr-name"},"checked-children"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("Dark"),n("span",{class:"token punctuation"},'"')]),t(`
      `),n("span",{class:"token attr-name"},"un-checked-children"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("Light"),n("span",{class:"token punctuation"},'"')]),t(`
      `),n("span",{class:"token attr-name"},"@change"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("changeTheme"),n("span",{class:"token punctuation"},'"')]),t(`
    `),n("span",{class:"token punctuation"},"/>")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("br")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("br")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu")]),t(`
      `),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"width"),n("span",{class:"token punctuation"},":"),t(" 256px")]),n("span",{class:"token punctuation"},'"')])]),t(`
      `),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),t("openKeys")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("openKeys"),n("span",{class:"token punctuation"},'"')]),t(`
      `),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),t("selectedKeys")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("selectedKeys"),n("span",{class:"token punctuation"},'"')]),t(`
      `),n("span",{class:"token attr-name"},"mode"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("inline"),n("span",{class:"token punctuation"},'"')]),t(`
      `),n("span",{class:"token attr-name"},":theme"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("theme"),n("span",{class:"token punctuation"},'"')]),t(`
    `),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("1"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("MailOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        Navigation One
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("2"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("CalendarOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        Navigation Two
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-sub-menu")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("sub1"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("AppstoreOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#title"),n("span",{class:"token punctuation"},">")]),t("Navigation Three"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("3"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 3"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 4"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-sub-menu")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("sub1-2"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("Submenu"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("5"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 5"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("6"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 6"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-sub-menu")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-sub-menu")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-sub-menu")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("sub2"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("SettingOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#title"),n("span",{class:"token punctuation"},">")]),t("Navigation Four"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("7"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 7"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("8"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 8"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("9"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 9"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("10"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 10"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-sub-menu")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("div")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("script")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" defineComponent"),n("span",{class:"token punctuation"},","),t(" reactive"),n("span",{class:"token punctuation"},","),t(" toRefs "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(`
  MailOutlined`),n("span",{class:"token punctuation"},","),t(`
  CalendarOutlined`),n("span",{class:"token punctuation"},","),t(`
  AppstoreOutlined`),n("span",{class:"token punctuation"},","),t(`
  SettingOutlined`),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'@ant-design/icons-vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"export"),t(),n("span",{class:"token keyword"},"default"),t(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token punctuation"},"{"),t(`
    `),n("span",{class:"token keyword"},"const"),t(" state "),n("span",{class:"token operator"},"="),t(),n("span",{class:"token function"},"reactive"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
      `),n("span",{class:"token literal-property property"},"theme"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'dark'"),n("span",{class:"token punctuation"},","),t(`
      `),n("span",{class:"token literal-property property"},"selectedKeys"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"["),n("span",{class:"token string"},"'1'"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),t(`
      `),n("span",{class:"token literal-property property"},"openKeys"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"["),n("span",{class:"token string"},"'sub1'"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token keyword"},"const"),t(),n("span",{class:"token function-variable function"},"changeTheme"),t(),n("span",{class:"token operator"},"="),t(),n("span",{class:"token parameter"},"checked"),t(),n("span",{class:"token operator"},"=>"),t(),n("span",{class:"token punctuation"},"{"),t(`
      state`),n("span",{class:"token punctuation"},"."),t("theme "),n("span",{class:"token operator"},"="),t(" checked "),n("span",{class:"token operator"},"?"),t(),n("span",{class:"token string"},"'dark'"),t(),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'light'"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token keyword"},"return"),t(),n("span",{class:"token punctuation"},"{"),t(`
      `),n("span",{class:"token operator"},"..."),n("span",{class:"token function"},"toRefs"),n("span",{class:"token punctuation"},"("),t("state"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},","),t(`
      changeTheme`),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token literal-property property"},"components"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"{"),t(`
    MailOutlined`),n("span",{class:"token punctuation"},","),t(`
    CalendarOutlined`),n("span",{class:"token punctuation"},","),t(`
    AppstoreOutlined`),n("span",{class:"token punctuation"},","),t(`
    SettingOutlined`),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("script")]),n("span",{class:"token punctuation"},">")]),t(`
`)])],-1)])),_:1})}var Wn=Z(An,[["render",bn]]);const yn=v({setup(){const o=w({selectedKeys:[],openKeys:[]}),a=i=>{console.log("click ",i)};return{...P(o),handleClick:a}},components:{MailOutlined:h,CalendarOutlined:B,AppstoreOutlined:V,SettingOutlined:S}});function Zn(o,a,i,g,I,G){const m=p("MailOutlined"),l=p("a-menu-item"),c=p("CalendarOutlined"),C=p("AppstoreOutlined"),u=p("a-sub-menu"),r=p("SettingOutlined"),A=p("a-menu"),b=p("demo-box");return d(),W(b,{jsfiddle:{us:"Submenus open as pop-ups.",cn:"\u5B50\u83DC\u5355\u662F\u5F39\u51FA\u7684\u5F62\u5F0F\u3002",docHtml:`<h2 id="zh-cn">zh-CN</h2>
<p>\u5B50\u83DC\u5355\u662F\u5F39\u51FA\u7684\u5F62\u5F0F\u3002</p>
<h2 id="en-us">en-US</h2>
<p>Submenus open as pop-ups.</p>
`,order:3,title:{"zh-CN":"\u5782\u76F4\u83DC\u5355","en-US":"Vertical menu"},relativePath:"src/docs/menu/demo/vertical.vue",sourceCode:"PHRlbXBsYXRlPgogIDxhLW1lbnUKICAgIHYtbW9kZWw6b3BlbktleXM9Im9wZW5LZXlzIgogICAgdi1tb2RlbDpzZWxlY3RlZEtleXM9InNlbGVjdGVkS2V5cyIKICAgIHN0eWxlPSJ3aWR0aDogMjU2cHgiCiAgICBtb2RlPSJ2ZXJ0aWNhbCIKICAgIEBjbGljaz0iaGFuZGxlQ2xpY2siCiAgPgogICAgPGEtbWVudS1pdGVtIGtleT0iMSI+CiAgICAgIDx0ZW1wbGF0ZSAjaWNvbj4KICAgICAgICA8TWFpbE91dGxpbmVkIC8+CiAgICAgIDwvdGVtcGxhdGU+CiAgICAgIE5hdmlnYXRpb24gT25lCiAgICA8L2EtbWVudS1pdGVtPgogICAgPGEtbWVudS1pdGVtIGtleT0iMiI+CiAgICAgIDx0ZW1wbGF0ZSAjaWNvbj4KICAgICAgICA8Q2FsZW5kYXJPdXRsaW5lZCAvPgogICAgICA8L3RlbXBsYXRlPgogICAgICBOYXZpZ2F0aW9uIFR3bwogICAgPC9hLW1lbnUtaXRlbT4KICAgIDxhLXN1Yi1tZW51IGtleT0ic3ViMSI+CiAgICAgIDx0ZW1wbGF0ZSAjaWNvbj4KICAgICAgICA8QXBwc3RvcmVPdXRsaW5lZCAvPgogICAgICA8L3RlbXBsYXRlPgogICAgICA8dGVtcGxhdGUgI3RpdGxlPk5hdmlnYXRpb24gVGhyZWU8L3RlbXBsYXRlPgogICAgICA8YS1tZW51LWl0ZW0ga2V5PSIzIj5PcHRpb24gMzwvYS1tZW51LWl0ZW0+CiAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjQiPk9wdGlvbiA0PC9hLW1lbnUtaXRlbT4KICAgICAgPGEtc3ViLW1lbnUga2V5PSJzdWIxLTIiIHRpdGxlPSJTdWJtZW51Ij4KICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSI1Ij5PcHRpb24gNTwvYS1tZW51LWl0ZW0+CiAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iNiI+T3B0aW9uIDY8L2EtbWVudS1pdGVtPgogICAgICA8L2Etc3ViLW1lbnU+CiAgICA8L2Etc3ViLW1lbnU+CiAgICA8YS1zdWItbWVudSBrZXk9InN1YjIiPgogICAgICA8dGVtcGxhdGUgI2ljb24+CiAgICAgICAgPFNldHRpbmdPdXRsaW5lZCAvPgogICAgICA8L3RlbXBsYXRlPgogICAgICA8dGVtcGxhdGUgI3RpdGxlPk5hdmlnYXRpb24gRm91cjwvdGVtcGxhdGU+CiAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjciPk9wdGlvbiA3PC9hLW1lbnUtaXRlbT4KICAgICAgPGEtbWVudS1pdGVtIGtleT0iOCI+T3B0aW9uIDg8L2EtbWVudS1pdGVtPgogICAgICA8YS1tZW51LWl0ZW0ga2V5PSI5Ij5PcHRpb24gOTwvYS1tZW51LWl0ZW0+CiAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjEwIj5PcHRpb24gMTA8L2EtbWVudS1pdGVtPgogICAgPC9hLXN1Yi1tZW51PgogIDwvYS1tZW51Pgo8L3RlbXBsYXRlPgo8c2NyaXB0IGxhbmc9InRzIj4KaW1wb3J0IHsgZGVmaW5lQ29tcG9uZW50LCByZWFjdGl2ZSwgdG9SZWZzLCBWTm9kZUNoaWxkIH0gZnJvbSAndnVlJzsKaW1wb3J0IHsKICBNYWlsT3V0bGluZWQsCiAgQ2FsZW5kYXJPdXRsaW5lZCwKICBBcHBzdG9yZU91dGxpbmVkLAogIFNldHRpbmdPdXRsaW5lZCwKfSBmcm9tICdAYW50LWRlc2lnbi9pY29ucy12dWUnOwoKaW50ZXJmYWNlIE1lbnVJbmZvIHsKICBrZXk6IHN0cmluZzsKICBrZXlQYXRoOiBzdHJpbmdbXTsKICBpdGVtOiBWTm9kZUNoaWxkOwogIGRvbUV2ZW50OiBNb3VzZUV2ZW50Owp9CmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbXBvbmVudCh7CiAgc2V0dXAoKSB7CiAgICBjb25zdCBzdGF0ZSA9IHJlYWN0aXZlKHsKICAgICAgc2VsZWN0ZWRLZXlzOiBbXSwKICAgICAgb3BlbktleXM6IFtdLAogICAgfSk7CiAgICBjb25zdCBoYW5kbGVDbGljayA9IChlOiBNZW51SW5mbykgPT4gewogICAgICBjb25zb2xlLmxvZygnY2xpY2sgJywgZSk7CiAgICB9OwogICAgcmV0dXJuIHsKICAgICAgLi4udG9SZWZzKHN0YXRlKSwKICAgICAgaGFuZGxlQ2xpY2ssCiAgICB9OwogIH0sCiAgY29tcG9uZW50czogewogICAgTWFpbE91dGxpbmVkLAogICAgQ2FsZW5kYXJPdXRsaW5lZCwKICAgIEFwcHN0b3JlT3V0bGluZWQsCiAgICBTZXR0aW5nT3V0bGluZWQsCiAgfSwKfSk7Cjwvc2NyaXB0PgoK",jsSourceCode:"PHRlbXBsYXRlPgogIDxhLW1lbnUKICAgIHYtbW9kZWw6b3BlbktleXM9Im9wZW5LZXlzIgogICAgdi1tb2RlbDpzZWxlY3RlZEtleXM9InNlbGVjdGVkS2V5cyIKICAgIHN0eWxlPSJ3aWR0aDogMjU2cHgiCiAgICBtb2RlPSJ2ZXJ0aWNhbCIKICAgIEBjbGljaz0iaGFuZGxlQ2xpY2siCiAgPgogICAgPGEtbWVudS1pdGVtIGtleT0iMSI+CiAgICAgIDx0ZW1wbGF0ZSAjaWNvbj4KICAgICAgICA8TWFpbE91dGxpbmVkIC8+CiAgICAgIDwvdGVtcGxhdGU+CiAgICAgIE5hdmlnYXRpb24gT25lCiAgICA8L2EtbWVudS1pdGVtPgogICAgPGEtbWVudS1pdGVtIGtleT0iMiI+CiAgICAgIDx0ZW1wbGF0ZSAjaWNvbj4KICAgICAgICA8Q2FsZW5kYXJPdXRsaW5lZCAvPgogICAgICA8L3RlbXBsYXRlPgogICAgICBOYXZpZ2F0aW9uIFR3bwogICAgPC9hLW1lbnUtaXRlbT4KICAgIDxhLXN1Yi1tZW51IGtleT0ic3ViMSI+CiAgICAgIDx0ZW1wbGF0ZSAjaWNvbj4KICAgICAgICA8QXBwc3RvcmVPdXRsaW5lZCAvPgogICAgICA8L3RlbXBsYXRlPgogICAgICA8dGVtcGxhdGUgI3RpdGxlPk5hdmlnYXRpb24gVGhyZWU8L3RlbXBsYXRlPgogICAgICA8YS1tZW51LWl0ZW0ga2V5PSIzIj5PcHRpb24gMzwvYS1tZW51LWl0ZW0+CiAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjQiPk9wdGlvbiA0PC9hLW1lbnUtaXRlbT4KICAgICAgPGEtc3ViLW1lbnUga2V5PSJzdWIxLTIiIHRpdGxlPSJTdWJtZW51Ij4KICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSI1Ij5PcHRpb24gNTwvYS1tZW51LWl0ZW0+CiAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iNiI+T3B0aW9uIDY8L2EtbWVudS1pdGVtPgogICAgICA8L2Etc3ViLW1lbnU+CiAgICA8L2Etc3ViLW1lbnU+CiAgICA8YS1zdWItbWVudSBrZXk9InN1YjIiPgogICAgICA8dGVtcGxhdGUgI2ljb24+CiAgICAgICAgPFNldHRpbmdPdXRsaW5lZCAvPgogICAgICA8L3RlbXBsYXRlPgogICAgICA8dGVtcGxhdGUgI3RpdGxlPk5hdmlnYXRpb24gRm91cjwvdGVtcGxhdGU+CiAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjciPk9wdGlvbiA3PC9hLW1lbnUtaXRlbT4KICAgICAgPGEtbWVudS1pdGVtIGtleT0iOCI+T3B0aW9uIDg8L2EtbWVudS1pdGVtPgogICAgICA8YS1tZW51LWl0ZW0ga2V5PSI5Ij5PcHRpb24gOTwvYS1tZW51LWl0ZW0+CiAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjEwIj5PcHRpb24gMTA8L2EtbWVudS1pdGVtPgogICAgPC9hLXN1Yi1tZW51PgogIDwvYS1tZW51Pgo8L3RlbXBsYXRlPgo8c2NyaXB0PgppbXBvcnQgeyBkZWZpbmVDb21wb25lbnQsIHJlYWN0aXZlLCB0b1JlZnMgfSBmcm9tICd2dWUnOwppbXBvcnQgewogIE1haWxPdXRsaW5lZCwKICBDYWxlbmRhck91dGxpbmVkLAogIEFwcHN0b3JlT3V0bGluZWQsCiAgU2V0dGluZ091dGxpbmVkLAp9IGZyb20gJ0BhbnQtZGVzaWduL2ljb25zLXZ1ZSc7CmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbXBvbmVudCh7CiAgc2V0dXAoKSB7CiAgICBjb25zdCBzdGF0ZSA9IHJlYWN0aXZlKHsKICAgICAgc2VsZWN0ZWRLZXlzOiBbXSwKICAgICAgb3BlbktleXM6IFtdLAogICAgfSk7CiAgICBjb25zdCBoYW5kbGVDbGljayA9IGUgPT4gewogICAgICBjb25zb2xlLmxvZygnY2xpY2sgJywgZSk7CiAgICB9OwogICAgcmV0dXJuIHsKICAgICAgLi4udG9SZWZzKHN0YXRlKSwKICAgICAgaGFuZGxlQ2xpY2ssCiAgICB9OwogIH0sCiAgY29tcG9uZW50czogewogICAgTWFpbE91dGxpbmVkLAogICAgQ2FsZW5kYXJPdXRsaW5lZCwKICAgIEFwcHN0b3JlT3V0bGluZWQsCiAgICBTZXR0aW5nT3V0bGluZWQsCiAgfSwKfSk7Cjwvc2NyaXB0Pg=="}},{default:s(()=>[e(A,{openKeys:o.openKeys,"onUpdate:openKeys":a[0]||(a[0]=k=>o.openKeys=k),selectedKeys:o.selectedKeys,"onUpdate:selectedKeys":a[1]||(a[1]=k=>o.selectedKeys=k),style:{width:"256px"},mode:"vertical",onClick:o.handleClick},{default:s(()=>[e(l,{key:"1"},{icon:s(()=>[e(m)]),default:s(()=>[a[2]||(a[2]=t(" Navigation One "))]),_:1,__:[2]}),e(l,{key:"2"},{icon:s(()=>[e(c)]),default:s(()=>[a[3]||(a[3]=t(" Navigation Two "))]),_:1,__:[3]}),e(u,{key:"sub1"},{icon:s(()=>[e(C)]),title:s(()=>a[4]||(a[4]=[t("Navigation Three")])),default:s(()=>[e(l,{key:"3"},{default:s(()=>a[5]||(a[5]=[t("Option 3")])),_:1,__:[5]}),e(l,{key:"4"},{default:s(()=>a[6]||(a[6]=[t("Option 4")])),_:1,__:[6]}),e(u,{key:"sub1-2",title:"Submenu"},{default:s(()=>[e(l,{key:"5"},{default:s(()=>a[7]||(a[7]=[t("Option 5")])),_:1,__:[7]}),e(l,{key:"6"},{default:s(()=>a[8]||(a[8]=[t("Option 6")])),_:1,__:[8]})]),_:1})]),_:1}),e(u,{key:"sub2"},{icon:s(()=>[e(r)]),title:s(()=>a[9]||(a[9]=[t("Navigation Four")])),default:s(()=>[e(l,{key:"7"},{default:s(()=>a[10]||(a[10]=[t("Option 7")])),_:1,__:[10]}),e(l,{key:"8"},{default:s(()=>a[11]||(a[11]=[t("Option 8")])),_:1,__:[11]}),e(l,{key:"9"},{default:s(()=>a[12]||(a[12]=[t("Option 9")])),_:1,__:[12]}),e(l,{key:"10"},{default:s(()=>a[13]||(a[13]=[t("Option 10")])),_:1,__:[13]})]),_:1})]),_:1},8,["openKeys","selectedKeys","onClick"])]),htmlCode:s(()=>a[14]||(a[14]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu")]),t(`
    `),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),t("openKeys")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("openKeys"),n("span",{class:"token punctuation"},'"')]),t(`
    `),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),t("selectedKeys")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("selectedKeys"),n("span",{class:"token punctuation"},'"')]),t(`
    `),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"width"),n("span",{class:"token punctuation"},":"),t(" 256px")]),n("span",{class:"token punctuation"},'"')])]),t(`
    `),n("span",{class:"token attr-name"},"mode"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("vertical"),n("span",{class:"token punctuation"},'"')]),t(`
    `),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("handleClick"),n("span",{class:"token punctuation"},'"')]),t(`
  `),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("1"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("MailOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
      Navigation One
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("2"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("CalendarOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
      Navigation Two
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-sub-menu")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("sub1"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("AppstoreOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#title"),n("span",{class:"token punctuation"},">")]),t("Navigation Three"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("3"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 3"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 4"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-sub-menu")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("sub1-2"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("Submenu"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("5"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 5"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("6"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 6"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-sub-menu")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-sub-menu")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-sub-menu")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("sub2"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("SettingOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#title"),n("span",{class:"token punctuation"},">")]),t("Navigation Four"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("7"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 7"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("8"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 8"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("9"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 9"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("10"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 10"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-sub-menu")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("script")]),t(),n("span",{class:"token attr-name"},"lang"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("ts"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" defineComponent"),n("span",{class:"token punctuation"},","),t(" reactive"),n("span",{class:"token punctuation"},","),t(" toRefs"),n("span",{class:"token punctuation"},","),t(" VNodeChild "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(`
  MailOutlined`),n("span",{class:"token punctuation"},","),t(`
  CalendarOutlined`),n("span",{class:"token punctuation"},","),t(`
  AppstoreOutlined`),n("span",{class:"token punctuation"},","),t(`
  SettingOutlined`),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'@ant-design/icons-vue'"),n("span",{class:"token punctuation"},";"),t(`

`),n("span",{class:"token keyword"},"interface"),t(),n("span",{class:"token class-name"},"MenuInfo"),t(),n("span",{class:"token punctuation"},"{"),t(`
  `),n("span",{class:"token literal-property property"},"key"),n("span",{class:"token operator"},":"),t(" string"),n("span",{class:"token punctuation"},";"),t(`
  `),n("span",{class:"token literal-property property"},"keyPath"),n("span",{class:"token operator"},":"),t(" string"),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},";"),t(`
  `),n("span",{class:"token literal-property property"},"item"),n("span",{class:"token operator"},":"),t(" VNodeChild"),n("span",{class:"token punctuation"},";"),t(`
  `),n("span",{class:"token literal-property property"},"domEvent"),n("span",{class:"token operator"},":"),t(" MouseEvent"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token punctuation"},"}"),t(`
`),n("span",{class:"token keyword"},"export"),t(),n("span",{class:"token keyword"},"default"),t(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token punctuation"},"{"),t(`
    `),n("span",{class:"token keyword"},"const"),t(" state "),n("span",{class:"token operator"},"="),t(),n("span",{class:"token function"},"reactive"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
      `),n("span",{class:"token literal-property property"},"selectedKeys"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),t(`
      `),n("span",{class:"token literal-property property"},"openKeys"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token keyword"},"const"),t(),n("span",{class:"token function-variable function"},"handleClick"),t(),n("span",{class:"token operator"},"="),t(),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},[n("span",{class:"token literal-property property"},"e"),n("span",{class:"token operator"},":"),t(" MenuInfo")]),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token operator"},"=>"),t(),n("span",{class:"token punctuation"},"{"),t(`
      console`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"log"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'click '"),n("span",{class:"token punctuation"},","),t(" e"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token keyword"},"return"),t(),n("span",{class:"token punctuation"},"{"),t(`
      `),n("span",{class:"token operator"},"..."),n("span",{class:"token function"},"toRefs"),n("span",{class:"token punctuation"},"("),t("state"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},","),t(`
      handleClick`),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token literal-property property"},"components"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"{"),t(`
    MailOutlined`),n("span",{class:"token punctuation"},","),t(`
    CalendarOutlined`),n("span",{class:"token punctuation"},","),t(`
    AppstoreOutlined`),n("span",{class:"token punctuation"},","),t(`
    SettingOutlined`),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("script")]),n("span",{class:"token punctuation"},">")]),t(`
`)])],-1)])),jsVersionHtml:s(()=>a[15]||(a[15]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu")]),t(`
    `),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),t("openKeys")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("openKeys"),n("span",{class:"token punctuation"},'"')]),t(`
    `),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),t("selectedKeys")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("selectedKeys"),n("span",{class:"token punctuation"},'"')]),t(`
    `),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"width"),n("span",{class:"token punctuation"},":"),t(" 256px")]),n("span",{class:"token punctuation"},'"')])]),t(`
    `),n("span",{class:"token attr-name"},"mode"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("vertical"),n("span",{class:"token punctuation"},'"')]),t(`
    `),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("handleClick"),n("span",{class:"token punctuation"},'"')]),t(`
  `),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("1"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("MailOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
      Navigation One
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("2"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("CalendarOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
      Navigation Two
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-sub-menu")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("sub1"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("AppstoreOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#title"),n("span",{class:"token punctuation"},">")]),t("Navigation Three"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("3"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 3"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 4"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-sub-menu")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("sub1-2"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("Submenu"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("5"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 5"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("6"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 6"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-sub-menu")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-sub-menu")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-sub-menu")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("sub2"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("SettingOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#title"),n("span",{class:"token punctuation"},">")]),t("Navigation Four"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("7"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 7"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("8"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 8"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("9"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 9"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("10"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 10"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-sub-menu")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("script")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" defineComponent"),n("span",{class:"token punctuation"},","),t(" reactive"),n("span",{class:"token punctuation"},","),t(" toRefs "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(`
  MailOutlined`),n("span",{class:"token punctuation"},","),t(`
  CalendarOutlined`),n("span",{class:"token punctuation"},","),t(`
  AppstoreOutlined`),n("span",{class:"token punctuation"},","),t(`
  SettingOutlined`),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'@ant-design/icons-vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"export"),t(),n("span",{class:"token keyword"},"default"),t(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token punctuation"},"{"),t(`
    `),n("span",{class:"token keyword"},"const"),t(" state "),n("span",{class:"token operator"},"="),t(),n("span",{class:"token function"},"reactive"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
      `),n("span",{class:"token literal-property property"},"selectedKeys"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),t(`
      `),n("span",{class:"token literal-property property"},"openKeys"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token keyword"},"const"),t(),n("span",{class:"token function-variable function"},"handleClick"),t(),n("span",{class:"token operator"},"="),t(),n("span",{class:"token parameter"},"e"),t(),n("span",{class:"token operator"},"=>"),t(),n("span",{class:"token punctuation"},"{"),t(`
      console`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"log"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'click '"),n("span",{class:"token punctuation"},","),t(" e"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token keyword"},"return"),t(),n("span",{class:"token punctuation"},"{"),t(`
      `),n("span",{class:"token operator"},"..."),n("span",{class:"token function"},"toRefs"),n("span",{class:"token punctuation"},"("),t("state"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},","),t(`
      handleClick`),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token literal-property property"},"components"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"{"),t(`
    MailOutlined`),n("span",{class:"token punctuation"},","),t(`
    CalendarOutlined`),n("span",{class:"token punctuation"},","),t(`
    AppstoreOutlined`),n("span",{class:"token punctuation"},","),t(`
    SettingOutlined`),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("script")]),n("span",{class:"token punctuation"},">")]),t(`
`)])],-1)])),_:1})}var Gn=Z(yn,[["render",Zn]]);const vn={name:"SubMenu",props:{menuInfo:{type:Object,default:()=>({})}},template:`
    <a-sub-menu :key="menuInfo.key">
      <template #icon><MailOutlined /></template>
      <template #title>{{ menuInfo.title }}</template>
      <template v-for="item in menuInfo.children" :key="item.key">
        <template v-if="!item.children">
          <a-menu-item :key="item.key">
            <template #icon>
              <PieChartOutlined />
            </template>
            {{ item.title }}
          </a-menu-item>
        </template>
        <template v-else>
          <sub-menu :menu-info="item" :key="item.key" />
        </template>
      </template>
    </a-sub-menu>
  `,components:{PieChartOutlined:f,MailOutlined:h}},hn=[{key:"1",title:"Option 1"},{key:"2",title:"Navigation 2",children:[{key:"2.1",title:"Navigation 3",children:[{key:"2.1.1",title:"Option 2.1.1"}]}]}],Vn=v({setup(){const o=R(!1);return{list:hn,collapsed:o,toggleCollapsed:()=>{o.value=!o.value}}},components:{"sub-menu":vn,MenuFoldOutlined:T,MenuUnfoldOutlined:x,PieChartOutlined:f}}),Sn={style:{width:"256px"}};function wn(o,a,i,g,I,G){const m=p("MenuUnfoldOutlined"),l=p("MenuFoldOutlined"),c=p("a-button"),C=p("PieChartOutlined"),u=p("a-menu-item"),r=p("sub-menu"),A=p("a-menu"),b=p("demo-box");return d(),W(b,{jsfiddle:{us:"Use the single file method to recursively generate menus.",cn:"\u4F7F\u7528\u5355\u6587\u4EF6\u65B9\u5F0F\u9012\u5F52\u751F\u6210\u83DC\u5355\u3002",docHtml:`<h2 id="zh-cn">zh-CN</h2>
<p>\u4F7F\u7528\u5355\u6587\u4EF6\u65B9\u5F0F\u9012\u5F52\u751F\u6210\u83DC\u5355\u3002</p>
<h2 id="en-us">en-US</h2>
<p>Use the single file method to recursively generate menus.</p>
`,order:99,title:{"zh-CN":"\u5355\u6587\u4EF6\u9012\u5F52\u83DC\u5355","en-US":"Single file recursive menu"},relativePath:"src/docs/menu/demo/template.vue",sourceCode:"PHRlbXBsYXRlPgogIDxkaXYgc3R5bGU9IndpZHRoOiAyNTZweCI+CiAgICA8YS1idXR0b24gdHlwZT0icHJpbWFyeSIgQGNsaWNrPSJ0b2dnbGVDb2xsYXBzZWQiIHN0eWxlPSJtYXJnaW4tYm90dG9tOiAxNnB4Ij4KICAgICAgPE1lbnVVbmZvbGRPdXRsaW5lZCB2LWlmPSJjb2xsYXBzZWQiIC8+CiAgICAgIDxNZW51Rm9sZE91dGxpbmVkIHYtZWxzZSAvPgogICAgPC9hLWJ1dHRvbj4KICAgIDxhLW1lbnUKICAgICAgOmRlZmF1bHQtc2VsZWN0ZWQta2V5cz0iWycxJ10iCiAgICAgIDpkZWZhdWx0LW9wZW4ta2V5cz0iWycyJ10iCiAgICAgIG1vZGU9ImlubGluZSIKICAgICAgdGhlbWU9ImRhcmsiCiAgICAgIDppbmxpbmUtY29sbGFwc2VkPSJjb2xsYXBzZWQiCiAgICA+CiAgICAgIDx0ZW1wbGF0ZSB2LWZvcj0iaXRlbSBpbiBsaXN0IiA6a2V5PSJpdGVtLmtleSI+CiAgICAgICAgPHRlbXBsYXRlIHYtaWY9IiFpdGVtLmNoaWxkcmVuIj4KICAgICAgICAgIDxhLW1lbnUtaXRlbSA6a2V5PSJpdGVtLmtleSI+CiAgICAgICAgICAgIDx0ZW1wbGF0ZSAjaWNvbj4KICAgICAgICAgICAgICA8UGllQ2hhcnRPdXRsaW5lZCAvPgogICAgICAgICAgICA8L3RlbXBsYXRlPgogICAgICAgICAgICB7eyBpdGVtLnRpdGxlIH19CiAgICAgICAgICA8L2EtbWVudS1pdGVtPgogICAgICAgIDwvdGVtcGxhdGU+CiAgICAgICAgPHRlbXBsYXRlIHYtZWxzZT4KICAgICAgICAgIDxzdWItbWVudSA6bWVudS1pbmZvPSJpdGVtIiA6a2V5PSJpdGVtLmtleSIgLz4KICAgICAgICA8L3RlbXBsYXRlPgogICAgICA8L3RlbXBsYXRlPgogICAgPC9hLW1lbnU+CiAgPC9kaXY+CjwvdGVtcGxhdGU+CjxzY3JpcHQgbGFuZz0idHMiPgppbXBvcnQgeyBkZWZpbmVDb21wb25lbnQsIHJlZiB9IGZyb20gJ3Z1ZSc7CmltcG9ydCB7CiAgTWVudUZvbGRPdXRsaW5lZCwKICBNZW51VW5mb2xkT3V0bGluZWQsCiAgUGllQ2hhcnRPdXRsaW5lZCwKICBNYWlsT3V0bGluZWQsCn0gZnJvbSAnQGFudC1kZXNpZ24vaWNvbnMtdnVlJzsKCi8vIHlvdSBjYW4gcmV3cml0ZSBpdCB0byBhIHNpbmdsZSBmaWxlIGNvbXBvbmVudCwgaWYgbm90LCB5b3Ugc2hvdWxkIGNvbmZpZyB2dWUgYWxpYXMgdG8gdnVlL2Rpc3QvdnVlLmVzbS1idW5kbGVyLmpzCmNvbnN0IFN1Yk1lbnUgPSB7CiAgbmFtZTogJ1N1Yk1lbnUnLAogIHByb3BzOiB7CiAgICBtZW51SW5mbzogewogICAgICB0eXBlOiBPYmplY3QsCiAgICAgIGRlZmF1bHQ6ICgpID0+ICh7fSksCiAgICB9LAogIH0sCiAgdGVtcGxhdGU6IGAKICAgIDxhLXN1Yi1tZW51IDprZXk9Im1lbnVJbmZvLmtleSI+CiAgICAgIDx0ZW1wbGF0ZSAjaWNvbj48TWFpbE91dGxpbmVkIC8+PC90ZW1wbGF0ZT4KICAgICAgPHRlbXBsYXRlICN0aXRsZT57eyBtZW51SW5mby50aXRsZSB9fTwvdGVtcGxhdGU+CiAgICAgIDx0ZW1wbGF0ZSB2LWZvcj0iaXRlbSBpbiBtZW51SW5mby5jaGlsZHJlbiIgOmtleT0iaXRlbS5rZXkiPgogICAgICAgIDx0ZW1wbGF0ZSB2LWlmPSIhaXRlbS5jaGlsZHJlbiI+CiAgICAgICAgICA8YS1tZW51LWl0ZW0gOmtleT0iaXRlbS5rZXkiPgogICAgICAgICAgICA8dGVtcGxhdGUgI2ljb24+CiAgICAgICAgICAgICAgPFBpZUNoYXJ0T3V0bGluZWQgLz4KICAgICAgICAgICAgPC90ZW1wbGF0ZT4KICAgICAgICAgICAge3sgaXRlbS50aXRsZSB9fQogICAgICAgICAgPC9hLW1lbnUtaXRlbT4KICAgICAgICA8L3RlbXBsYXRlPgogICAgICAgIDx0ZW1wbGF0ZSB2LWVsc2U+CiAgICAgICAgICA8c3ViLW1lbnUgOm1lbnUtaW5mbz0iaXRlbSIgOmtleT0iaXRlbS5rZXkiIC8+CiAgICAgICAgPC90ZW1wbGF0ZT4KICAgICAgPC90ZW1wbGF0ZT4KICAgIDwvYS1zdWItbWVudT4KICBgLAogIGNvbXBvbmVudHM6IHsKICAgIFBpZUNoYXJ0T3V0bGluZWQsCiAgICBNYWlsT3V0bGluZWQsCiAgfSwKfTsKY29uc3QgbGlzdCA9IFsKICB7CiAgICBrZXk6ICcxJywKICAgIHRpdGxlOiAnT3B0aW9uIDEnLAogIH0sCiAgewogICAga2V5OiAnMicsCiAgICB0aXRsZTogJ05hdmlnYXRpb24gMicsCiAgICBjaGlsZHJlbjogWwogICAgICB7CiAgICAgICAga2V5OiAnMi4xJywKICAgICAgICB0aXRsZTogJ05hdmlnYXRpb24gMycsCiAgICAgICAgY2hpbGRyZW46IFt7IGtleTogJzIuMS4xJywgdGl0bGU6ICdPcHRpb24gMi4xLjEnIH1dLAogICAgICB9LAogICAgXSwKICB9LApdOwpleHBvcnQgZGVmYXVsdCBkZWZpbmVDb21wb25lbnQoewogIHNldHVwKCkgewogICAgY29uc3QgY29sbGFwc2VkID0gcmVmPGJvb2xlYW4+KGZhbHNlKTsKCiAgICBjb25zdCB0b2dnbGVDb2xsYXBzZWQgPSAoKSA9PiB7CiAgICAgIGNvbGxhcHNlZC52YWx1ZSA9ICFjb2xsYXBzZWQudmFsdWU7CiAgICB9OwogICAgcmV0dXJuIHsKICAgICAgbGlzdCwKICAgICAgY29sbGFwc2VkLAogICAgICB0b2dnbGVDb2xsYXBzZWQsCiAgICB9OwogIH0sCiAgY29tcG9uZW50czogewogICAgJ3N1Yi1tZW51JzogU3ViTWVudSwKICAgIE1lbnVGb2xkT3V0bGluZWQsCiAgICBNZW51VW5mb2xkT3V0bGluZWQsCiAgICBQaWVDaGFydE91dGxpbmVkLAogIH0sCn0pOwo8L3NjcmlwdD4KCg==",jsSourceCode:"PHRlbXBsYXRlPgogIDxkaXYgc3R5bGU9IndpZHRoOiAyNTZweCI+CiAgICA8YS1idXR0b24gdHlwZT0icHJpbWFyeSIgQGNsaWNrPSJ0b2dnbGVDb2xsYXBzZWQiIHN0eWxlPSJtYXJnaW4tYm90dG9tOiAxNnB4Ij4KICAgICAgPE1lbnVVbmZvbGRPdXRsaW5lZCB2LWlmPSJjb2xsYXBzZWQiIC8+CiAgICAgIDxNZW51Rm9sZE91dGxpbmVkIHYtZWxzZSAvPgogICAgPC9hLWJ1dHRvbj4KICAgIDxhLW1lbnUKICAgICAgOmRlZmF1bHQtc2VsZWN0ZWQta2V5cz0iWycxJ10iCiAgICAgIDpkZWZhdWx0LW9wZW4ta2V5cz0iWycyJ10iCiAgICAgIG1vZGU9ImlubGluZSIKICAgICAgdGhlbWU9ImRhcmsiCiAgICAgIDppbmxpbmUtY29sbGFwc2VkPSJjb2xsYXBzZWQiCiAgICA+CiAgICAgIDx0ZW1wbGF0ZSB2LWZvcj0iaXRlbSBpbiBsaXN0IiA6a2V5PSJpdGVtLmtleSI+CiAgICAgICAgPHRlbXBsYXRlIHYtaWY9IiFpdGVtLmNoaWxkcmVuIj4KICAgICAgICAgIDxhLW1lbnUtaXRlbSA6a2V5PSJpdGVtLmtleSI+CiAgICAgICAgICAgIDx0ZW1wbGF0ZSAjaWNvbj4KICAgICAgICAgICAgICA8UGllQ2hhcnRPdXRsaW5lZCAvPgogICAgICAgICAgICA8L3RlbXBsYXRlPgogICAgICAgICAgICB7eyBpdGVtLnRpdGxlIH19CiAgICAgICAgICA8L2EtbWVudS1pdGVtPgogICAgICAgIDwvdGVtcGxhdGU+CiAgICAgICAgPHRlbXBsYXRlIHYtZWxzZT4KICAgICAgICAgIDxzdWItbWVudSA6bWVudS1pbmZvPSJpdGVtIiA6a2V5PSJpdGVtLmtleSIgLz4KICAgICAgICA8L3RlbXBsYXRlPgogICAgICA8L3RlbXBsYXRlPgogICAgPC9hLW1lbnU+CiAgPC9kaXY+CjwvdGVtcGxhdGU+CjxzY3JpcHQ+CmltcG9ydCB7IGRlZmluZUNvbXBvbmVudCwgcmVmIH0gZnJvbSAndnVlJzsKaW1wb3J0IHsKICBNZW51Rm9sZE91dGxpbmVkLAogIE1lbnVVbmZvbGRPdXRsaW5lZCwKICBQaWVDaGFydE91dGxpbmVkLAogIE1haWxPdXRsaW5lZCwKfSBmcm9tICdAYW50LWRlc2lnbi9pY29ucy12dWUnOwoKLy8geW91IGNhbiByZXdyaXRlIGl0IHRvIGEgc2luZ2xlIGZpbGUgY29tcG9uZW50LCBpZiBub3QsIHlvdSBzaG91bGQgY29uZmlnIHZ1ZSBhbGlhcyB0byB2dWUvZGlzdC92dWUuZXNtLWJ1bmRsZXIuanMKY29uc3QgU3ViTWVudSA9IHsKICBuYW1lOiAnU3ViTWVudScsCiAgcHJvcHM6IHsKICAgIG1lbnVJbmZvOiB7CiAgICAgIHR5cGU6IE9iamVjdCwKICAgICAgZGVmYXVsdDogKCkgPT4gKHt9KSwKICAgIH0sCiAgfSwKICB0ZW1wbGF0ZTogYAogICAgPGEtc3ViLW1lbnUgOmtleT0ibWVudUluZm8ua2V5Ij4KICAgICAgPHRlbXBsYXRlICNpY29uPjxNYWlsT3V0bGluZWQgLz48L3RlbXBsYXRlPgogICAgICA8dGVtcGxhdGUgI3RpdGxlPnt7IG1lbnVJbmZvLnRpdGxlIH19PC90ZW1wbGF0ZT4KICAgICAgPHRlbXBsYXRlIHYtZm9yPSJpdGVtIGluIG1lbnVJbmZvLmNoaWxkcmVuIiA6a2V5PSJpdGVtLmtleSI+CiAgICAgICAgPHRlbXBsYXRlIHYtaWY9IiFpdGVtLmNoaWxkcmVuIj4KICAgICAgICAgIDxhLW1lbnUtaXRlbSA6a2V5PSJpdGVtLmtleSI+CiAgICAgICAgICAgIDx0ZW1wbGF0ZSAjaWNvbj4KICAgICAgICAgICAgICA8UGllQ2hhcnRPdXRsaW5lZCAvPgogICAgICAgICAgICA8L3RlbXBsYXRlPgogICAgICAgICAgICB7eyBpdGVtLnRpdGxlIH19CiAgICAgICAgICA8L2EtbWVudS1pdGVtPgogICAgICAgIDwvdGVtcGxhdGU+CiAgICAgICAgPHRlbXBsYXRlIHYtZWxzZT4KICAgICAgICAgIDxzdWItbWVudSA6bWVudS1pbmZvPSJpdGVtIiA6a2V5PSJpdGVtLmtleSIgLz4KICAgICAgICA8L3RlbXBsYXRlPgogICAgICA8L3RlbXBsYXRlPgogICAgPC9hLXN1Yi1tZW51PgogIGAsCiAgY29tcG9uZW50czogewogICAgUGllQ2hhcnRPdXRsaW5lZCwKICAgIE1haWxPdXRsaW5lZCwKICB9LAp9Owpjb25zdCBsaXN0ID0gWwogIHsKICAgIGtleTogJzEnLAogICAgdGl0bGU6ICdPcHRpb24gMScsCiAgfSwKICB7CiAgICBrZXk6ICcyJywKICAgIHRpdGxlOiAnTmF2aWdhdGlvbiAyJywKICAgIGNoaWxkcmVuOiBbCiAgICAgIHsKICAgICAgICBrZXk6ICcyLjEnLAogICAgICAgIHRpdGxlOiAnTmF2aWdhdGlvbiAzJywKICAgICAgICBjaGlsZHJlbjogWwogICAgICAgICAgewogICAgICAgICAgICBrZXk6ICcyLjEuMScsCiAgICAgICAgICAgIHRpdGxlOiAnT3B0aW9uIDIuMS4xJywKICAgICAgICAgIH0sCiAgICAgICAgXSwKICAgICAgfSwKICAgIF0sCiAgfSwKXTsKZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29tcG9uZW50KHsKICBzZXR1cCgpIHsKICAgIGNvbnN0IGNvbGxhcHNlZCA9IHJlZihmYWxzZSk7CiAgICBjb25zdCB0b2dnbGVDb2xsYXBzZWQgPSAoKSA9PiB7CiAgICAgIGNvbGxhcHNlZC52YWx1ZSA9ICFjb2xsYXBzZWQudmFsdWU7CiAgICB9OwogICAgcmV0dXJuIHsKICAgICAgbGlzdCwKICAgICAgY29sbGFwc2VkLAogICAgICB0b2dnbGVDb2xsYXBzZWQsCiAgICB9OwogIH0sCiAgY29tcG9uZW50czogewogICAgJ3N1Yi1tZW51JzogU3ViTWVudSwKICAgIE1lbnVGb2xkT3V0bGluZWQsCiAgICBNZW51VW5mb2xkT3V0bGluZWQsCiAgICBQaWVDaGFydE91dGxpbmVkLAogIH0sCn0pOwo8L3NjcmlwdD4="}},{default:s(()=>[n("div",Sn,[e(c,{type:"primary",onClick:o.toggleCollapsed,style:{"margin-bottom":"16px"}},{default:s(()=>[o.collapsed?(d(),W(m,{key:0})):(d(),W(l,{key:1}))]),_:1},8,["onClick"]),e(A,{"default-selected-keys":["1"],"default-open-keys":["2"],mode:"inline",theme:"dark","inline-collapsed":o.collapsed},{default:s(()=>[(d(!0),X(O,null,U(o.list,k=>(d(),X(O,{key:k.key},[k.children?(d(),W(r,{"menu-info":k,key:k.key},null,8,["menu-info"])):(d(),W(u,{key:k.key},{icon:s(()=>[e(C)]),default:s(()=>[t(" "+H(k.title),1)]),_:2},1024))],64))),128))]),_:1},8,["inline-collapsed"])])]),htmlCode:s(()=>a[0]||(a[0]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("div")]),t(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"width"),n("span",{class:"token punctuation"},":"),t(" 256px")]),n("span",{class:"token punctuation"},'"')])]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-button")]),t(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("primary"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("toggleCollapsed"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"margin-bottom"),n("span",{class:"token punctuation"},":"),t(" 16px")]),n("span",{class:"token punctuation"},'"')])]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("MenuUnfoldOutlined")]),t(),n("span",{class:"token attr-name"},"v-if"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("collapsed"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("MenuFoldOutlined")]),t(),n("span",{class:"token attr-name"},"v-else"),t(),n("span",{class:"token punctuation"},"/>")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-button")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu")]),t(`
      `),n("span",{class:"token attr-name"},":default-selected-keys"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("['1']"),n("span",{class:"token punctuation"},'"')]),t(`
      `),n("span",{class:"token attr-name"},":default-open-keys"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("['2']"),n("span",{class:"token punctuation"},'"')]),t(`
      `),n("span",{class:"token attr-name"},"mode"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("inline"),n("span",{class:"token punctuation"},'"')]),t(`
      `),n("span",{class:"token attr-name"},"theme"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("dark"),n("span",{class:"token punctuation"},'"')]),t(`
      `),n("span",{class:"token attr-name"},":inline-collapsed"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("collapsed"),n("span",{class:"token punctuation"},'"')]),t(`
    `),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"v-for"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("item in list"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},":key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("item.key"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"v-if"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("!item.children"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},":key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("item.key"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
            `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
              `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("PieChartOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
            `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
            {{ item.title }}
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"v-else"),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("sub-menu")]),t(),n("span",{class:"token attr-name"},":menu-info"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("item"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},":key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("item.key"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("div")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("script")]),t(),n("span",{class:"token attr-name"},"lang"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("ts"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" defineComponent"),n("span",{class:"token punctuation"},","),t(" ref "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(`
  MenuFoldOutlined`),n("span",{class:"token punctuation"},","),t(`
  MenuUnfoldOutlined`),n("span",{class:"token punctuation"},","),t(`
  PieChartOutlined`),n("span",{class:"token punctuation"},","),t(`
  MailOutlined`),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'@ant-design/icons-vue'"),n("span",{class:"token punctuation"},";"),t(`

`),n("span",{class:"token comment"},"// you can rewrite it to a single file component, if not, you should config vue alias to vue/dist/vue.esm-bundler.js"),t(`
`),n("span",{class:"token keyword"},"const"),t(" SubMenu "),n("span",{class:"token operator"},"="),t(),n("span",{class:"token punctuation"},"{"),t(`
  `),n("span",{class:"token literal-property property"},"name"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'SubMenu'"),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token literal-property property"},"props"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"{"),t(`
    `),n("span",{class:"token literal-property property"},"menuInfo"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"{"),t(`
      `),n("span",{class:"token literal-property property"},"type"),n("span",{class:"token operator"},":"),t(" Object"),n("span",{class:"token punctuation"},","),t(`
      `),n("span",{class:"token function-variable function"},"default"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token operator"},"=>"),t(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token literal-property property"},"template"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token template-string"},[n("span",{class:"token template-punctuation string"},"`"),n("span",{class:"token string"},`
    <a-sub-menu :key="menuInfo.key">
      <template #icon><MailOutlined /></template>
      <template #title>{{ menuInfo.title }}</template>
      <template v-for="item in menuInfo.children" :key="item.key">
        <template v-if="!item.children">
          <a-menu-item :key="item.key">
            <template #icon>
              <PieChartOutlined />
            </template>
            {{ item.title }}
          </a-menu-item>
        </template>
        <template v-else>
          <sub-menu :menu-info="item" :key="item.key" />
        </template>
      </template>
    </a-sub-menu>
  `),n("span",{class:"token template-punctuation string"},"`")]),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token literal-property property"},"components"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"{"),t(`
    PieChartOutlined`),n("span",{class:"token punctuation"},","),t(`
    MailOutlined`),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"const"),t(" list "),n("span",{class:"token operator"},"="),t(),n("span",{class:"token punctuation"},"["),t(`
  `),n("span",{class:"token punctuation"},"{"),t(`
    `),n("span",{class:"token literal-property property"},"key"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'1'"),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token literal-property property"},"title"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'Option 1'"),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token punctuation"},"{"),t(`
    `),n("span",{class:"token literal-property property"},"key"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'2'"),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token literal-property property"},"title"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'Navigation 2'"),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token literal-property property"},"children"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"["),t(`
      `),n("span",{class:"token punctuation"},"{"),t(`
        `),n("span",{class:"token literal-property property"},"key"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'2.1'"),n("span",{class:"token punctuation"},","),t(`
        `),n("span",{class:"token literal-property property"},"title"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'Navigation 3'"),n("span",{class:"token punctuation"},","),t(`
        `),n("span",{class:"token literal-property property"},"children"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"{"),t(),n("span",{class:"token literal-property property"},"key"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'2.1.1'"),n("span",{class:"token punctuation"},","),t(),n("span",{class:"token literal-property property"},"title"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'Option 2.1.1'"),t(),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),t(`
      `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"export"),t(),n("span",{class:"token keyword"},"default"),t(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token punctuation"},"{"),t(`
    `),n("span",{class:"token keyword"},"const"),t(" collapsed "),n("span",{class:"token operator"},"="),t(" ref"),n("span",{class:"token operator"},"<"),t("boolean"),n("span",{class:"token operator"},">"),n("span",{class:"token punctuation"},"("),n("span",{class:"token boolean"},"false"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`

    `),n("span",{class:"token keyword"},"const"),t(),n("span",{class:"token function-variable function"},"toggleCollapsed"),t(),n("span",{class:"token operator"},"="),t(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token operator"},"=>"),t(),n("span",{class:"token punctuation"},"{"),t(`
      collapsed`),n("span",{class:"token punctuation"},"."),t("value "),n("span",{class:"token operator"},"="),t(),n("span",{class:"token operator"},"!"),t("collapsed"),n("span",{class:"token punctuation"},"."),t("value"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token keyword"},"return"),t(),n("span",{class:"token punctuation"},"{"),t(`
      list`),n("span",{class:"token punctuation"},","),t(`
      collapsed`),n("span",{class:"token punctuation"},","),t(`
      toggleCollapsed`),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token literal-property property"},"components"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"{"),t(`
    `),n("span",{class:"token string-property property"},"'sub-menu'"),n("span",{class:"token operator"},":"),t(" SubMenu"),n("span",{class:"token punctuation"},","),t(`
    MenuFoldOutlined`),n("span",{class:"token punctuation"},","),t(`
    MenuUnfoldOutlined`),n("span",{class:"token punctuation"},","),t(`
    PieChartOutlined`),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("script")]),n("span",{class:"token punctuation"},">")]),t(`
`)])],-1)])),jsVersionHtml:s(()=>a[1]||(a[1]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("div")]),t(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"width"),n("span",{class:"token punctuation"},":"),t(" 256px")]),n("span",{class:"token punctuation"},'"')])]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-button")]),t(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("primary"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("toggleCollapsed"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"margin-bottom"),n("span",{class:"token punctuation"},":"),t(" 16px")]),n("span",{class:"token punctuation"},'"')])]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("MenuUnfoldOutlined")]),t(),n("span",{class:"token attr-name"},"v-if"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("collapsed"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("MenuFoldOutlined")]),t(),n("span",{class:"token attr-name"},"v-else"),t(),n("span",{class:"token punctuation"},"/>")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-button")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu")]),t(`
      `),n("span",{class:"token attr-name"},":default-selected-keys"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("['1']"),n("span",{class:"token punctuation"},'"')]),t(`
      `),n("span",{class:"token attr-name"},":default-open-keys"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("['2']"),n("span",{class:"token punctuation"},'"')]),t(`
      `),n("span",{class:"token attr-name"},"mode"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("inline"),n("span",{class:"token punctuation"},'"')]),t(`
      `),n("span",{class:"token attr-name"},"theme"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("dark"),n("span",{class:"token punctuation"},'"')]),t(`
      `),n("span",{class:"token attr-name"},":inline-collapsed"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("collapsed"),n("span",{class:"token punctuation"},'"')]),t(`
    `),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"v-for"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("item in list"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},":key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("item.key"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"v-if"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("!item.children"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},":key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("item.key"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
            `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
              `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("PieChartOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
            `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
            {{ item.title }}
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"v-else"),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("sub-menu")]),t(),n("span",{class:"token attr-name"},":menu-info"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("item"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},":key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("item.key"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("div")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("script")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" defineComponent"),n("span",{class:"token punctuation"},","),t(" ref "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(`
  MenuFoldOutlined`),n("span",{class:"token punctuation"},","),t(`
  MenuUnfoldOutlined`),n("span",{class:"token punctuation"},","),t(`
  PieChartOutlined`),n("span",{class:"token punctuation"},","),t(`
  MailOutlined`),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'@ant-design/icons-vue'"),n("span",{class:"token punctuation"},";"),t(`

`),n("span",{class:"token comment"},"// you can rewrite it to a single file component, if not, you should config vue alias to vue/dist/vue.esm-bundler.js"),t(`
`),n("span",{class:"token keyword"},"const"),t(" SubMenu "),n("span",{class:"token operator"},"="),t(),n("span",{class:"token punctuation"},"{"),t(`
  `),n("span",{class:"token literal-property property"},"name"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'SubMenu'"),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token literal-property property"},"props"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"{"),t(`
    `),n("span",{class:"token literal-property property"},"menuInfo"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"{"),t(`
      `),n("span",{class:"token literal-property property"},"type"),n("span",{class:"token operator"},":"),t(" Object"),n("span",{class:"token punctuation"},","),t(`
      `),n("span",{class:"token function-variable function"},"default"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token operator"},"=>"),t(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token literal-property property"},"template"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token template-string"},[n("span",{class:"token template-punctuation string"},"`"),n("span",{class:"token string"},`
    <a-sub-menu :key="menuInfo.key">
      <template #icon><MailOutlined /></template>
      <template #title>{{ menuInfo.title }}</template>
      <template v-for="item in menuInfo.children" :key="item.key">
        <template v-if="!item.children">
          <a-menu-item :key="item.key">
            <template #icon>
              <PieChartOutlined />
            </template>
            {{ item.title }}
          </a-menu-item>
        </template>
        <template v-else>
          <sub-menu :menu-info="item" :key="item.key" />
        </template>
      </template>
    </a-sub-menu>
  `),n("span",{class:"token template-punctuation string"},"`")]),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token literal-property property"},"components"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"{"),t(`
    PieChartOutlined`),n("span",{class:"token punctuation"},","),t(`
    MailOutlined`),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"const"),t(" list "),n("span",{class:"token operator"},"="),t(),n("span",{class:"token punctuation"},"["),t(`
  `),n("span",{class:"token punctuation"},"{"),t(`
    `),n("span",{class:"token literal-property property"},"key"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'1'"),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token literal-property property"},"title"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'Option 1'"),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token punctuation"},"{"),t(`
    `),n("span",{class:"token literal-property property"},"key"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'2'"),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token literal-property property"},"title"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'Navigation 2'"),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token literal-property property"},"children"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"["),t(`
      `),n("span",{class:"token punctuation"},"{"),t(`
        `),n("span",{class:"token literal-property property"},"key"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'2.1'"),n("span",{class:"token punctuation"},","),t(`
        `),n("span",{class:"token literal-property property"},"title"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'Navigation 3'"),n("span",{class:"token punctuation"},","),t(`
        `),n("span",{class:"token literal-property property"},"children"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"["),t(`
          `),n("span",{class:"token punctuation"},"{"),t(`
            `),n("span",{class:"token literal-property property"},"key"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'2.1.1'"),n("span",{class:"token punctuation"},","),t(`
            `),n("span",{class:"token literal-property property"},"title"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'Option 2.1.1'"),n("span",{class:"token punctuation"},","),t(`
          `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
        `),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),t(`
      `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"export"),t(),n("span",{class:"token keyword"},"default"),t(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token punctuation"},"{"),t(`
    `),n("span",{class:"token keyword"},"const"),t(" collapsed "),n("span",{class:"token operator"},"="),t(),n("span",{class:"token function"},"ref"),n("span",{class:"token punctuation"},"("),n("span",{class:"token boolean"},"false"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token keyword"},"const"),t(),n("span",{class:"token function-variable function"},"toggleCollapsed"),t(),n("span",{class:"token operator"},"="),t(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token operator"},"=>"),t(),n("span",{class:"token punctuation"},"{"),t(`
      collapsed`),n("span",{class:"token punctuation"},"."),t("value "),n("span",{class:"token operator"},"="),t(),n("span",{class:"token operator"},"!"),t("collapsed"),n("span",{class:"token punctuation"},"."),t("value"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token keyword"},"return"),t(),n("span",{class:"token punctuation"},"{"),t(`
      list`),n("span",{class:"token punctuation"},","),t(`
      collapsed`),n("span",{class:"token punctuation"},","),t(`
      toggleCollapsed`),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token literal-property property"},"components"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"{"),t(`
    `),n("span",{class:"token string-property property"},"'sub-menu'"),n("span",{class:"token operator"},":"),t(" SubMenu"),n("span",{class:"token punctuation"},","),t(`
    MenuFoldOutlined`),n("span",{class:"token punctuation"},","),t(`
    MenuUnfoldOutlined`),n("span",{class:"token punctuation"},","),t(`
    PieChartOutlined`),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("script")]),n("span",{class:"token punctuation"},">")]),t(`
`)])],-1)])),_:1})}var Pn=Z(Vn,[["render",wn]]);const Xn=v({CN:J,US:nn,components:{Horizontal:sn,InlineCollapsed:cn,Inline:kn,SiderCurrent:dn,SwitchMode:Cn,Theme:Wn,Vertical:Gn,TemplateSingleFile:Pn}});function Rn(o,a,i,g,I,G){const m=p("horizontal"),l=p("inline"),c=p("inline-collapsed"),C=p("sider-current"),u=p("switch-mode"),r=p("theme"),A=p("vertical"),b=p("TemplateSingleFile"),k=p("demo-sort");return d(),W(k,{cols:1},{default:s(()=>[e(m),e(l),e(c),e(C),e(u),e(r),e(A),e(b)]),_:1})}var Ln=Z(Xn,[["render",Rn]]);export{Ln as default};