Material-UI 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 src/routes.js.

Legend FREE 

{
  upgradeToPro: [true|false],
  href: "http|https-link",
  name: "ComponentName",
  icon: ["iconClassName"|IconFunction],
  iconColor: ["Primary"|"PrimaryLight"|"Error"|"ErrorLight"|"Warning"|"WarningLight"|"Info"|"InfoLight"]
},
  • upgradeToPro: this is used to specify that the given link, needs to have an absolute position at the end of the Sidebar component
  • href: the link where you want your user to be redirected on click
  • name: the text of the link to be displayed inside the Sidebar component
  • icon: it can either be an icon from the Nucleo icons package (icon: "ni ni-air-baloon"), the Font Awesome icons package (e.g. icon: "fa fa-heart"), or it can be an icon from the @material-ui/icons package (e.g. import Person from "@material-ui/icons/Person";, and then use it like icon: Person)
  • iconColor: the color of the above icon, it can only be one of Primary,PrimaryLight,Error,ErrorLight,Warning,WarningLight,Info,InfoLight 
{
  path: "/path/for/component-name",
  name: "ComponentName",
  layout: "/layout-name",
  component: ComponentNode,
  icon: ["iconClassName"|IconFunction],
  iconColor: ["Primary"|"PrimaryLight"|"Error"|"ErrorLight"|"Warning"|"WarningLight"|"Info"|"InfoLight"]
},
  • path: the path that you want the user to be redirected inside the app
  • name: the text of the link to be displayed inside the Sidebar component
  • layout: the layout path that you want the component to be rendered in (We only have implemented two:/auth and /admin)
  • component: the component that you want rendered on the above /layout/path
  • icon: it can either be an icon from the Nucleo icons package (icon: "ni ni-air-baloon"), the Font Awesome icons package (e.g. icon: "fa fa-heart"), or it can be an icon from the @material-ui/icons package (e.g. import Person from "@material-ui/icons/Person";, and then use it like icon: Person)
  • iconColor: the color of the above icon, it can only be one of Primary,PrimaryLight,Error,ErrorLight,Warning,WarningLight,Info,InfoLight

Title

{ title: "TitleText" },
  • title: the text of the title

Divider

{ divider: true },
  • this will cause a divider line to be rendered

Legend PRO

Collapse

{
  collapse: [true|false],
  name: "CollapseName",
  icon: ["iconClassName"|IconFunction],
  iconColor: ["Primary"|"PrimaryLight"|"Error"|"ErrorLight"|"Warning"|"WarningLight"|"Info"|"InfoLight"],
  miniName: ["A-Z"],
  state: "CollapseState"

},
  • collapse: this is used to specify that the given object, needs to be rendered as a collapse inside the Sidebar component
  • name: the text of the collapse to be displayed inside the Sidebar component
  • icon: it can either be an icon from the Nucleo icons package (icon: "ni ni-air-baloon"), the Font Awesome icons package (e.g. icon: "fa fa-heart"), or it can be an icon from the @material-ui/icons package (e.g. import Person from "@material-ui/icons/Person";, and then use it like icon: Person)
  • iconColor: the color of the above icon, it can only be one of Primary,PrimaryLight,Error,ErrorLight,Warning,WarningLight,Info,InfoLight
  • miniName: a single letter to be displayed instead of the icon
  • state: the state name of the collapse to be used inside the Sidebar component, NOTE!!! it has to be unique 
{
  upgradeToPro: [true|false],
  href: "http|https-link",
  name: "ComponentName",
  icon: ["iconClassName"|IconFunction],
  iconColor: ["Primary"|"PrimaryLight"|"Error"|"ErrorLight"|"Warning"|"WarningLight"|"Info"|"InfoLight"],
  miniName: ["A-Z"],
},
  • upgradeToPro: this is used to specify that the given link, needs to have an absolute position at the end of the Sidebar component
  • href: the link where you want your user to be redirected on click
  • name: the text of the link to be displayed inside the Sidebar component
  • icon: it can either be an icon from the Nucleo icons package (icon: "ni ni-air-baloon"), the Font Awesome icons package (e.g. icon: "fa fa-heart"), or it can be an icon from the @material-ui/icons package (e.g. import Person from "@material-ui/icons/Person";, and then use it like icon: Person)
  • iconColor: the color of the above icon, it can only be one of Primary,PrimaryLight,Error,ErrorLight,Warning,WarningLight,Info,InfoLight
  • miniName: a single letter to be displayed instead of the icon 
{
  path: "/path/for/component-name",
  name: "ComponentName",
  layout: "/layout-name",
  component: ComponentNode,
  icon: ["iconClassName"|IconFunction],
  iconColor: ["Primary"|"PrimaryLight"|"Error"|"ErrorLight"|"Warning"|"WarningLight"|"Info"|"InfoLight"],
  miniName: ["A-Z"],
},
  • path: the path that you want the user to be redirected inside the app
  • name: the text of the link to be displayed inside the Sidebar component
  • layout: the layout path that you want the component to be rendered in (We only have implemented two:/auth and /admin)
  • component: the component that you want rendered on the above /layout/path
  • icon: it can either be an icon from the Nucleo icons package (icon: "ni ni-air-baloon"), the Font Awesome icons package (e.g. icon: "fa fa-heart"), or it can be an icon from the @material-ui/icons package (e.g. import Person from "@material-ui/icons/Person";, and then use it like icon: Person)
  • iconColor: the color of the above icon, it can only be one of Primary,PrimaryLight,Error,ErrorLight,Warning,WarningLight,Info,InfoLight
  • miniName: a single letter to be displayed instead of the icon

Title

{ title: "TitleText" },
  • title: the text of the title

Divider

{ divider: true },
  • this will cause a divider line to be rendered

Notice

For a better understanding, please take a look inside the file at hand, and also how the routes are rendered while the app is 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, you would not add it inside the routes.js file, and you would only add it inside the Switch component of your routing system (if you are still using react-router-dom - for example inside src/index.js, or src/layouts/Admin.js, or src/layouts/RTL.js, or src/layouts/Auth.js)