51 lines
1.3 KiB
Vue
51 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
import type { NavigationMenuItem } from '@nuxt/ui'
|
|
|
|
const links = [[{
|
|
label: 'General',
|
|
icon: 'i-lucide-user',
|
|
to: '/settings',
|
|
exact: true
|
|
}, {
|
|
label: 'Members',
|
|
icon: 'i-lucide-users',
|
|
to: '/settings/members'
|
|
}, {
|
|
label: 'Notifications',
|
|
icon: 'i-lucide-bell',
|
|
to: '/settings/notifications'
|
|
}, {
|
|
label: 'Security',
|
|
icon: 'i-lucide-shield',
|
|
to: '/settings/security'
|
|
}], [{
|
|
label: 'Documentation',
|
|
icon: 'i-lucide-book-open',
|
|
to: 'https://ui.nuxt.com/docs/getting-started/installation/nuxt',
|
|
target: '_blank'
|
|
}]] satisfies NavigationMenuItem[][]
|
|
</script>
|
|
|
|
<template>
|
|
<UDashboardPanel id="settings" :ui="{ body: 'lg:py-12' }">
|
|
<template #header>
|
|
<UDashboardNavbar title="Settings">
|
|
<template #leading>
|
|
<UDashboardSidebarCollapse />
|
|
</template>
|
|
</UDashboardNavbar>
|
|
|
|
<UDashboardToolbar>
|
|
<!-- NOTE: The `-mx-1` class is used to align with the `DashboardSidebarCollapse` button here. -->
|
|
<UNavigationMenu :items="links" highlight class="-mx-1 flex-1" />
|
|
</UDashboardToolbar>
|
|
</template>
|
|
|
|
<template #body>
|
|
<div class="flex flex-col gap-4 sm:gap-6 lg:gap-12 w-full lg:max-w-2xl mx-auto">
|
|
<NuxtPage />
|
|
</div>
|
|
</template>
|
|
</UDashboardPanel>
|
|
</template>
|