Sidebar

Sidebars can be implemented by adding <Sidebar> and specifying :data.

<template>
 <Sidebar
  :data="routesSample"
  active-background-color="teal-700"
 />
</template>

<script setup lang="ts">
import routesSample from './routes-sample.json';
</script>

[
 {
  "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": "#"
   }
  ]
 }
]
  

By utilizing the integration feature of usebootstrap, you can achieve data retrieval from servers and other sources using only components, without the need for scripting.

The following is a description used in this document:

It retrieves the current group name from RouteMeta, fetches data from app.config.ts according to the group, and reflects it in the SideBar.

For more details, please refer to the integration page.

<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>