161 lines
3.2 KiB
Vue
161 lines
3.2 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>
|