Navigation Config

We form our navigation structure as array of objects & render it into UI eventually. You can change or customize the app navigation very easily by accessing src/configs/navigation.config/index.ts

Here is the type for a single menu item

export type HorizontalMenuMeta = {
    layout: 'default'
} | {
    layout: 'columns'
    showColumnTitle?: boolean
    columns: 1 | 2 | 3 | 4 | 5
} | {
    layout: 'tabs'
    columns: 1 | 2 | 3 | 4 | 5
}

export interface NavigationTree {
    key: string
    path: string
    isExternalLink?: boolean
    title: string
    translateKey: string
    icon: string
    type: 'title' | 'collapse' | 'item'
    authority: string[]
    subMenu: NavigationTree[]
    description?: string
    meta?: {
        horizontalMenu?: HorizontalMenuMeta
        description?: {
            translateKey: string
            label: string
        }
    }
}

propertiesDescriptionTypeDefault
keyAn key that match with the route for highlighting purposestring-
pathAn URL that this menu item link tostring-
isExternalLinkWhether to open link in new tab upon clickboolean-
titleRendered text of this menu itemstring-
translateKeyTranslate key to translate the rendered text in menu item, fallback to title if empty or invalidstring-
iconRender icon in menu item, string value must tally with object key in navigation-icon.config.tsxstring-
typeTo define the type of current menu item'title' | 'collapse' | 'item'-
authorityDisplay menu items to users who have the roles given, there will be no access block if the this field is undefine or empty arraystring[]-
subMenuWhether have child in this menu item, it will render a menu group under this menu item, if the type is 'title' or 'collapse', this field accept properties within this tablenavigationConfig[]-
metaThis is an optional configuration field for navigation. It can include additional information that's only needed in specific use cases{ horizontalMenu?: HorizontalMenuMeta description?: { translateKey: string label: string } }-
meta.horizontalMenuFurther configuration for horizontal menu, e.g layout, columns & etc.{ layout: 'default' } | { layout: 'columns' showColumnTitle?: boolean columns: 1 | 2 | 3 | 4 | 5 } | { layout: 'tabs' columns: 1 | 2 | 3 | 4 | 5 }-
meta.descriptionDescription of the page, description only available when themeConfig.layout.type is 'contentOverlay'navigationConfig[]-

An example of structured navigation config

const navigationConfig = [
    {
        key: 'uiComponent',
        path: '',
        title: 'Ui Component',
        translateKey: 'nav.uiComponents',
        icon: 'uiComponents',
        type: 'title',
        authority: ['admin', 'user'],
        /** We can define mnu config here, if we are using horizontal menu */
        meta: {
            horizontalMenu: {
                layout: 'columns',
                columns: 4
            }
        },
        subMenu: [
            {
                key: 'uiComponent.common',
                path: '',
                title: 'Common',
                translateKey: 'nav.uiComponentsCommon.common',
                icon: 'common',
                type: 'collapse',
                authority: ['admin', 'user'],
                subMenu: [
                    {
                        key: 'uiComponent.common.button',
                        path: '/button',
                        title: 'Button',
                        translateKey: 'nav.uiComponentsCommon.button',
                        icon: '',
                        type: 'item',
                        authority: ['admin', 'user'],
                        subMenu: []
                    },
                    {
                        key: 'uiComponent.common.typography',
                        path: '/typography',
                        title: 'Typography',
                        translateKey: 'nav.uiComponentsCommon.typography',
                        icon: '',
                        type: 'item',
                        authority: ['admin', 'user'],
                        subMenu: []
                    }
                ]
            }
        ]
    }
]
Configuring navigation icon

Navigation icon configuration placed on seperate file in src/configs/navigation-icon.config.tsx

In the above example, we use string value uiComponents in the icon field, we must then use this value in navigation-icon.config.ts to define the icon for the callout.

First, import the icon you want from react-icons

import { FaBeer } from 'react-icons/fa'

const navigationIcon = {}

Set the value used in icon field as & the imported icon component as value

import { FaBeer } from 'react-icons/fa'

const navigationIcon = {
    uiComponents: <FaBeer />
}

Now the corresponding menu item will render FaBeer as the menu icon.