@nuxt-customer-portal/ui 0.8.9 → 0.10.0

package/CHANGELOG.md

@@ -1,5 +1,40 @@
 # @nuxt-customer-portal/ui
 
+## 0.10.0
+
+### Minor Changes
+
+- 1235d0f: Let portal administrators upload separate desktop and mobile authentication backgrounds in Appearance settings. Add responsive image selection, single-image fallback, preview and removal controls, validated image uploads, and English/Dutch descriptions. Keep existing settings compatible. Position authentication forms near the top on mobile while preserving desktop positioning, with or without a background image.
+
+### Patch Changes
+
+- 1235d0f: Redirect the portal home route to `/dashboard` instead of showing the public landing page. Preserve dashboard authentication, onboarding, and saved homepage content. Send portal logout directly to `/login` instead of the home route, and remove the home back button from authentication pages.
+
+  Use a neutral welcome heading on the sign-in page in English and Dutch so it also welcomes first-time visitors.
+
+  Show translated email and password prompts instead of technical validation errors when sign-in fields are empty or missing.
+
+- Updated dependencies [f115496]
+  - @nuxt-customer-portal/core@0.10.0
+
+## 0.9.1
+
+### Patch Changes
+
+- @nuxt-customer-portal/core@0.9.1
+
+## 0.9.0
+
+### Minor Changes
+
+- 6696fd0: Add an opt-in unified sidebar with nested module navigation and keyboard-accessible collapsed flyouts. Include module subpages in global search, preserve standalone destinations, and place sidebar collapse controls in the footer. Enable the unified layout for SaaS Portal.
+
+### Patch Changes
+
+- Updated dependencies [936f0a2]
+- Updated dependencies [6696fd0]
+  - @nuxt-customer-portal/core@0.9.0
+
 ## 0.8.9
 
 ### Patch Changes

package/app/app.config.ts

