Adding Menu/Component In Different Layouts

Reactify provides you the ability to add new elements in the menu section of each layout. You can read the detailed documentation about adding the elements below.

Adding a New Menu Element/Component In SideBar Menu

You can follow the steps given below to add a new menu element in the sidebar of your template. This sidebar element is added by default in both your default and mini sidebar layout.

Step 1: Open src->components->Sidebar->NavLinks.js file. You need to add the new category items in the given code:

// sidebar nav links
export default {
   ...
   category6: [
      {
         "menu_title": "sidebar.imageCropper",
         "menu_icon": "zmdi zmdi-crop",
         "path": "/app/image-cropper",
         "child_routes": null
      }
      ...
   ],
   
   // Newly added category
   category7: [
      {
         "menu_title": "sidebar.newmodules",
         "menu_icon": "zmdi zmdi-crop",
         "path": "/app/new-modules",
         "child_routes": null
      }
   ]
}

Step 2: Now open src->lang->locales->en_US.js file and add the newly created category under the module.exports:

module.exports = {
	"sidebar.newmodules" :"new modules", // Newly created category
	"sidebar.app": "App",
	...

The example given above only add the new menu item in the english locale, if you are using any different locale for your template then you need to specify the newly created category in that locale file also. You can find different locale files under the folder src->lang->locales .

Step 3: Open src->components->Sidebar->SidebarContent.js file & search for the code <div className="rct-sidebar-nav"> and add the new list component and make the changes explained in the screenshot given below:

Newly Added List

Step 4: Go to src->routes folder and create a folder named new-modules inside it, then create a new file named index.js inside the folder. We have created a dummy sample for you by adding the given code in the file:

index.js

import React, { Component } from 'react';
import { Helmet } from "react-helmet";
// page title bar
import PageTitleBar from 'Components/PageTitleBar/PageTitleBar';

// intl messages
import IntlMessages from 'Util/IntlMessages';

export default class NewList extends Component {
	render() {
		return (
			<div className="blank-wrapper">
				<Helmet>
					<title>name page</title>
					<meta name="description" content="Reactify Blank Page" />
				</Helmet>
				<PageTitleBar title={<IntlMessages id="sidebar.newmodules" />} match={this.props.match} />
			</div>
		);
	}
}

Step 5. Go to src->components->AsyncComponent->AsyncComponent.js file and create the component

 const AsyncNewModulesComponent = Loadable({
      loader: () => import("Routes/new-modules"),
      loading: () => <RctPageLoader />,
});

export {
     AsyncEcommerceDashboardComponent,
     AsyncSaasDashboardComponent,
     ...
     AsyncNewModulesComponent // export new component 
};

Step 6: Open the file src->routes->_routerService.js file and add the component like below:

export default [
	...
	// Added component
	{
		path: 'new-modules',
		component: NewList
	}
]

Now you have to import the given component like:

import NewList from 'Routes/new-modules';

After following the steps explained above, open the browser window and you can see your newly added menu item in the template. Refer the example image below:

Template with Newly Added Menu

Adding a New Menu Element/Component In Horizontal Layout

You can follow the steps given below to add a new menu element in the horizontal layout.

Step 1: Open src->components->HorizontalMenu->NavLinks.js file. You need to add the new category items in the given code:

// horizontal menu nav links
export default {
   ...
   category6: [
      {
         "menu_title": "sidebar.imageCropper",
         "menu_icon": "zmdi zmdi-crop",
         "path": "/horizontal/image-cropper",
         "child_routes": null
      }
      ...
   ],
   
   // Newly added category
   category7: [
      {
         "menu_title": "sidebar.newmodules",
         "menu_icon": "zmdi zmdi-crop",
         "path": "/horizontal/new-modules",
         "child_routes": null
      }
   ]
}

Step 2: You can follow the Step 2 only from the above described section Adding a new menu element/component in Sidebar Menu as both can share the same procedure.

Step 3: Open src->components->HorizontalMenu->HorizontalMenu.js file & search for the class "horizontal-menu" and add the new list component and make the changes explained in the screenshot given below:

Newly Added List

Step 4: You can follow the Step 4, 5 & 6 from the above described section Adding a new menu element/component in Sidebar Menu as both can share the same procedure.

After following the steps explained above, open the browser window and you can see your newly added menu item in the template. Refer the example image below:

Template with Newly Added Menu

Adding a New Menu Element/Component In Agency Layout

You can follow the steps given below to add a new menu element in the agency layout.

Step 1: Open src->components->AgencyMenu->NavLinks.js file. You need to add the new category items in the given code:

// agency horizontal menu nav links
export default {
   ...
   category6: [
      {
         "menu_title": "sidebar.imageCropper",
         "menu_icon": "zmdi zmdi-crop",
         "path": "/image-cropper",
         "child_routes": null
      }
      ...
   ],
   
   // Newly added category
   category7: [
      {
         "menu_title": "sidebar.newmodules",
         "menu_icon": "zmdi zmdi-crop",
         "path": "/new-modules",
         "child_routes": null
      }
   ]
}

Step 2: You can follow the Step 2 only from the above described section Adding a new menu element/component in Sidebar Menu as both can share the same procedure.

Step 3: Open src->components->AgencyMenu->AgencyMenu.js file & search for the class "agency-menu" and add the new list component and make the changes explained in the screenshot given below:

Newly Added List

Step 4: You can follow the Step 4, 5 & 6 from the above described section Adding a new menu element/component in Sidebar Menu as both can share the same procedure.

After following the steps explained above, open the browser window and you can see your newly added menu item in the template. Refer the example image below:

Template with Newly Added Menu