67 lines
1.6 KiB
Vue
67 lines
1.6 KiB
Vue
<script setup lang="ts">
|
|
import type { NavigationMenuItem } from '@nuxt/ui'
|
|
|
|
const nav : NavigationMenuItem[][] = [[
|
|
{
|
|
label: 'Home',
|
|
icon: 'i-lucide-house',
|
|
to: "/dashboard"
|
|
},
|
|
{
|
|
label: 'Notifications',
|
|
icon: 'solar:chat-round-unread-outline',
|
|
badge: '4',
|
|
to: "/events"
|
|
}, {
|
|
label: 'Settings',
|
|
icon: 'i-lucide-settings',
|
|
//to: '/settings',
|
|
children: [
|
|
{
|
|
label: "General",
|
|
icon: "solar:settings-minimalistic-broken",
|
|
to: "/settings",
|
|
},
|
|
{
|
|
label: "Profile",
|
|
icon: "solar:user-broken",
|
|
to: "/settings/profile"
|
|
},
|
|
{
|
|
label: "Theme",
|
|
icon: "solar:pallete-2-broken",
|
|
to: "/settings/theme"
|
|
},
|
|
],
|
|
}]
|
|
];
|
|
|
|
const route = useRoute();
|
|
const title = ref("...");
|
|
|
|
watch(route, (newVal, oldVal) => {
|
|
title.value = (newVal.meta.title as string) || "Settings";
|
|
}, {immediate: true});
|
|
//const title = pageMeta.title || "Settings"
|
|
|
|
onMounted(() => {
|
|
ui_color_cookie();
|
|
})
|
|
|
|
</script>
|
|
<template>
|
|
<UDashboardGroup>
|
|
<DashboardSidebar class="bg-(--sidebar-bg)" collapsible :resizable="undefined" :items="nav"/>
|
|
|
|
<UDashboardSidebarCollapse />
|
|
|
|
<UContainer class="max-w-full overflow-auto">
|
|
<DashboardHeader :title="title"/>
|
|
<UNavigationMenu :items="nav[0][2].children" />
|
|
<!-- in my case I want the button to be the same everywhere.
|
|
if you wanna customize it per page, place it per page inside UContainer -->
|
|
<!--<UDashboardSidebarToggle variant="subtle" class="absolute z-20 top-3 left-2.5"/>-->
|
|
<slot />
|
|
</UContainer>
|
|
</UDashboardGroup>
|
|
</template>> |