Files
laravel-nuxt-ui-inertia-tem…/resources/js/components/profile/ProfileSettingsPanel.vue

44 lines
942 B
Vue

<script setup lang="ts">
import type { NavigationMenuItem } from '@nuxt/ui'
const links = [[
{
label: 'General',
icon: 'i-lucide-user',
to: '/profile',
exact: true,
},
{
label: 'Security',
icon: 'i-lucide-shield',
to: '/profile/security',
},
]] satisfies NavigationMenuItem[][]
</script>
<template>
<UDashboardPanel id="profile" :ui="{ body: 'lg:py-12' }">
<template #header>
<UDashboardNavbar title="Profile">
<template #leading>
<UDashboardSidebarCollapse />
</template>
</UDashboardNavbar>
<UDashboardToolbar>
<UNavigationMenu
:items="links"
highlight
class="-mx-1 flex-1"
/>
</UDashboardToolbar>
</template>
<template #body>
<div class="mx-auto flex w-full max-w-2xl flex-col gap-4 sm:gap-6 lg:gap-12">
<slot />
</div>
</template>
</UDashboardPanel>
</template>