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

Copy
{
  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
Copy
{
  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

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

Divider

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

Legend PRO

Collapse

Copy
{
  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
Copy
{
  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
Copy
{
  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

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

Divider

Copy
{ 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:

Copy
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)