Manage Sidebar Menus

The sidebar menu gets rendered through the JumboNavbar component and it offers a way to generate menus dynamically, even menus can be fetched and generated from a server side api call to support a secure way to provide the menu access.

Static Sidebar Menu Configuration

In this project, menu items used in the sidebar are defined statically using a helper function inside the following file /src/components/Sidebar/menu.items.ts

This function is used to return an array of sidebar menu items, including nested children, with labels that support internationalization via react-i18next.

import { useTranslation } from 'react-i18next';

export function getMenus() {
  const { t } = useTranslation();
  return [
    {
       label: t('sidebar.menu.home'),
      children: [
        {
          path: '/dashboards/misc',
          label: t('sidebar.menuItem.misc'),
          icon: 'misc',
        },
        ...
      ]
    }
    ...
    }
  ]
}

Types of Menu Item

There are three types of menu items:

1. Section Labels

2. Collapsible Menu Items

3. Nav Item

Section Labels

A section label can be used to group multiple collapsible menu items and nav items and can be defined with only two properties as below:

{
    label: "some label",
    children: [
        // array of collapsible or nav items
    ]
}

Collapsible Menu Items

A collapsible menu item can be used to group multiple nav items or other collapsible menu items. The collapsible menu item can have two additional properties associated with it as below:

{
    label: "some label",
    icon: "crypto",
    collapsible: true,
    children: [
        // array of collapsible or nav items
    ]
}

Nav Item

The nav item is the finally clickable item and linked with a route. So, it has additional property called path and can be defined as below:

{
    label: "some label",
    icon: "crypto",
    path: "/path-to-route",
}

Comparing Nav Item with Collapsible Menu Item, the Nav Item doesn't have collapsible and children property but have an additional property path instead.