feat(NavigationMenu): rename links to items + improve slots

This commit is contained in:
Benjamin Canac
2024-04-17 12:18:02 +02:00
parent d56d3a13e3
commit ea19a3061f
6 changed files with 179 additions and 52 deletions

View File

@@ -50,7 +50,7 @@ function upperName(name: string) {
<template>
<UApp :toaster="appConfig.toaster">
<div class="min-h-screen w-screen overflow-hidden flex flex-col items-center justify-center overflow-y-auto bg-white dark:bg-gray-900" vaul-drawer-wrapper>
<UNavigationMenu :links="components.map(component => ({ label: upperName(component), to: `/${component}` }))" class="border-b border-gray-200 dark:border-gray-800 overflow-x-auto px-2" />
<UNavigationMenu :items="components.map(component => ({ label: upperName(component), to: `/${component}` }))" class="border-b border-gray-200 dark:border-gray-800 overflow-x-auto px-2" />
<div class="flex-1 flex flex-col items-center justify-center w-full py-12 px-4">
<NuxtPage />

View File

@@ -1,5 +1,5 @@
<script setup lang="ts">
const links = [
const items = [
[{
label: 'Profile',
active: true,
@@ -37,8 +37,8 @@ const links = [
<template>
<div class="flex flex-col gap-12 w-full max-w-4xl">
<UNavigationMenu :links="links" class="border-b border-gray-200 dark:border-gray-800" />
<UNavigationMenu :items="items" class="border-b border-gray-200 dark:border-gray-800" />
<UNavigationMenu :links="links" orientation="vertical" class="w-48" />
<UNavigationMenu :items="items" orientation="vertical" class="w-48" />
</div>
</template>