editor/apps/dev/src/App.vue

<script setup lang="ts">
const navigationItems = [
  { label: "Overview", icon: "i-lucide-book-open", to: "/" },
  { label: "Basic Editing", icon: "i-lucide-type", to: "/basic-editing" },
  { label: "Inline Marks", icon: "i-lucide-bold", to: "/inline-marks" },
  { label: "Tasks & Priorities", icon: "i-lucide-check-square", to: "/tasks" },
  {
    label: "Blockquotes & Callouts",
    icon: "i-lucide-quote",
    to: "/blockquotes",
  },
  { label: "Links", icon: "i-lucide-link", to: "/links" },
  { label: "Page Refs & Tags", icon: "i-lucide-hash", to: "/refs-tags" },
  { label: "Code Blocks", icon: "i-lucide-code", to: "/code-blocks" },
  { label: "Properties & Dates", icon: "i-lucide-list", to: "/properties" },
  { label: "Math", icon: "i-lucide-sigma", to: "/math" },
  { label: "Toolbar", icon: "i-lucide-rows-3", to: "/toolbar" },
]
</script>

<template>
  <UApp>
    <UHeader :ui="{ wrapper: 'border-b border-default' }">
      <template #left>
        <AppLogo class="w-auto h-5 shrink-0" />
      </template>

      <template #right>
        <UColorModeButton />
      </template>
    </UHeader>

    <UMain>
      <UPage class="max-w-7xl mx-auto w-full px-6">
        <template #left>
          <UPageAside>
            <UNavigationMenu
              orientation="vertical"
              highlight
              :items="navigationItems"
            />
          </UPageAside>
        </template>

        <RouterView />
      </UPage>
    </UMain>
  </UApp>
</template>