Menu configuration

The navigation menu in Aeria UI is generated from a MenuSchema object that goes in app options. In it's most basic form, the menu schema is an array of strings matching route names. For example:

const menuSchema: MenuSchema = [
  '/dashboard/person',
  '/dashboard/user',
]

Menu entries however can become more complex as needed. They can be collapsed, have children entries, and have a callback to display a custom badge near it. Below is a menu schema making using of all these features:

const menuSchema: MenuSchema = [
  {
    collapsed: false,
    meta: {
      title: 'Config',
      icon: 'cog'
    },
    badge: async () => {
      return businessLogic()
    },
    children: [
      '/dashboard/user',
      '/dashboard/log',
    ]
  }
]

MenuSchema

type MenuNodeBase = Partial<RouteMeta> & {
  roles?: Array<string> | ((role: Array<string>) => boolean | Promise<boolean>)
  children?: Array<string | MenuNode>
  badge?: () => string | number extends infer ReturnType
    ? ReturnType | Promise<ReturnType>
    : never
}

type MenuNodeNamed = MenuNodeBase & {
  name?: string | Symbol
}

type MenuNodeCollapsible = MenuNodeBase & {
  collapsed: boolean | 'user'
  children: Array<string | MenuNode>
  meta: {
    title: string
    icon?: string
  }
}

type MenuNode = 
  | MenuNodeNamed
  | MenuNodeCollapsible

type MenuSchema = (
  | MenuNode
  | string
  | Array<string | MenuNode>
)[]

MenuNode

name (string | Symbol)?

A string or symbol representing a route name.

roles (Array<string> | ((role: Array<string>) => boolean | Promise<boolean>))?

Will make this menu entry visible only to roles specified by an array of strings, or by a custom callback.

badge (() => Promise<string | number>)?

This property specifies a callback whose result will be rendered inside a badge near the menu entry.

NOTE

The execution of this callback will be memoized, meaning it won't run more than once on subsequent re-renderizations.

collapsed (boolean | 'user')?

If set to true, this property will determine that the collapsible entry should be initially collapsed on page load. Otherwise it will appear uncollapsed.

children Array<string | MenuAdvancedChild>?

This property determines the route entries that will go inside the collapsible entry. Collapsible routes can recurse infinitely inside each other this way.

meta object?

This property determines the title and icon that should be displayed by the entry on the menu.