In your NextJS-Typescript project, you can easily add menus to the sidebar by modifying the MENUITEMS array in the sidebar.tsx (shared/layout-components/sidebar/sidebar.tsx) file. The sidebar will dynamically display the menus based on the contents of this array.
Open the sidebar.tsx (shared/layout-components/sidebar/sidebar.tsx) file in your NextJS-Typescript project. This file contains the MENUITEMS array that defines the menus to be displayed in the sidebar.
Inside the MENUITEMS array, you can add your menu items using the following format:
{
menutitle: "Your Menu Title",
},
{
title: 'Your Component Title',
selected: false,
icon: 'icon-name',
type: 'link', // or 'sub', 'external', 'empty'
path: '/path-to-route', // Specify the route path for link type
active: false,
badge: 'badge-class', // (optional) Add a badge to the menu item
badgetxt: 'Badge Text', // (optional) Text to display in the badge
}
Inside the MENUITEMS array, you can add your menu items using the following format:
{
menutitle: "Your Menu Title",
},
{
title: 'Your Component Title',
selected: false,
icon: 'icon-name',
type: 'link', // or 'sub', 'external', 'empty'
active: false,
badge: 'badge-class', // (optional) Add a badge to the menu item
badgetxt: 'Badge Text', // (optional) Text to display in the badge
children: [
// (optional) Define child items for sub-menu type
{
path: '/child-path',
title: 'Child Menu Title',
type: 'link',
selected: false,
},
// Add more child items if needed
],
}
After adding your menu items, save the changes made to the sidebar.js (shared/layout-components/sidebar/sidebar.tsx) file.
The sidebar will now automatically display the added menu items based on the modifications you made in the MENUITEMS array.