{"id":328,"date":"2019-10-04T06:22:47","date_gmt":"2019-10-04T06:22:47","guid":{"rendered":"https:\/\/docs.theironnetwork.org\/reactify\/?page_id=328"},"modified":"2019-10-10T08:28:27","modified_gmt":"2019-10-10T08:28:27","slug":"adding-menu-component-in-different-layouts-2","status":"publish","type":"page","link":"https:\/\/docs.theironnetwork.org\/reactify\/adding-menu-component-in-different-layouts-2\/","title":{"rendered":"Adding Menu\/Component In Different Layouts"},"content":{"rendered":"\n

Adding a New Menu Element\/Component In SideBar Menu<\/h4>\n\n\n\n

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<\/strong> and mini sidebar<\/strong> layout.<\/p>\n\n\n\n

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

\/\/ 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
      }
   ]
}<\/pre>\n\n\n\n
Step 2:<\/strong> Now open src->lang->locales->en_US.js<\/code> file and add the newly created category under the module.exports<\/code>:<\/p>\n\n\n\n
module.exports = {
  \"sidebar.newmodules\" :\"new modules\", \/\/ Newly created category
  \"sidebar.app\": \"App\",
  ...<\/pre>\n\n\n\n
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<\/code> .<\/p>\n\n\n\n
Step 3: <\/strong>Opensrc->components->Sidebar->SidebarContent.js<\/code> file & search for the code <div className=\"rct-sidebar-nav\"><\/code> and add the new list component and make the changes explained in the screenshot given below:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Step 4: <\/strong>Go to src->routes<\/code> folder and create a folder named new-modules<\/code> inside it, then create a new file named index.js<\/code> inside the folder. We have created a dummy sample for you by adding the given code in the file:<\/p>\n\n\n\n
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>
      );
   }
}<\/pre>\n\n\n\n
Step 5. <\/strong>Go to src->components->AsyncComponent->AsyncComponent.js<\/code> file and create the component<\/p>\n\n\n\n
 const AsyncNewModulesComponent = Loadable({
      loader: () => import(\"Routes\/new-modules\"),
      loading: () => <RctPageLoader \/>,
});
 
export {
     AsyncEcommerceDashboardComponent,
     AsyncSaasDashboardComponent,
     ...
     AsyncNewModulesComponent \/\/ export new component 
};<\/pre>\n\n\n\n
Step 6:<\/strong> Open the file src->routes->_routerService.js<\/code> file and add the component like below:<\/p>\n\n\n\n
export default [
   ...
   \/\/ Added component
   {
      path: 'new-modules',
      component: NewList
   }
]
<\/pre>\n\n\n\n
Now you have to import the given component like:<\/p>\n\n\n\n
import NewList from 'Routes\/new-modules';<\/pre>\n\n\n\n
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:<\/p>\n\n\n\n
\"\"
Template with Newly Added Menu


<\/figcaption><\/figure>\n\n\n\n
Adding a New Menu Element\/Component In Horizontal Layout<\/h4>\n\n\n\n
You can follow the steps given below to add a new menu element in the horizontal layout.<\/p>\n\n\n\n
Step 1:<\/strong> Open src->components->HorizontalMenu->NavLinks.js<\/code> file. You need to add the new category items in the given code:<\/p>\n\n\n\n
\/\/ 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
      }
   ]
}
\u200c
<\/pre>\n\n\n\n
Step 2:<\/strong> You can follow the Step 2 only<\/strong> from the above described section Adding a new menu element\/component in Sidebar Menu<\/a> as both can share the same procedure.\u200c<\/p>\n\n\n\n
Step 3: <\/strong>Opensrc->components->HorizontalMenu->HorizontalMenu.js<\/code> file & search for the class  \"horizontal-menu\"<\/code> and add the new list component and make the changes explained in the screenshot given below:<\/p>\n\n\n\n
\"\"
Newly Added List<\/figcaption><\/figure>\n\n\n\n
Step 4: <\/strong>You can follow the Step 4, 5 & 6<\/strong> from the above described section Adding a new menu element\/component in Sidebar Menu<\/a> as both can share the same procedure.\u200c<\/p>\n\n\n\n
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:<\/p>\n\n\n\n
\"\"
Template with Newly Added Menu


<\/figcaption><\/figure>\n\n\n\n
Adding a New Menu Element\/Component In Agency Layout
<\/h4>\n\n\n\n
You can follow the steps given below to add a new menu element in the agency layout.\u200c<\/p>\n\n\n\n
Step 1: <\/strong>Open src->components->AgencyMenu->NavLinks.js<\/code> file. You need to add the new category items in the given code:<\/p>\n\n\n\n
\/\/ 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
      }
   ]
}<\/pre>\n\n\n\n
Step 2:<\/strong> You can follow the Step 2 only<\/strong> from the above described section Adding a new menu element\/component in Sidebar Menu<\/a> as both can share the same procedure.\u200c<\/p>\n\n\n\n
Step 3: <\/strong>Opensrc->components->AgencyMenu->AgencyMenu.js<\/code> file & search for the class  \"agency-menu\"<\/code> and add the new list component and make the changes explained in the screenshot given below:<\/p>\n\n\n\n
\"\"
Newly Added List<\/figcaption><\/figure>\n\n\n\n
Step 4: <\/strong>You can follow the Step 4, 5 & 6<\/strong> from the above described section Adding a new menu element\/component in Sidebar Menu<\/a> as both can share the same procedure.\u200c<\/p>\n\n\n\n
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:<\/p>\n\n\n\n
\"\"
Template with Newly Added Menu<\/figcaption><\/figure>\n\n\n\n

<\/p>\n
\n    
\n    \n                        <\/i>\n                    <\/a>\n        <\/span>\n<\/div>
\n    \n                        <\/i>\n                    <\/a>\n    <\/span>\n<\/div><\/div>\n\n","protected":false},"excerpt":{"rendered":"
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 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":6,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/docs.theironnetwork.org\/reactify\/wp-json\/wp\/v2\/pages\/328"}],"collection":[{"href":"https:\/\/docs.theironnetwork.org\/reactify\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/docs.theironnetwork.org\/reactify\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/docs.theironnetwork.org\/reactify\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.theironnetwork.org\/reactify\/wp-json\/wp\/v2\/comments?post=328"}],"version-history":[{"count":13,"href":"https:\/\/docs.theironnetwork.org\/reactify\/wp-json\/wp\/v2\/pages\/328\/revisions"}],"predecessor-version":[{"id":647,"href":"https:\/\/docs.theironnetwork.org\/reactify\/wp-json\/wp\/v2\/pages\/328\/revisions\/647"}],"wp:attachment":[{"href":"https:\/\/docs.theironnetwork.org\/reactify\/wp-json\/wp\/v2\/media?parent=328"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}