There are Numerous links in sidebar and if we write whole code in html then number of lines will increase by a lot. So to prevent that we have created a service file for the sidebar links so that we can loop through the array links that we have made in this data file and render our links accordingly.

You can find menu.ts on the following path:

Making changes in sidebar.

If you require to make any changes in the sidebar, you could follow the given instructions.

To add links in sidebar:

If you need to add or remove links in the sidebar, all you need to do is make changes in the menu.ts file.

For Example:

Lets say we want to change the previous sidebar to the new sidebar.

Previous Sidebar

New Sidebar

To achieve this we can add new object in menu.ts, where we want to add the new link. Here we want to add new link in between Dashboard and widget links so we will make the following changes.

{
  main_title: 'General'
},
{
  title: 'Dashboards',
  icon: 'home',
  type: 'sub',
  active: false,
  level: 1,
  badge: true,
  badge_value: "13",
  badge_color: 'primary',
  children: [
    { path: '/dashboard/default', title: 'default', type: 'link' },
    { path: '/dashboard/e-commerce', title: 'Ecommerce', type: 'link' },
    { path: '/dashboard/online-course', title: 'Online course', type: 'link' },
    { path: '/dashboard/crypto', title: 'Crypto', type: 'link' },
    { path: '/dashboard/social', title: 'Social', type: 'link' },
    { path: '/dashboard/nft', title: 'NFT', type: 'link' },
    { path: '/dashboard/school-management', title: 'School management', type: 'link' },
    { path: '/dashboard/pos', title: 'POS', type: 'link' },
    { path: '/dashboard/crm', title: 'CRM', type: 'link', badge: true, badge_color: 'success', badge_value: "New" },
    { path: '/dashboard/analytics', title: 'Analytics', type: 'link', badge: true, badge_color: 'success', badge_value: "New" },
    { path: '/dashboard/hr', title: 'HR', type: 'link', badge: true, badge_color: 'success', badge_value: "New" },
    { path: '/dashboard/projects', title: 'Projects', type: 'link', badge: true, badge_color: 'success', badge_value: "New" },
    { path: '/dashboard/logistics', title: 'Logistics', type: 'link', badge: true, badge_color: 'success', badge_value: "New" },
  ],
},
{
  title: 'New Link', 
  icon: 'blog', 
  type: 'sub', 
  active: true, 
  level: 1,
  children: [
    { 
      path:'/newLink/subLink1', 
      title:'New Sub Link 1', 
      type: 'link' 
    },
    { 
      path:'/newLink/subLink1', 
      title:'New Sub Link2', 
      type: 'link' 
    }
  ]
},
{
  title: 'Widgets',
  icon: 'widget',
  type: 'sub',
  active: false,
  level: 1,
  children: [
    { path: '/widgets/general', title: 'General', type: 'link' },
    { path: '/widgets/charts', title: 'Chart', type: 'link' },
  ],
},
                              

As you can see above, you will need add data in the predefined format. Title key will contain the text you need to display for the link. In the path key, you will need to add the path that you define in the router.

You can add icons before the link in ui in ui by giving svg icon name in icon key.

If the link contains sub links add type : 'sub', and if there are no sub links , just add type: 'link'

For Example: If you want to add a link without any sublinks then add the following code.

{
  title: 'File Manager',
  icon: 'file',
  type: 'link',
  path: '/file-manager',
  bookmark: true,
  level: 1
}

Note: Make sure that the path you enter in the json is same as the one that you have given in the router, or else error will be thrown as same path will not be found.

If you want to remove links from the sidebar:

As we added code in the above section to add new links in the sidebar. You simply need to remove the whole object to make it disappear from the sidebar.

For Example: We added the following code in the menu.ts file. If we want to remove the same then we will remove the object in the array of links in menu.ts.

{
  title: 'New Link', 
  icon: 'blog', 
  type: 'sub', 
  active: false, 
  level: 1,
  children: [
    { 
      path:'/newLink/subLink1', 
      title:'New Sub Link 1', 
      type: 'link' 
    },
    { 
      path:'/newLink/subLink1', 
      title:'New Sub Link2', 
      type: 'link' 
    }
  ]
}