SideMenu Guide

Sidemenu Layout Structure

How to Add Menus to Sidebar.

In React-Typescript project, it can be easy to add menus to the sidebar by modifying the MenuItems array in the sidemenudata.tsx (src\common\sidemenudata.tsx) file. The sidebar will dynamically display the menus based on the contents of this array. below are the steps as follows

Steps:
Open sidemenudata.tsx File:

Open the sidemenudata.tsx (src\common\sidemenudata.tsx) file in React-Typescript project. This file contains the MenuItems array that defines the menus to be displayed in the sidebar.

To add the parent Menu Items:

Inside the MenuItems array, you can add your menu items using the following format:


	{ id: 1, 
		menutitle: side menu group name,
		Items: [
	             { id: 2, 
		            path: your component path,
		            icon: your menu dispaly icon, 
		            title: side menu title, 
		            type: "link", {if it is a single component mention with link }
		            active: false, 
		            selected: false 
	             }
	           ]
},
To add the children to Menu Items:

Inside the MenuItems array, you can add custome nested menu items using the following format:


	{ menutitle: "LEVELS", 
	  Items: [
	         { icon: Nested icon,
				 title: "Nested Menu",
				 type: "sub", {it having childrencomponent, so name it as sub}
				 active: false,
				 selected: false,
				 children: [
			                { title: "Nested-1",
						      path: your path, 
						      type: "link", {it having no children component, so name it as link}
						      active: false,
						      selected: false
						     },

			               { title: "Nested-2",
				             type: "sub", {it having childrencomponent, so name it as sub}
					         active: false,
					         selected: false, 
					         children: [
					                    { type: "link", {it having no children component, so name it as link}
								         path: your path,
								         active: false, 
								         selected: false,
								         title: "Nested-2-1"
								        },
				                      ]
			                },
		                  ]
	         },
           ]
     },
  • menutitle: The display name of the menu.
  • title: The display name of the component.
  • selected: Set to true if this menu is currently selected.
  • icon: The icon to display next to the menu.
  • type: Specify the type of the menu item (link, sub, mega-menu, external, empty).
  • path: Specify the route path for link type menu.
  • Menusub: Set to true for sub-menu or mega-menu types.
  • active: Set to true to mark this menu as active.
  • badgeClass (optional): CSS class for the badge.
  • badgeValue (optional): Text to display in the badge.
  • children: Define an array of child menu items for sub-menu or mega-menu type.
Save the Changes:

After adding your menu items, save the changes made to the sidemenudata.tsx (src\common\sidemenudata.tsx) file.

View Sidebar Changes:

The sidebar will now automatically display the added menu items based on the modifications you made in the MenuItems array.

By following these steps, you can easily customize and add menus to the sidebar of your React-Typescript project. The menus will be dynamically generated based on the content of the MenuItems array in the sidemenudata.tsx file.