148 lines
3.0 KiB
Vue
148 lines
3.0 KiB
Vue
<template>
|
|
<UDashboardGroup>
|
|
<UDashboardSearch :groups="groups" />
|
|
|
|
<UDashboardSidebar
|
|
collapsible
|
|
resizable
|
|
class="bg-(--ui-bg-elevated)/25"
|
|
:ui="{ footer: 'lg:border-t lg:border-(--ui-border)' }"
|
|
>
|
|
<template #header="{ collapsed }">
|
|
<TeamsMenu :collapsed="collapsed" />
|
|
</template>
|
|
|
|
<template #default="{ collapsed }">
|
|
<UDashboardSearchButton :collapsed="collapsed" class="bg-transparent ring-(--ui-border)" />
|
|
|
|
<UNavigationMenu :collapsed="collapsed" :items="links[0]" orientation="vertical" />
|
|
|
|
<UNavigationMenu :collapsed="collapsed" :items="links[1]" orientation="vertical" class="mt-auto" />
|
|
</template>
|
|
|
|
<template #footer="{ collapsed }">
|
|
<UserMenu :collapsed="collapsed" />
|
|
</template>
|
|
</UDashboardSidebar>
|
|
|
|
<slot />
|
|
|
|
<!-- <HelpSlideover /> -->
|
|
<NotificationsSlideover />
|
|
</UDashboardGroup>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const route = useRoute()
|
|
const toast = useToast()
|
|
|
|
const links = [
|
|
[
|
|
{
|
|
label: 'Home',
|
|
icon: 'i-lucide-house',
|
|
to: '/'
|
|
},
|
|
{
|
|
label: 'Inbox',
|
|
icon: 'i-lucide-inbox',
|
|
to: '/inbox',
|
|
badge: '4'
|
|
},
|
|
{
|
|
label: 'Customers',
|
|
icon: 'i-lucide-users',
|
|
to: '/customers'
|
|
},
|
|
{
|
|
label: 'Settings',
|
|
to: '/settings',
|
|
icon: 'i-lucide-settings',
|
|
defaultOpen: true,
|
|
children: [
|
|
{
|
|
label: 'General',
|
|
to: '/settings',
|
|
exact: true
|
|
},
|
|
{
|
|
label: 'Members',
|
|
to: '/settings/members'
|
|
},
|
|
{
|
|
label: 'Notifications',
|
|
to: '/settings/notifications'
|
|
},
|
|
{
|
|
label: 'Security',
|
|
to: '/settings/security'
|
|
}
|
|
]
|
|
}
|
|
],
|
|
[
|
|
{
|
|
label: 'Feedback',
|
|
icon: 'i-lucide-message-circle',
|
|
to: 'https://github.com/nuxt-ui-pro/dashboard',
|
|
target: '_blank'
|
|
},
|
|
{
|
|
label: 'Help & Support',
|
|
icon: 'i-lucide-info',
|
|
to: 'https://github.com/nuxt/ui-pro',
|
|
target: '_blank'
|
|
}
|
|
]
|
|
]
|
|
|
|
const groups = computed(() => [
|
|
{
|
|
id: 'links',
|
|
label: 'Go to',
|
|
items: links.flat()
|
|
},
|
|
{
|
|
id: 'code',
|
|
label: 'Code',
|
|
items: [
|
|
{
|
|
id: 'source',
|
|
label: 'View page source',
|
|
icon: 'i-simple-icons-github',
|
|
to: `https://github.com/nuxt-ui-pro/dashboard/blob/v3/app/pages${route.path === '/' ? '/index' : route.path}.vue`,
|
|
target: '_blank'
|
|
}
|
|
]
|
|
}
|
|
])
|
|
|
|
onMounted(async () => {
|
|
const cookie = useCookie('cookie-consent')
|
|
if (cookie.value === 'accepted') {
|
|
return
|
|
}
|
|
|
|
toast.add({
|
|
title: 'We use first-party cookies to enhance your experience on our website.',
|
|
duration: 0,
|
|
close: false,
|
|
actions: [
|
|
{
|
|
label: 'Accept',
|
|
color: 'neutral',
|
|
variant: 'outline',
|
|
onClick: () => {
|
|
cookie.value = 'accepted'
|
|
}
|
|
},
|
|
{
|
|
label: 'Opt out',
|
|
color: 'neutral',
|
|
variant: 'ghost'
|
|
}
|
|
]
|
|
})
|
|
})
|
|
</script>
|