@@ -3,6 +3,7 @@ const selectItem =
   'data-highlighted:not-data-disabled:before:bg-accented data-[state=checked]:before:bg-elevated data-[state=checked]:font-medium'
 
 export default defineAppConfig({
+  portal: { sidebarNavigation: false },
   ui: {
     button: {
       compoundVariants: [

package/app/components/AppHeader.vue

@@ -5,11 +5,13 @@ import { authClient } from '@nuxt-customer-portal/core/app/utils/auth-client'
 const props = withDefaults(
   defineProps<{
     showNavigation?: boolean
+    sidebarNavigation?: boolean
     brandName?: string
     brandTagline?: string
   }>(),
   {
     showNavigation: true,
+    sidebarNavigation: false,
     brandName: 'Nuxt Customer Portal',
     brandTagline: 'Customer workspace'
   }
@@ -66,7 +68,21 @@ const { currentUser, isAuthenticated, currentSession, myOrganizations, activeOrg
 
 const showOrgSwitcherModal = ref(false)
 const searchOpen = ref(false)
+// Register on the header so search remains available while its modal is unmounted.
+defineShortcuts({
+  meta_k: {
+    usingInput: true,
+    handler: () => {
+      headerMenuOpen.value = false
+      searchOpen.value = !searchOpen.value
+    }
+  }
+})
 const headerMenuOpen = ref(false)
+const openSearch = () => {
+  headerMenuOpen.value = false
+  searchOpen.value = true
+}
 
 const hasMultipleOrganizations = computed(() => {
   return myOrganizations.value && myOrganizations.value.length > 1
@@ -254,7 +270,7 @@ const stopImpersonating = async () => {
       </div>
     </template>
 
-    <nav v-if="showNavigation" class="hidden lg:flex flex-1 items-center justify-center gap-6">
+    <nav v-if="showNavigation && !sidebarNavigation" class="hidden lg:flex flex-1 items-center justify-center gap-6">
       <template v-for="module in moduleItems" :key="module.id">
         <NuxtLink
           :to="module.to"
@@ -272,7 +288,15 @@ const stopImpersonating = async () => {
 
     <template #right>
       <div class="hidden lg:flex items-center gap-3 ml-auto">
-        <UButton icon="i-lucide-search" color="neutral" variant="ghost" size="sm" square @click="searchOpen = true" />
+        <UButton
+          :aria-label="t('menu.search')"
+          icon="i-lucide-search"
+          color="neutral"
+          variant="ghost"
+          size="sm"
+          square
+          @click="openSearch"
+        />
         <ULocaleSelect
           v-if="availableLanguages.length > 1"
           v-model="currentLocale"
@@ -315,7 +339,7 @@ const stopImpersonating = async () => {
             variant="outline"
             size="md"
             class="min-h-11 justify-start"
-            @click="searchOpen = true"
+            @click="openSearch"
           />
           <ULocaleSelect
             v-if="availableLanguages.length > 1"
@@ -328,7 +352,13 @@ const stopImpersonating = async () => {
         </div>
       </div>
 
-      <nav v-if="showNavigation" :aria-label="t('menu.moduleNavigation')" class="space-y-5 p-5 pt-4">
+      <PortalSidebarNavigation
+        v-if="showNavigation && sidebarNavigation"
+        :collapsed="false"
+        class="p-4"
+        @navigate="headerMenuOpen = false"
+      />
+      <nav v-else-if="showNavigation" :aria-label="t('menu.moduleNavigation')" class="space-y-5 p-5 pt-4">
         <section v-for="module in moduleNavigationGroups" :key="module.id" class="space-y-1">
           <button
             v-if="module.menuItems.length > 1"
@@ -425,8 +455,13 @@ const stopImpersonating = async () => {
 
   <!-- Dashboard Search Modal -->
   <UDashboardSearch
+    v-if="searchOpen"
     v-model:open="searchOpen"
+    shortcut=""
     :groups="searchGroups"
+    :title="t('menu.search')"
+    :description="t('menu.searchDescription')"
+    :placeholder="t('menu.searchPages')"
     :fuse="{
       fuseOptions: {
         ignoreLocation: true,

package/app/components/AppUserMenu.vue

@@ -26,7 +26,7 @@ const signOut = async () => {
   await authClient.signOut()
   userStore.clearUserData()
   emit('navigate')
-  await navigateTo('/')
+  await navigateTo('/login', { replace: true })
 }
 
 const userMenuItems = computed(() => {

package/app/components/NotificationsSlideover.vue

@@ -4,7 +4,9 @@ import type { Notification } from '@nuxt-customer-portal/core/app/types'
 
 const { isNotificationsSlideoverOpen } = useDashboard()
 
-const { data: notifications } = await useFetch<Notification[]>('/api/notifications')
+const { data: notifications } = await useFetch<Notification[], import('#app').NuxtError<unknown>, string>(
+  '/api/notifications'
+)
 </script>
 
 <template>

package/app/components/PortalSidebarNavigation.vue

@@ -0,0 +1,206 @@
+<!-- Hallmark · component review: P4 H4 E4 S4 R4 V4 -->
+<script setup lang="ts">
+const props = defineProps<{ collapsed: boolean }>()
+const emit = defineEmits<{ navigate: [] }>()
+const { t } = useI18n()
+const route = useRoute()
+const mobileOpen = ref(false)
+const { moduleNavigationGroups, activeModuleId } = useModuleNavigation(mobileOpen)
+const { links } = useNavigationLinks(mobileOpen)
+const expanded = ref<string[]>([])
+const flyout = ref('')
+const panel = ref<HTMLElement[]>([])
+let returnFocus: HTMLElement | undefined
+let leaveTimer: ReturnType<typeof setTimeout> | undefined
+
+const standalone = computed(() => {
+  const destinations = new Set(
+    moduleNavigationGroups.value.flatMap((module) => [module.to, ...module.menuItems.map((item) => item.to)])
+  )
+  return links.value.flat().filter((item) => !destinations.has(String(item.to)))
+})
+watch(
+  activeModuleId,
+  (id) => {
+    if (id && !expanded.value.includes(id)) {
+      expanded.value.push(id)
+    }
+  },
+  { immediate: true }
+)
+watch(
+  () => route.fullPath,
+  () => {
+    flyout.value = ''
+    if (activeModuleId.value && !expanded.value.includes(activeModuleId.value)) {
+      expanded.value.push(activeModuleId.value)
+    }
+    emit('navigate')
+  }
+)
+watch(
+  () => props.collapsed,
+  () => {
+    flyout.value = ''
+  }
+)
+function toggle(id: string) {
+  expanded.value = expanded.value.includes(id)
+    ? expanded.value.filter((value) => value !== id)
+    : [...expanded.value, id]
+}
+function show(id: string) {
+  clearTimeout(leaveTimer)
+  flyout.value = id
+}
+function leave() {
+  clearTimeout(leaveTimer)
+  leaveTimer = setTimeout(() => {
+    if (!panel.value.some((element) => element?.contains(document.activeElement))) {
+      flyout.value = ''
+    }
+  }, 180)
+}
+function closeFlyout() {
+  flyout.value = ''
+  returnFocus?.focus()
+  returnFocus = undefined
+}
+async function enter(id: string, event: Event) {
+  returnFocus = event.currentTarget instanceof HTMLElement ? event.currentTarget : undefined
+  show(id)
+  await nextTick()
+  panel.value
+    .find((element) => element?.dataset.module === id)
+    ?.querySelector<HTMLElement>('a[href]')
+    ?.focus()
+}
+onBeforeUnmount(() => clearTimeout(leaveTimer))
+const badgeProps = (badge: (typeof moduleNavigationGroups.value)[number]['badge']) =>
+  typeof badge === 'object' ? badge : { label: badge }
+</script>
+
+<template>
+  <nav :aria-label="t('menu.moduleNavigation')" class="space-y-1" data-portal-sidebar>
+    <div v-for="module in moduleNavigationGroups" :key="module.id">
+      <template
+        v-if="
+          module.menuItems.length > 1 || (module.menuItems.length === 1 && module.menuItems[0]?.label !== module.label)
+        "
+      >
+        <UPopover
+          v-if="collapsed"
+          :open="flyout === module.id"
+          :content="{
+            side: 'right',
+            align: 'start',
+            sideOffset: 12,
+            collisionPadding: 12,
+            onOpenAutoFocus: (event: Event) => event.preventDefault()
+          }"
+          :ui="{ content: 'bg-default ring-1 ring-default shadow-lg' }"
+          @update:open="flyout = $event ? module.id : ''"
+        >
+          <template #anchor>
+            <UButton
+              :icon="module.icon"
+              :aria-label="module.label"
+              aria-haspopup="dialog"
+              :aria-expanded="flyout === module.id"
+              :color="module.id === activeModuleId ? 'primary' : 'neutral'"
+              variant="ghost"
+              class="min-h-11 w-full justify-center rounded-md"
+              @click="enter(module.id, $event)"
+              @pointerenter="show(module.id)"
+              @pointerleave="leave"
+              @keydown.down.prevent="enter(module.id, $event)"
+              @keydown.right.prevent="enter(module.id, $event)"
+            />
+          </template>
+          <template #content>
+            <div
+              ref="panel"
+              :data-module="module.id"
+              class="w-64 max-w-[calc(100vw-6rem)] p-2"
+              @pointerenter="show(module.id)"
+              @pointerleave="leave"
+              @focusout="leave"
+              @keydown.esc.prevent.stop="closeFlyout"
+            >
+              <div class="px-3 py-2 text-sm font-semibold text-highlighted">{{ module.label }}</div>
+              <UNavigationMenu
+                :items="module.menuItems"
+                orientation="vertical"
+                :ui="{ link: 'min-h-11 rounded-md' }"
+                @click="flyout = ''"
+              />
+            </div>
+          </template>
+        </UPopover>
+        <template v-else>
+          <UButton
+            :icon="module.icon"
+            :color="module.id === activeModuleId ? 'primary' : 'neutral'"
+            variant="ghost"
+            class="min-h-11 w-full justify-start rounded-md px-3"
+            :aria-expanded="expanded.includes(module.id)"
+            :aria-controls="`sidebar-module-${module.id}`"
+            @click="toggle(module.id)"
+          >
+            <span class="min-w-0 flex-1 truncate text-left">{{ module.label }}</span>
+            <UBadge v-if="module.badge" v-bind="badgeProps(module.badge)" />
+            <UIcon
+              name="i-lucide-chevron-down"
+              class="size-4 shrink-0"
+              :class="expanded.includes(module.id) ? 'rotate-180' : ''"
+            />
+          </UButton>
+          <UNavigationMenu
+            v-if="expanded.includes(module.id)"
+            :id="`sidebar-module-${module.id}`"
+            :items="module.menuItems"
+            orientation="vertical"
+            class="ml-5 my-1 border-l border-default pl-2"
+            :ui="{ link: 'min-h-10 rounded-md' }"
+          />
+        </template>
+      </template>
+      <UTooltip v-else :text="module.label" :disabled="!collapsed" :content="{ side: 'right' }">
+        <UButton
+          :to="module.menuItems[0]?.to ?? module.to"
+          :icon="module.icon"
+          :label="collapsed ? undefined : module.label"
+          :aria-label="module.label"
+          :color="module.id === activeModuleId ? 'primary' : 'neutral'"
+          variant="ghost"
+          class="min-h-11 w-full rounded-md px-3"
+          :class="collapsed ? 'justify-center' : 'justify-start'"
+          @click="emit('navigate')"
+        >
+          <template v-if="!collapsed && (module.menuItems[0]?.badge ?? module.badge)" #trailing>
+            <UBadge v-bind="badgeProps(module.menuItems[0]?.badge ?? module.badge)" />
+          </template>
+        </UButton>
+      </UTooltip>
+    </div>
+    <UTooltip
+      v-for="item in standalone"
+      :key="String(item.to)"
+      :text="item.label"
+      :disabled="!collapsed"
+      :content="{ side: 'right' }"
+    >
+      <UButton
+        :to="item.to"
+        :icon="item.icon"
+        :label="collapsed ? undefined : item.label"
+        :aria-label="item.label"
+        :color="route.path === item.to ? 'primary' : 'neutral'"
+        variant="ghost"
+        class="min-h-11 w-full rounded-md px-3"
+        :class="collapsed ? 'justify-center' : 'justify-start'"
+        @click="emit('navigate')"
+      />
+    </UTooltip>
+  </nav>
+</template>

package/app/composables/useInvitationManagement.ts

@@ -1,5 +1,6 @@
 export const useInvitationManagement = () => ({
-  changeRole: (endpoint: string, role: string) => $fetch(endpoint, { method: 'PATCH', body: { role } }),
-  resend: (endpoint: string) => $fetch(`${endpoint}/resend`, { method: 'POST' }),
-  revoke: (endpoint: string) => $fetch(endpoint, { method: 'PATCH', body: { status: 'canceled' } })
+  changeRole: (endpoint: string, role: string) =>
+    $fetch<unknown, string>(endpoint, { method: 'PATCH', body: { role } }),
+  resend: (endpoint: string) => $fetch<unknown, string>(`${endpoint}/resend`, { method: 'POST' }),
+  revoke: (endpoint: string) => $fetch<unknown, string>(endpoint, { method: 'PATCH', body: { status: 'canceled' } })
 })

package/app/composables/useModuleNavigation.ts

@@ -111,6 +111,7 @@ export const useModuleNavigation = (sidebarOpen?: Ref<boolean>) => {
         )
         .sort((a, b) => (a.order ?? 100) - (b.order ?? 100))
         .map((item) => ({
+          id: item.id,
           label: t(item.labelKey),
           icon: item.icon,
           to: item.to,

package/app/composables/useNavigationLinks.ts

@@ -1,4 +1,5 @@
 import type { CommandPaletteGroup, CommandPaletteItem, NavigationMenuItem } from '@nuxt/ui'
+import { buildNavigationSearchGroups } from '../utils/navigation-search'
 import type { PortalAudience } from '@nuxt-customer-portal/core/shared/types/feature'
 
 const hasAudience = (
@@ -45,6 +46,7 @@ export const useNavigationLinks = (sidebarOpen: Ref<boolean>) => {
   const { t } = useI18n()
   const route = useRoute()
   const { navigation } = usePortalFeatures()
+  const { moduleNavigationGroups } = useModuleNavigation(sidebarOpen)
   const {
     isAuthenticated,
     isSystemAdmin,
@@ -81,18 +83,9 @@ export const useNavigationLinks = (sidebarOpen: Ref<boolean>) => {
     }))
   ])
 
-  const searchGroups = computed<CommandPaletteGroup<CommandPaletteItem>[]>(() => [
-    {
-      id: 'navigation',
-      label: t('menu.search'),
-      items: visibleItems.value.map((item) => ({
-        id: item.id,
-        label: t(item.labelKey),
-        icon: item.icon,
-        to: item.to
-      }))
-    }
-  ])
+  const searchGroups = computed<CommandPaletteGroup<CommandPaletteItem>[]>(() =>
+    buildNavigationSearchGroups(moduleNavigationGroups.value, links.value.flat(), t('menu.search'))
+  )
 
   return { links, searchGroups }
 }

package/app/layouts/auth.vue

@@ -1,22 +1,21 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <script setup lang="ts">
+import { resolveAuthBackgrounds, type AuthBackgroundBranding } from '../utils/auth-background'
+
 const route = useRoute()
 const { t } = useI18n()
 const bootstrap = useState<{ adminExists?: boolean; completed?: boolean } | null>('portal-bootstrap-state', () => null)
+const settings = useState<{ branding?: AuthBackgroundBranding } | null>('portal-runtime-settings', () => null)
+const backgrounds = computed(() => resolveAuthBackgrounds(settings.value?.branding))
 </script>
 
 <template>
-  <div class="auth-shell h-screen flex items-center justify-center px-4">
-    <UButton
-      icon="i-lucide-chevron-left"
-      to="/"
-      size="xl"
-      color="neutral"
-      variant="subtle"
-      class="auth-back-button absolute left-8 top-8 rounded-full z-10"
-    />
-
-    <UPageCard variant="subtle" class="max-w-sm w-full">
+  <div class="auth-shell" :class="{ 'auth-shell--illustrated': backgrounds.desktop }">
+    <picture v-if="backgrounds.desktop" class="auth-background" aria-hidden="true">
+      <source media="(max-width: 1023px)" :srcset="backgrounds.mobile" />
+      <img :src="backgrounds.desktop" alt="" fetchpriority="high" decoding="async" />
+    </picture>
+    <UPageCard variant="subtle" class="auth-card relative w-full max-w-sm shrink-0">
       <UAlert
         v-if="route.path === '/signup' && bootstrap && !bootstrap.adminExists"
         class="mb-5"
@@ -30,3 +29,50 @@ const bootstrap = useState<{ adminExists?: boolean; completed?: boolean } | null
     </UPageCard>
   </div>
 </template>
+
+<style scoped>
+.auth-shell {
+  position: relative;
+  isolation: isolate;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100dvh;
+  padding: max(1.5rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right))
+    max(1.5rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
+}
+.auth-background {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  overflow: hidden;
+  pointer-events: none;
+}
+.auth-background img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center bottom;
+}
+.auth-card {
+  z-index: 1;
+}
+.auth-shell--illustrated .auth-card {
+  background: var(--ui-bg-elevated);
+  box-shadow: 0 1.5rem 4.5rem color-mix(in srgb, var(--ui-text) 12%, transparent);
+}
+@media (max-width: 1023px) {
+  .auth-shell {
+    align-items: flex-start;
+  }
+}
+@media (min-width: 1024px) {
+  .auth-shell--illustrated {
+    justify-content: flex-start;
+    padding-inline: clamp(3rem, 12vw, 12rem);
+  }
+  .auth-background img {
+    object-position: right center;
+  }
+}
+</style>

package/app/layouts/default.vue

@@ -5,6 +5,8 @@ const toast = useToast()
 const { t } = useI18n()
 const open = ref(false)
 const sidebarCollapsed = ref(false)
+const appConfig = useAppConfig()
+const unifiedNavigation = computed(() => appConfig.portal.sidebarNavigation)
 const showFooter = computed(() => route.meta?.public === true)
 
 const { activeModule, activeModuleMenuItems } = useModuleNavigation(open)
@@ -45,7 +47,7 @@ onMounted(async () => {
     <!-- AppHeader - fixed at top -->
     <div class="fixed left-0 right-0 z-50" style="top: var(--portal-top-bar-height, 0px)">
       <div class="mx-auto w-full max-w-[1600px] px-4">
-        <AppHeader />
+        <AppHeader :sidebar-navigation="unifiedNavigation" />
       </div>
     </div>
 
@@ -65,37 +67,48 @@ onMounted(async () => {
         :default-size="18"
         :min-size="18"
         :max-size="24"
-        class="min-w-72 bg-elevated/25 lg:pb-12 data-[collapsed=true]:min-w-16"
-        :ui="{ footer: 'lg:border-t lg:border-default' }"
+        class="min-w-72 bg-elevated/25 data-[collapsed=true]:min-w-16"
+        :class="unifiedNavigation ? '' : 'lg:pb-12'"
+        :ui="{ footer: 'border-t border-default' }"
       >
         <template #header="{ collapsed }">
-          <div v-if="activeModule && !collapsed" class="flex min-w-0 items-center gap-2 px-2 text-sm font-semibold">
+          <div
+            v-if="activeModule && !collapsed && !unifiedNavigation"
+            class="flex min-w-0 items-center gap-2 px-2 text-sm font-semibold"
+          >
             <UIcon v-if="activeModule.icon" :name="activeModule.icon" class="size-4 shrink-0 text-primary" />
             <span class="truncate">{{ activeModule.label }}</span>
           </div>
         </template>
-        <template #default="{ collapsed, collapse }">
-          <div class="flex items-center pt-3 pb-1" :class="collapsed ? 'justify-center' : 'justify-between px-2.5'">
-            <span v-if="!collapsed && activeModule" class="text-xs font-semibold uppercase text-muted">
+        <template #default="{ collapsed }">
+          <div v-if="!unifiedNavigation && !collapsed && activeModule" class="flex items-center px-2.5 pt-3 pb-1">
+            <span class="text-xs font-semibold uppercase text-muted">
               {{ activeModule.label }}
             </span>
+          </div>
+          <PortalSidebarNavigation v-if="unifiedNavigation" :collapsed="collapsed" @navigate="open = false" />
+          <UNavigationMenu
+            v-else
+            :collapsed="collapsed"
+            :items="activeModuleMenuItems"
+            orientation="vertical"
+            tooltip
+            popover
+          />
+        </template>
+        <template #footer="{ collapsed, collapse }">
+          <div class="flex w-full py-2" :class="collapsed ? 'justify-center' : 'justify-end'">
             <UButton
               :icon="collapsed ? 'i-lucide-panel-left-open' : 'i-lucide-panel-left-close'"
               color="neutral"
               variant="ghost"
-              size="xs"
+              size="sm"
+              class="min-h-11 min-w-11"
               :aria-label="t(collapsed ? 'common.expandSidebar' : 'common.collapseSidebar')"
               :title="t(collapsed ? 'common.expandSidebar' : 'common.collapseSidebar')"
               @click="collapse(!collapsed)"
             />
           </div>
-          <UNavigationMenu
-            :collapsed="collapsed"
-            :items="activeModuleMenuItems"
-            orientation="vertical"
-            tooltip
-            popover
-          />
         </template>
       </UDashboardSidebar>
 

package/app/utils/auth-background.ts

@@ -0,0 +1,11 @@
+export interface AuthBackgroundBranding {
+  authBackgroundDesktop?: string
+  authBackgroundMobile?: string
+}
+
+export function resolveAuthBackgrounds(branding?: AuthBackgroundBranding | null) {
+  return {
+    desktop: branding?.authBackgroundDesktop || branding?.authBackgroundMobile || '',
+    mobile: branding?.authBackgroundMobile || branding?.authBackgroundDesktop || ''
+  }
+}

package/app/utils/navigation-search.ts

@@ -0,0 +1,35 @@
+interface Destination {
+  id?: string
+  label?: string
+  icon?: string
+  to?: unknown
+}
+interface NavigationGroup extends Destination {
+  id: string
+  menuItems: Destination[]
+}
+
+/** Search the same permission-filtered destinations shown by the module menus. */
+export const buildNavigationSearchGroups = (
+  modules: NavigationGroup[],
+  standalone: Destination[],
+  fallbackLabel: string
+) => {
+  const seen = new Set<string>()
+  const items = (destinations: Destination[], suffix?: string) =>
+    destinations.flatMap((item) => {
+      if (typeof item.to !== 'string' || seen.has(item.to)) {
+        return []
+      }
+      seen.add(item.to)
+      return [{ id: item.to, label: item.label, icon: item.icon, to: item.to, suffix }]
+    })
+  const groups = modules.map((module) => ({
+    id: module.id,
+    label: module.label,
+    items: items([...module.menuItems, module], module.label)
+  }))
+  return [...groups, { id: 'navigation', label: fallbackLabel, items: items(standalone) }].filter(
+    (group) => group.items.length
+  )
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxt-customer-portal/ui",
-  "version": "0.8.9",
+  "version": "0.10.0",
   "license": "MIT",
   "homepage": "https://nuxt-customer-portal.com",
   "repository": {
@@ -39,7 +39,7 @@
     "remark-parse": "^11.0.0",
     "unified": "^11.0.5",
     "zod": "^4.4.3",
-    "@nuxt-customer-portal/core": "^0.8.9"
+    "@nuxt-customer-portal/core": "^0.10.0"
   },
   "peerDependencies": {
     "nuxt": "^4.5.1",

package/portal.manifest.mjs

@@ -1,6 +1,6 @@
 export default {
   id: 'ui',
-  version: '0.8.9',
+  version: '0.10.0',
   source: '@nuxt-customer-portal/ui',
   dependsOn: ['core']
 }