How it works
<Sidebar>を追加し、:routesを指定することで、サイドバーの実装が可能です。
Browse docs
vue
<template>
<Sidebar
:data="routesSample"
active-background-color="teal-700"
/>
</template>
<script setup lang="ts">
import routesSample from './routes-sample.json';
</script>
JSON file
[
{
"name": "Sample",
"icon": "bi:award-fill",
"color": "indigo",
"children": [
{
"name": "SampleContent",
"path": "#"
},
{
"name": "SampleContent2",
"path": "#"
}
]
},
{
"name": "Sample2",
"icon": "bi:airplane-fill",
"color": "green",
"children": [
{
"name": "SampleContent3",
"path": "#"
}
]
}
]
Integration
usebootstrapのIntegration機能を利用すれば、scriptの記載無しでサーバー等からのデータがコンポーネントのみで実現できます。
下記はこのドキュメントで利用されている記載です。
RouteMetaから現在のグループ名を取得し、グループに応じてapp.config.tsからデータを取得し、それをSideBarに反映しています。
詳細は integration を確認してください。
Browse docs
vue
<template>
<ViewState
v-slot="navigation"
src="route://meta"
path="navigation"
>
<Sidebar
id="bdSidebar"
:src="`app-config://usebootstrap/navigations/${navigation.data || 'default'}`"
active-background-color="teal-700"
/>
</ViewState>
</template>