0c732e71cf
- Fixed import error for `dnd-kit-vue` by installing the package. - Moved user navigation from sidebar to header, adding a dropdown for account options. - Added homepage and notification icons to the header. - Implemented sticky header functionality during scroll. - Grouped sidebar menu items under a "Master" label for better organization. - Updated relevant components and package.json to include new dependencies.
65 lines
1.5 KiB
Vue
65 lines
1.5 KiB
Vue
<script setup lang="ts">
|
|
import {
|
|
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: "#",
|
|
icon: Grid,
|
|
},
|
|
],
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<Sidebar collapsible="offcanvas">
|
|
<SidebarHeader>
|
|
<SidebarMenu>
|
|
<SidebarMenuItem>
|
|
<SidebarMenuButton as-child class="data-[slot=sidebar-menu-button]:p-1.5!">
|
|
<a href="#">
|
|
<Database class="size-5!" />
|
|
<span class="text-base 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 :tooltip="item.title">
|
|
<component :is="item.icon" v-if="item.icon" />
|
|
<span>{{ item.title }}</span>
|
|
</SidebarMenuButton>
|
|
</SidebarMenuItem>
|
|
</SidebarMenu>
|
|
</SidebarGroupContent>
|
|
</SidebarContent>
|
|
</Sidebar>
|
|
</template>
|