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

You can find menu.json on the following path: "data/menu.js"

Next js provides inbuilt functionality for routing. We just need to create files in pages folder and it will automatically create routes based on the names of those files.

Using this functionality of Next.js we have created our navbar. To reduce the html code we have created an array in a separate js file and looped through that array to create the navigation bar. You can have a look at that the format in which the array has been created, it has been provided below.

                               
const MainNavMenuItems = [
  {
    title: "HOME",
    icon: ,
    type: "sub",
    children: [
      {
        path: "/home/slider-filter-search",
        title: "Slider Filter Search",
        type: "link",
      },
      {
        path: "/home/slider-filter-search",
        title: "Slider Filter Search",
        type: "link",
      }]
   }
]
   
                                                               

If you need to modify anything in the already made navbar you have to make changes in this file data/menu.js.

Adding new Links

Lets say you want to add a new link in the navigation bar, then you can do that by following the below given steps.

Step 1: add a new object in the array of navlinks containing the title,icon,type and children (if any) as the keys to that object.

step 2: Create a new page in the pages folder and provide the path in the menu.js file with that same name as the file.

Make sure that you provide the proper path in the menu.js file or else page won't render as the website won't be able to find the correct page for that path.