103 lines
2.6 KiB
Vue
103 lines
2.6 KiB
Vue
<script lang="ts" setup>
|
|
definePageMeta({
|
|
layout: 'blank',
|
|
public: true,
|
|
})
|
|
|
|
const route = useRoute()
|
|
const contentFrame = computed(() => route.meta.contentFrame)
|
|
const contentContent = computed(() => {
|
|
switch (contentFrame.value) {
|
|
case 'cf-container-lg':
|
|
return 'cf-frame cf-container-lg-content'
|
|
case 'cf-container-md':
|
|
return 'cf-frame cf-container-md-content'
|
|
case 'cf-container-sm':
|
|
return 'cf-frame cf-container-sm-content'
|
|
case 'cf-full-width':
|
|
return 'cf-frame-width'
|
|
default:
|
|
return 'cf-frame'
|
|
}
|
|
})
|
|
|
|
const teams: {
|
|
name: string
|
|
logo: string
|
|
plan: string
|
|
}[] = [
|
|
{
|
|
name: 'SIMRS - RSSA',
|
|
logo: '/rssa-logo.png',
|
|
plan: 'Saiful Anwar Hospital',
|
|
},
|
|
]
|
|
const sidebar = {
|
|
collapsible: 'offcanvas', // 'offcanvas' | 'icon' | 'none'
|
|
side: 'left', // 'left' | 'right'
|
|
variant: 'sidebar', // 'sidebar' | 'floating' | 'inset'
|
|
}
|
|
|
|
const navMenu = ref({
|
|
heading: 'Main Menu',
|
|
items: [
|
|
{
|
|
title: 'Test User List',
|
|
icon: 'i-lucide-user',
|
|
component: defineAsyncComponent(() => import('~/pages/_dev/user/list.vue')),
|
|
},
|
|
{
|
|
title: 'Test Medicine List',
|
|
icon: 'i-lucide-user',
|
|
component: defineAsyncComponent(() => import('~/components/content/item/list.vue')),
|
|
},
|
|
],
|
|
})
|
|
|
|
const activeComponent = ref<any>(null)
|
|
|
|
function selectComponent(item: any) {
|
|
activeComponent.value = item.component
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<SidebarProvider>
|
|
<Sidebar :collapsible="sidebar.collapsible" :side="sidebar.side" :variant="sidebar.variant">
|
|
<SidebarHeader>
|
|
<LayoutSidebarNavHeader :teams="teams" />
|
|
</SidebarHeader>
|
|
<SidebarContent>
|
|
<SidebarGroup v-if="navMenu.items.length > 0">
|
|
<SidebarGroupLabel>
|
|
{{ navMenu.heading }}
|
|
</SidebarGroupLabel>
|
|
<button
|
|
v-for="(item, index) in navMenu.items"
|
|
:key="index"
|
|
class="my-2 mb-2 flex w-full items-center gap-2 rounded px-2 py-1 hover:bg-gray-100"
|
|
@click="selectComponent(item)"
|
|
>
|
|
<i :class="item.icon"></i>
|
|
{{ item.title }}
|
|
</button>
|
|
</SidebarGroup>
|
|
</SidebarContent>
|
|
<SidebarFooter>
|
|
<LayoutSidebarNavFooter />
|
|
</SidebarFooter>
|
|
<SidebarRail />
|
|
</Sidebar>
|
|
|
|
<SidebarInset>
|
|
<LayoutHeader />
|
|
<div class="w-full min-w-0 flex-1 overflow-x-auto p-4 lg:p-6">
|
|
<div v-if="activeComponent">
|
|
<component :is="activeComponent" />
|
|
</div>
|
|
<div v-else class="text-gray-500">Playground untuk testing component</div>
|
|
</div>
|
|
</SidebarInset>
|
|
</SidebarProvider>
|
|
</template>
|