@vestow/vue 0.1.0

package/src/components/menubar/MenubarItem.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { MenubarItemEmits, MenubarItemProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { MenubarItem, useForwardPropsEmits } from 'reka-ui'
+import { computed } from 'vue'
+import { menuInsetClass, menuItemClass } from '../../lib/menu-styles'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<MenubarItemProps & ClassProps & {
+  /** Item hành động nguy hiểm: xoá, thu hồi quyền... */
+  variant?: 'default' | 'destructive'
+  inset?: boolean
+}>()
+const emits = defineEmits<MenubarItemEmits>()
+
+const delegated = computed(() => {
+  const { class: _class, variant: _variant, inset: _inset, ...rest } = props
+  return rest
+})
+
+const forwarded = useForwardPropsEmits(delegated, emits)
+</script>
+
+<template>
+  <MenubarItem
+    v-bind="forwarded"
+    :data-variant="props.variant"
+    :class="cn(menuItemClass, props.inset && menuInsetClass, props.class)"
+  >
+    <slot />
+  </MenubarItem>
+</template>

package/src/components/menubar/MenubarLabel.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { MenubarLabelProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { MenubarLabel } from 'reka-ui'
+import { computed } from 'vue'
+import { menuInsetClass, menuLabelClass } from '../../lib/menu-styles'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<MenubarLabelProps & ClassProps & { inset?: boolean }>()
+
+const delegated = computed(() => {
+  const { class: _class, inset: _inset, ...rest } = props
+  return rest
+})
+</script>
+
+<template>
+  <MenubarLabel v-bind="delegated" :class="cn(menuLabelClass, props.inset && menuInsetClass, props.class)">
+    <slot />
+  </MenubarLabel>
+</template>

package/src/components/menubar/MenubarMenu.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { MenubarMenuProps } from 'reka-ui'
+import { MenubarMenu } from 'reka-ui'
+
+const props = defineProps<MenubarMenuProps>()
+</script>
+
+<template>
+  <MenubarMenu v-bind="props">
+    <slot />
+  </MenubarMenu>
+</template>

package/src/components/menubar/MenubarRadioGroup.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { MenubarRadioGroupEmits, MenubarRadioGroupProps } from 'reka-ui'
+import { MenubarRadioGroup, useForwardPropsEmits } from 'reka-ui'
+
+const props = defineProps<MenubarRadioGroupProps>()
+const emits = defineEmits<MenubarRadioGroupEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <MenubarRadioGroup v-bind="forwarded">
+    <slot />
+  </MenubarRadioGroup>
+</template>

package/src/components/menubar/MenubarRadioItem.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { MenubarRadioItemEmits, MenubarRadioItemProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { MenubarItemIndicator, MenubarRadioItem, useForwardPropsEmits } from 'reka-ui'
+import { computed } from 'vue'
+import { Circle } from '../../lib/icons'
+import { menuIndicatorItemClass, menuIndicatorSlotClass } from '../../lib/menu-styles'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<MenubarRadioItemProps & ClassProps>()
+const emits = defineEmits<MenubarRadioItemEmits>()
+
+const delegated = computed(() => {
+  const { class: _class, ...rest } = props
+  return rest
+})
+
+const forwarded = useForwardPropsEmits(delegated, emits)
+</script>
+
+<template>
+  <MenubarRadioItem v-bind="forwarded" :class="cn(menuIndicatorItemClass, props.class)">
+    <span :class="menuIndicatorSlotClass">
+      <MenubarItemIndicator>
+        <Circle class="size-2 fill-current" />
+      </MenubarItemIndicator>
+    </span>
+    <slot />
+  </MenubarRadioItem>
+</template>

package/src/components/menubar/MenubarSeparator.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import { MenubarSeparator } from 'reka-ui'
+import { menuSeparatorClass } from '../../lib/menu-styles'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<ClassProps>()
+</script>
+
+<template>
+  <MenubarSeparator :class="cn(menuSeparatorClass, props.class)" />
+</template>

package/src/components/menubar/MenubarShortcut.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import { menuShortcutClass } from '../../lib/menu-styles'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<ClassProps>()
+</script>
+
+<template>
+  <span :class="cn(menuShortcutClass, props.class)">
+    <slot />
+  </span>
+</template>

package/src/components/menubar/MenubarSub.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { MenubarSubEmits, MenubarSubProps } from 'reka-ui'
+import { MenubarSub, useForwardPropsEmits } from 'reka-ui'
+
+const props = defineProps<MenubarSubProps>()
+const emits = defineEmits<MenubarSubEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <MenubarSub v-bind="forwarded">
+    <slot />
+  </MenubarSub>
+</template>

package/src/components/menubar/MenubarSubContent.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { MenubarSubContentEmits, MenubarSubContentProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { MenubarPortal, MenubarSubContent, useForwardPropsEmits } from 'reka-ui'
+import { computed } from 'vue'
+import { menuSubContentClass } from '../../lib/menu-styles'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<MenubarSubContentProps & ClassProps>()
+const emits = defineEmits<MenubarSubContentEmits>()
+
+const delegated = computed(() => {
+  const { class: _class, ...rest } = props
+  return rest
+})
+
+const forwarded = useForwardPropsEmits(delegated, emits)
+</script>
+
+<template>
+  <MenubarPortal>
+    <MenubarSubContent v-bind="forwarded" :class="cn(menuSubContentClass, props.class)">
+      <slot />
+    </MenubarSubContent>
+  </MenubarPortal>
+</template>

package/src/components/menubar/MenubarSubTrigger.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { MenubarSubTriggerProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { MenubarSubTrigger } from 'reka-ui'
+import { computed } from 'vue'
+import { ChevronRight } from '../../lib/icons'
+import { menuInsetClass, menuSubTriggerClass } from '../../lib/menu-styles'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<MenubarSubTriggerProps & ClassProps & { inset?: boolean }>()
+
+const delegated = computed(() => {
+  const { class: _class, inset: _inset, ...rest } = props
+  return rest
+})
+</script>
+
+<template>
+  <MenubarSubTrigger
+    v-bind="delegated"
+    :class="cn(menuSubTriggerClass, props.inset && menuInsetClass, props.class)"
+  >
+    <slot />
+    <ChevronRight class="ml-auto text-muted-foreground" />
+  </MenubarSubTrigger>
+</template>

package/src/components/menubar/MenubarTrigger.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { MenubarTriggerProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { MenubarTrigger } from 'reka-ui'
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<MenubarTriggerProps & ClassProps>()
+
+const delegated = computed(() => {
+  const { class: _class, ...rest } = props
+  return rest
+})
+</script>
+
+<template>
+  <!-- Nút trên thanh, KHÔNG dùng `menuItemClass`: mục trong menu cao 28px và trải
+       hết bề ngang tấm menu, còn nút ở đây ôm sát chữ và nằm ngang hàng nhau. -->
+  <MenubarTrigger
+    v-bind="delegated"
+    :class="cn(
+      'flex select-none items-center rounded-sm px-2 py-1 text-sm font-medium outline-none',
+      'focus:bg-accent focus:text-accent-foreground',
+      'data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
+      props.class,
+    )"
+  >
+    <slot />
+  </MenubarTrigger>
+</template>

package/src/components/menubar/index.ts

@@ -0,0 +1,29 @@
+/**
+ * Thanh menu ngang kiểu ứng dụng desktop: File / Edit / View.
+ *
+ * Khác `DropdownMenu` ở **điều hướng bàn phím theo chiều ngang**, không phải ở
+ * diện mạo: mở một menu rồi bấm mũi tên trái/phải là nhảy thẳng sang menu kế
+ * bên, và khi một menu đang mở thì chỉ cần rê chuột qua nút khác là menu đó mở
+ * theo. Mấy `DropdownMenu` đặt cạnh nhau không làm được — mỗi cái là một cây
+ * roving focus riêng, không biết gì về hàng xóm.
+ *
+ * Phần *nội dung* thì dùng lại y nguyên `lib/menu-styles.ts` cùng với
+ * `DropdownMenu` và `ContextMenu`. Chỉ `Menubar` và `MenubarTrigger` có class
+ * riêng, vì chỉ hai cái đó thuộc về cái thanh chứ không thuộc về tấm menu.
+ */
+
+export { default as Menubar } from './Menubar.vue'
+export { default as MenubarCheckboxItem } from './MenubarCheckboxItem.vue'
+export { default as MenubarContent } from './MenubarContent.vue'
+export { default as MenubarGroup } from './MenubarGroup.vue'
+export { default as MenubarItem } from './MenubarItem.vue'
+export { default as MenubarLabel } from './MenubarLabel.vue'
+export { default as MenubarMenu } from './MenubarMenu.vue'
+export { default as MenubarRadioGroup } from './MenubarRadioGroup.vue'
+export { default as MenubarRadioItem } from './MenubarRadioItem.vue'
+export { default as MenubarSeparator } from './MenubarSeparator.vue'
+export { default as MenubarShortcut } from './MenubarShortcut.vue'
+export { default as MenubarSub } from './MenubarSub.vue'
+export { default as MenubarSubContent } from './MenubarSubContent.vue'
+export { default as MenubarSubTrigger } from './MenubarSubTrigger.vue'
+export { default as MenubarTrigger } from './MenubarTrigger.vue'

package/src/components/navigation-menu/NavigationMenu.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import type { NavigationMenuRootEmits, NavigationMenuRootProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { NavigationMenuRoot, useForwardPropsEmits } from 'reka-ui'
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+import NavigationMenuViewport from './NavigationMenuViewport.vue'
+
+const props = withDefaults(
+  defineProps<NavigationMenuRootProps & ClassProps & {
+    /**
+     * Dựng chung MỘT khung cho mọi tấm nội dung.
+     *
+     * Bật (mặc định): khung nằm giữa thanh và trượt theo mục đang mở, cỡ đổi
+     * mượt — kiểu mega menu của trang giới thiệu.
+     *
+     * Tắt: mỗi tấm neo ngay dưới mục của nó. Hợp khi các tấm rộng bằng nhau
+     * hoặc khi thanh menu nằm trong một vùng đã cuộn được.
+     */
+    viewport?: boolean
+  }>(),
+  { viewport: true },
+)
+const emits = defineEmits<NavigationMenuRootEmits>()
+
+const delegated = computed(() => {
+  const { class: _class, viewport: _viewport, ...rest } = props
+  return rest
+})
+
+const forwarded = useForwardPropsEmits(delegated, emits)
+</script>
+
+<template>
+  <NavigationMenuRoot
+    v-bind="forwarded"
+    :data-viewport="props.viewport"
+    :class="cn('group/navigation-menu relative flex max-w-max flex-1 items-center justify-center', props.class)"
+  >
+    <slot />
+    <NavigationMenuViewport v-if="props.viewport" />
+  </NavigationMenuRoot>
+</template>

package/src/components/navigation-menu/NavigationMenuContent.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import type { NavigationMenuContentEmits, NavigationMenuContentProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { NavigationMenuContent, useForwardPropsEmits } from 'reka-ui'
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<NavigationMenuContentProps & ClassProps>()
+const emits = defineEmits<NavigationMenuContentEmits>()
+
+const delegated = computed(() => {
+  const { class: _class, ...rest } = props
+  return rest
+})
+
+const forwarded = useForwardPropsEmits(delegated, emits)
+
+/*
+ * `data-motion` là thứ reka đặt để nói tấm này vào/ra từ phía nào — trái hay
+ * phải tuỳ mục vừa mở nằm bên nào so với mục cũ. Nhờ vậy chuyển giữa hai menu
+ * trông như trượt ngang một quãng, không phải hai lần hiện/ẩn rời rạc.
+ */
+const motion = [
+  'data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out',
+  'data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out',
+  'data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52',
+  'data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52',
+]
+
+/*
+ * Khi `viewport` tắt, tấm nội dung neo thẳng dưới mục của nó — lúc đó nó phải
+ * tự có nền, viền và bóng vì không còn khung chung nào lo hộ.
+ *
+ * Phải viết ĐỦ từng tên class ra đây, đừng ghép chuỗi lúc chạy: Tailwind v4
+ * quét **văn bản nguồn** tìm tên hoàn chỉnh, nên `prefix + name` không sinh ra
+ * class nào — không lỗi, chỉ là không có kiểu dáng.
+ */
+const detached = [
+  'group-data-[viewport=false]/navigation-menu:surface',
+  'group-data-[viewport=false]/navigation-menu:top-full',
+  'group-data-[viewport=false]/navigation-menu:mt-1.5',
+  'group-data-[viewport=false]/navigation-menu:overflow-hidden',
+  'group-data-[viewport=false]/navigation-menu:rounded-md',
+  'group-data-[viewport=false]/navigation-menu:border',
+  'group-data-[viewport=false]/navigation-menu:border-border',
+  'group-data-[viewport=false]/navigation-menu:bg-popover',
+  'group-data-[viewport=false]/navigation-menu:text-popover-foreground',
+  'group-data-[viewport=false]/navigation-menu:shadow-md',
+  'group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in',
+  'group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out',
+  'group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95',
+  'group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95',
+]
+</script>
+
+<template>
+  <NavigationMenuContent
+    v-bind="forwarded"
+    :class="cn('left-0 top-0 w-full p-2 md:absolute md:w-auto', motion, detached, props.class)"
+  >
+    <slot />
+  </NavigationMenuContent>
+</template>

package/src/components/navigation-menu/NavigationMenuIndicator.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { NavigationMenuIndicatorProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { NavigationMenuIndicator } from 'reka-ui'
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<NavigationMenuIndicatorProps & ClassProps>()
+
+const delegated = computed(() => {
+  const { class: _class, ...rest } = props
+  return rest
+})
+</script>
+
+<template>
+  <!-- Mũi nhọn nối thanh với khung nội dung. Là một hình vuông xoay 45° rồi cắt
+       nửa dưới bằng `overflow-hidden` của vỏ — rẻ hơn vẽ tam giác bằng border. -->
+  <NavigationMenuIndicator
+    v-bind="delegated"
+    :class="cn(
+      'top-full z-(--z-base) flex h-1.5 items-end justify-center overflow-hidden',
+      'transition-[width,transform] duration-(--duration-base)',
+      'data-[state=visible]:animate-in data-[state=hidden]:animate-out',
+      'data-[state=visible]:fade-in data-[state=hidden]:fade-out',
+      props.class,
+    )"
+  >
+    <div class="relative top-[60%] size-2 rotate-45 rounded-tl-sm border-l border-t border-border bg-popover" />
+  </NavigationMenuIndicator>
+</template>

package/src/components/navigation-menu/NavigationMenuItem.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { NavigationMenuItemProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { NavigationMenuItem } from 'reka-ui'
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<NavigationMenuItemProps & ClassProps>()
+
+const delegated = computed(() => {
+  const { class: _class, ...rest } = props
+  return rest
+})
+</script>
+
+<template>
+  <NavigationMenuItem v-bind="delegated" :class="cn('relative', props.class)">
+    <slot />
+  </NavigationMenuItem>
+</template>

package/src/components/navigation-menu/NavigationMenuLink.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { NavigationMenuLinkEmits, NavigationMenuLinkProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { NavigationMenuLink, useForwardPropsEmits } from 'reka-ui'
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<NavigationMenuLinkProps & ClassProps>()
+const emits = defineEmits<NavigationMenuLinkEmits>()
+
+const delegated = computed(() => {
+  const { class: _class, ...rest } = props
+  return rest
+})
+
+const forwarded = useForwardPropsEmits(delegated, emits)
+</script>
+
+<template>
+  <!-- `active` sinh ra `data-active` VÀ `aria-current="page"` — trang hiện tại
+       vì vậy được đọc lên chứ không chỉ được tô khác màu. -->
+  <NavigationMenuLink
+    v-bind="forwarded"
+    :class="cn(
+      'flex select-none flex-col gap-1 rounded-sm p-2 text-sm leading-snug no-underline outline-none transition-colors',
+      'hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground',
+      'data-[active]:bg-accent/50',
+      '[&_svg]:size-4 [&_svg]:shrink-0',
+      props.class,
+    )"
+  >
+    <slot />
+  </NavigationMenuLink>
+</template>

package/src/components/navigation-menu/NavigationMenuList.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { NavigationMenuListProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { NavigationMenuList } from 'reka-ui'
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<NavigationMenuListProps & ClassProps>()
+
+const delegated = computed(() => {
+  const { class: _class, ...rest } = props
+  return rest
+})
+</script>
+
+<template>
+  <NavigationMenuList
+    v-bind="delegated"
+    :class="cn('group flex flex-1 list-none items-center justify-center gap-1', props.class)"
+  >
+    <slot />
+  </NavigationMenuList>
+</template>

package/src/components/navigation-menu/NavigationMenuTrigger.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { NavigationMenuTriggerProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { NavigationMenuTrigger } from 'reka-ui'
+import { computed } from 'vue'
+import { ChevronDown } from '../../lib/icons'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<NavigationMenuTriggerProps & ClassProps>()
+
+const delegated = computed(() => {
+  const { class: _class, ...rest } = props
+  return rest
+})
+</script>
+
+<template>
+  <!-- Cùng khuôn với `MenubarTrigger`: nút trên một thanh, không phải mục trong
+       một tấm menu — nên nó ôm sát chữ chứ không trải hết bề ngang. -->
+  <NavigationMenuTrigger
+    v-bind="delegated"
+    :class="cn(
+      'group inline-flex h-9 w-max select-none items-center justify-center gap-1 rounded-md px-3 py-2 text-sm font-medium outline-none transition-colors',
+      'hover:bg-accent hover:text-accent-foreground',
+      'focus:bg-accent focus:text-accent-foreground',
+      'data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
+      'disabled:pointer-events-none disabled:opacity-50',
+      props.class,
+    )"
+  >
+    <slot />
+    <!-- `aria-hidden`: mũi tên chỉ nhắc lại `aria-expanded` mà nút đã báo. -->
+    <ChevronDown
+      class="relative top-px size-3.5 transition-transform duration-(--duration-base) group-data-[state=open]:rotate-180"
+      aria-hidden="true"
+    />
+  </NavigationMenuTrigger>
+</template>

package/src/components/navigation-menu/NavigationMenuViewport.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { NavigationMenuViewportProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { NavigationMenuViewport } from 'reka-ui'
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<NavigationMenuViewportProps & ClassProps>()
+
+const delegated = computed(() => {
+  const { class: _class, ...rest } = props
+  return rest
+})
+</script>
+
+<template>
+  <!-- Vỏ ngoài `absolute` để tấm nội dung không đẩy trang xuống; `isolate` để
+       bóng đổ của nó không chui ra sau thanh menu. -->
+  <div class="absolute left-0 top-full isolate z-(--z-overlay) flex justify-center">
+    <NavigationMenuViewport
+      v-bind="delegated"
+      :class="cn(
+        'surface relative mt-1.5 origin-top overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md',
+        // Kích thước lấy từ tấm đang mở, nên khung co giãn theo nội dung thay vì
+        // giật một nhịp rồi mới đúng cỡ.
+        'h-[var(--reka-navigation-menu-viewport-height)] w-full md:w-[var(--reka-navigation-menu-viewport-width)]',
+        'transition-[width,height] duration-(--duration-base)',
+        'data-[state=open]:animate-in data-[state=closed]:animate-out',
+        'data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95',
+        props.class,
+      )"
+    />
+  </div>
+</template>

package/src/components/navigation-menu/index.ts

@@ -0,0 +1,18 @@
+/**
+ * Thanh điều hướng ngang, mỗi mục xổ ra một tấm nội dung — thứ PrimeVue gọi là
+ * `MegaMenu`.
+ *
+ * Khác `Menubar` ở chỗ nó KHÔNG phải menu lệnh: nội dung là link có tiêu đề và
+ * mô tả, mở bằng cách rê chuột chứ không phải bấm, và ARIA của nó là điều hướng
+ * chứ không phải `menubar`. Chỗ của nó là đầu trang giới thiệu, không phải
+ * trong màn quản trị.
+ */
+
+export { default as NavigationMenu } from './NavigationMenu.vue'
+export { default as NavigationMenuContent } from './NavigationMenuContent.vue'
+export { default as NavigationMenuIndicator } from './NavigationMenuIndicator.vue'
+export { default as NavigationMenuItem } from './NavigationMenuItem.vue'
+export { default as NavigationMenuLink } from './NavigationMenuLink.vue'
+export { default as NavigationMenuList } from './NavigationMenuList.vue'
+export { default as NavigationMenuTrigger } from './NavigationMenuTrigger.vue'
+export { default as NavigationMenuViewport } from './NavigationMenuViewport.vue'