update sidebar docs

docs/src/components/modules/Sidebar/SidebarDoc.vue

@@ -0,0 +1,42 @@
+<template>
+  <DocSection label="Sidebar" :code="code">
+    <template #description>
+      A sidebar
+    </template>
+    <template #example>
+      <Sidebar v-model:visible="visible" :items="items" />
+      <Button icon="plus" @click="visible = !visible" />
+    </template>
+  </DocSection>
+</template>
+
+<script setup lang="ts">
+import DocSection from '@/components/doc/DocSection.vue'
+
+import { ref } from 'vue'
+import { Sidebar, Button } from 'vue-fomantic-ui'
+
+const visible = ref(false)
+const items = [
+  { text: 1 },
+  { text: 2 },
+  { text: 3 },
+]
+
+const code = `<template>
+  <Sidebar v-model:visible="visible" :items="items" />
+  <Button icon="plus" @click="visible = !visible" />
+<\/template>
+
+<script setup>
+import { ref } from 'vue'
+import { Sidebar, Button } from 'vue-fomantic-ui'
+
+const visible = ref(false)
+const items = [
+  { text: 1 },
+  { text: 2 },
+  { text: 3 },
+]
+<\/script>`
+</script>

docs/src/components/modules/Sidebar/SidebarPusherDoc.vue

@@ -0,0 +1,82 @@
+<template>
+  <DocSection :code="code">
+    <template #example>
+      <div class="ui top attached demo menu">
+        <a class="item" @click="visible = !visible">
+          <i class="sidebar icon"></i>
+          Menu
+        </a>
+      </div>
+      <Segment attached="bottom">
+        <Sidebar
+          v-model:visible="visible"
+          :items="items"
+          icon="labeled"
+          :mountOnBody="false"
+        />
+        <div class="pusher">
+          <Segment basic>
+            <h3 class="ui header">Application Content</h3>
+            <img src="/images/wireframe/short-paragraph.png" />
+            <img src="/images/wireframe/short-paragraph.png" />
+            <img src="/images/wireframe/short-paragraph.png" />
+            <img src="/images/wireframe/short-paragraph.png" />
+          </Segment>
+        </div>
+      </Segment>
+    </template>
+  </DocSection>
+</template>
+
+<script setup lang="ts">
+import DocSection from '@/components/doc/DocSection.vue'
+
+import { ref } from 'vue'
+import { Sidebar, Segment } from 'vue-fomantic-ui'
+
+const visible = ref(false)
+const items = ref([
+  { icon: 'gamepad', text: 'Games' },
+  { icon: 'video camera', text: 'Channels' },
+  { icon: 'video play', text: 'Videos' },
+])
+
+const code = `<template>
+  <div class="ui top attached demo menu">
+    <a class="item" @click="visible = !visible">
+      <i class="sidebar icon"></i>
+      Menu
+    </a>
+  </div>
+  <Segment attached="bottom">
+    <Sidebar
+      v-model:visible="visible"
+      :items="items"
+      icon="labeled"
+      :mountOnBody="false"
+      v-bind="args"
+    />
+    <div class="pusher">
+      <Segment basic>
+        <h3 class="ui header">Application Content</h3>
+        <img src="./wireframe/short-paragraph.png" />
+        <img src="./wireframe/short-paragraph.png" />
+        <img src="./wireframe/short-paragraph.png" />
+        <img src="./wireframe/short-paragraph.png" />
+      </Segment>
+    </div>
+  </Segment>
+<\/template>
+
+<script setup>
+import { ref } from 'vue'
+import { Sidebar, Segment } from 'vue-fomantic-ui'
+
+const visible = ref(false)
+const items = ref([
+  { icon: 'gamepad', text: 'Games' },
+  { icon: 'video camera', text: 'Channels' },
+  { icon: 'video play', text: 'Videos' },
+])
+<\/script>`
+</script>

docs/src/pages/modules/Sidebar.vue

@@ -0,0 +1,40 @@
+<template>
+  <DocComponent
+    title="Sidebar"
+    description="A sidebar hides additional content beside a page."
+    :component-docs="docs"
+    :api-docs="api"
+  />
+</template>
+
+<script setup>
+import DocComponent from '@/components/doc/DocComponent.vue'
+
+// Types
+import SidebarDoc from '@/components/modules/Sidebar/SidebarDoc.vue'
+import SidebarPusherDoc from '@/components/modules/Sidebar/SidebarPusherDoc.vue'
+
+const docs = [
+  {
+    id: 'sidebar',
+    label: 'Sidebar',
+    category: 'Types',
+    component: [SidebarDoc, SidebarPusherDoc],
+  },
+]
+
+const api = {
+  Sidebar: {
+    props: [
+      { name: 'animation', type: 'string', default: 'overlay', description: 'Specifies the animation of the sidebar.' },
+      { name: 'dimmed', type: 'boolean', default: 'false', description: 'When specified, display the dim inside pusher content.' },
+      { name: 'direction', type: 'string', default: 'left', description: 'Specifies the direction the sidebar should appear on.' },
+      { name: 'visible', type: 'boolean', default: 'false', description: 'Specifies the visibility of the sidebar.' }
+    ],
+    events: [
+      { name: 'change', description: 'Callback to invoke when checkbox value is changed.' },
+      { name: 'click', description: 'Callback to invoke when checkbox is clicked.' }
+    ]
+  }
+}
+</script>

docs/src/router.ts

@@ -13,7 +13,6 @@ import DimmerDoc from './pages/modules/DimmerDoc.vue'
 import DropdownDoc from './pages/modules/DropdownDoc.vue'
 import EmbedDoc from './pages/modules/EmbedDoc.vue'
 import PopupDoc from './pages/modules/PopupDoc.vue'
-import SidebarDoc from './pages/modules/SidebarDoc.vue'
 
 const routes: any = [
   {
@@ -61,7 +60,7 @@ const routes: any = [
       { path: 'modules/popup', component: PopupDoc },
       { path: 'modules/progress', component: () => import('./pages/modules/Progress.vue') },
       { path: 'modules/rating', component: () => import('./pages/modules/Rating.vue') },
-      { path: 'modules/sidebar', component: SidebarDoc },
+      { path: 'modules/sidebar', component: () => import('./pages/modules/Sidebar.vue') },
       { path: 'modules/slider', component: () => import('./pages/modules/Slider.vue') },
       { path: 'modules/tab', component: () => import('./pages/modules/Tab.vue') },
       { path: 'modules/toast', component: () => import('./pages/modules/Toast.vue') },