Nextjs Routing System

We’ve created these dynamic routes, so the Sidebar component would not get too loaded with code. You will find all our demo routes in routes.js.

Legend FREE 

{ path: "/path/name", name: "Name Of the View", rtlName: "اسم العرض", icon: "icon name", layout: "/layout-path" },
  • path (path for your route - this will be seen in the browser url input - example /dashboard)
  • name (name of your route - this will appear in the Sidebar and Navbar components - example Dashboard)
  • rtlName (name of your route - this will appear in the Sidebar and Navbar components - example لوحة القيادة if rtlActive prop is set on the Sidebar and Navbar components)
  • icon (icon to be displayed alongside with links in Sidebar component - example fa fa-heart)
  • layout (path of the layout in which the View component you want to be rendered - in our template demo you only have to options: /admin and /rtl - but due to this routing system you can add more, for example /new-layout)

Legend PRO 

{path: "/path-name", name: "Name Of the View", rtlName: "اسم العرض", icon: ..., layout: "/layout-path"},
  • path (path for your route - this will be seen in the browser url input - example /dashboard)
  • name (name of your route - this will appear in the Sidebar and Header components - example لوحة القيادة on the RTL layout)
  • rtlName (name of your route - this will appear in the Sidebar and Header components - example Dashboard)
  • icon (icon to be displayed alongside with links in Sidebar component - example favorite or Favorite from @material-ui/icons)
  • layout (path of the layout in which the View component you want to be rendered - in our template demo you only have to options: /admin and /auth - but due to this routing system you can add more, for example /new-layout) 
{ collapse: true, name: "Name of the collapse group", rtlName: "اسم العرض", icon: ..., state: "string", views: [arrayOfRoutes]},
  • collapse (used to tell our demo app components this is a collapsible group - for components/Sidebar/Sidebar.js - you can only use it like so: collapse: true)
  • name (name of collapsible group that is displayed in components/Sidebar/Sidebar.js - example Forms)
  • rtlName (name of collapsible group that is displayed in components/Sidebar/Sidebar.js - example إستمارات, on the RTL layout)
  • state (name of the state used in components/Sidebar/Sidebar.js’s state to know which collapsible is active/collapsed - based on these the state of the components/Sidebar/Sidebar.js is created - exmaple pagesCollapse)
  • icon (icon to be displayed alonside the name of the collapsible group inside the Sidebar component - example favorite or Favorite from @material-ui/icons)
  • views (array of links that will be part of the collapsible group)
    arrayOfRoutes can be 
{ path: "/path-name", name: "Name Of the View", rtlName: "اسم العرض", mini: "NV", rtlMini: "ع", layout: "/layout-path" },
{ collapse: true, name: "Name of the collapse group", rtlName: "اسم العرض", mini: "NCG", rtlMini: "ر", state: "string", views: [...]},
The only difference for these, is that the icon is not anymore an `icon` name, it is mearly a text

Notice

For a better understanding, please take a look inside the file at hand, and also how the routes are rendered while the app si opened.

Because our routes are arrays of objects, and each route is an object, you can add what props you want in our routes and do what you want with them.

For example, if you want to “hide” a route (you want it to not be displayed in sidebar), you could add a prop like invisible: true and then in Sidebar add an if statement inside the map function of ours and do like this: 

if(prop.invisible) return null;

Or, simply, just do not add it inside the routes.js file.