Add New Route

Adding a new menu in the Hipster is a cup of cake. You don't have to add the menu separately for horizontal layouts and vertical layouts. You simply have to add a new menu to a single file and the menu will be added to all the layouts automatically.

Steps to add a new menu:-

1. Go to the file with the path: -

src/pages/routesConfig.js

2. Adding a group of menu's:-

If you want to add a group of menus, Just add a new object in the above-said file with the following properties as shown below-

const routesConfig = [
...,
  {
    id: 'new-group',
    title: 'Gropup Name',
    messageId: 'sidebar.app.newGroup',
    type: 'group',
    children:[...]
  }
]

The children's property of a group contains objects as shown below.

const routesConfig = [
...,
  {
    id: 'new-group',
    title: 'Gropup Name',
    messageId: 'sidebar.app.newGroup',
    type: 'group',
    children: [
      {
        id: 'new-menu',
        title: 'New Menu',
        messageId: 'sidebar.app.dashboard.newMenu',
        type: 'item',
        icon: 'menu_icon',
        url: '/new-group/new-menu',
      },
      ...
    ],
  },
];

3. Adding Collapse type Menu:-

To add a collapse type menu, go to the 'routesConfig' file (path given in step 1) and add a new object to the 'routesConfig' array. The new object show look like this:-

const routesConfig = [
...,
  {
    id: 'new-group',
    title: 'Gropup Name',
    messageId: 'sidebar.app.newGroup',
    type: 'collapse',
    children:[...]
  }
]

4. Adding a menu item:-

Adding a menu item is very easy, You just have to add an object in the 'routesConfig' array in the 'routesConfig' file (path given in step 1). The Item object should look contain the following properties as shown in the screenshot shown below.

const routesConfig = [
...,
  {
    id: 'new-group',
    title: 'Gropup Name',
    messageId: 'sidebar.app.newGroup',
    type: 'collapse',
    children: [
      {
        id: 'new-menu',
        title: 'New Menu',
        messageId: 'sidebar.app.dashboard.newMenu',
        type: 'item',
        icon: 'menu_icon',
        url: '/new-group/new-menu',
      },
      ...
    ],
  },
];

In the nutshell, You just have to add an object in order to array a new menu. The object contains a property named 'type' which can have three values i.e. 'group', 'collapse', and 'item'. You just have to pass the correct value to this 'type' property as per the type of menu you want to add. All other properties in the object remain the same.