78 lines
1.7 KiB
Vue
78 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
import {
|
|
CreditCard,
|
|
Database,
|
|
Grid,
|
|
HelpCircle,
|
|
Settings
|
|
} from "@lucide/vue"
|
|
|
|
import {
|
|
Sidebar,
|
|
SidebarContent,
|
|
SidebarGroupContent,
|
|
SidebarGroupLabel,
|
|
SidebarHeader,
|
|
SidebarMenu,
|
|
SidebarMenuButton,
|
|
SidebarMenuItem,
|
|
} from '@/components/ui/sidebar'
|
|
|
|
const data = {
|
|
user: {
|
|
name: "shadcn",
|
|
email: "m@example.com",
|
|
avatar: "/avatars/shadcn.jpg",
|
|
},
|
|
navMain: [
|
|
{
|
|
title: "Dashboard",
|
|
url: "/admin/dashboard",
|
|
icon: Grid,
|
|
},
|
|
{
|
|
title: "Jenis Bisnis",
|
|
url: "/admin/business-types",
|
|
icon: Grid,
|
|
},
|
|
{
|
|
title: "Plans",
|
|
url: "/admin/plans",
|
|
icon: CreditCard,
|
|
},
|
|
],
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<Sidebar collapsible="icon">
|
|
<SidebarHeader>
|
|
<SidebarMenu>
|
|
<SidebarMenuItem>
|
|
<SidebarMenuButton as-child class="data-[slot=sidebar-menu-button]:p-1.5!">
|
|
<a href="#">
|
|
<Database class="size-6!" />
|
|
<span class="text-lg font-semibold">Profitra</span>
|
|
</a>
|
|
</SidebarMenuButton>
|
|
</SidebarMenuItem>
|
|
</SidebarMenu>
|
|
</SidebarHeader>
|
|
<SidebarContent>
|
|
<SidebarGroupContent class="flex flex-col gap-2">
|
|
<SidebarGroupLabel>Master</SidebarGroupLabel>
|
|
<SidebarMenu>
|
|
<SidebarMenuItem v-for="item in data.navMain" :key="item.title">
|
|
<SidebarMenuButton as-child :tooltip="item.title">
|
|
<NuxtLink :to="item.url">
|
|
<component :is="item.icon" v-if="item.icon" />
|
|
<span>{{ item.title }}</span>
|
|
</NuxtLink>
|
|
</SidebarMenuButton>
|
|
</SidebarMenuItem>
|
|
</SidebarMenu>
|
|
</SidebarGroupContent>
|
|
</SidebarContent>
|
|
</Sidebar>
|
|
</template>
|