Routing System
We’ve created these dynamic routes, so the Sidenav
and DefaultNavbar
components would not get too loaded with code. You will find all our demo routes for the Sidenav
in src/routes.js
and for the DefaultNavbar
in src/page.routes.js
Sidenav
- The
type
key with thecollapse
value is used for a route. - The
type
key with thetitle
value is used for a title inside theSidenav
. - The
type
key with thedivider
value is used for a divider betweenSidenav
items. - The
name
key is used for the name of the route on theSidenav
. - The
key
key is used for the key of the route (It will help you with the key prop inside a loop). - The
icon
key is used for the icon of the route on theSidenav
, you have to add a node. - The
collapse
key is used for making a collapsible item on theSidenav
that contains other routes inside (nested routes), you need to pass the nested routes inside an array as a value for thecollapse
key. - The
route
key is used to store the route location which is used for the react router. - The
href
key is used to store the external links location. - The
title
key is only for the item with the type oftitle
and its used for the title text on theSidenav
. - The
component
key is used to store the component of its route.
Default Navbar
- The
name
key is used for the name of the route on the Navbar - The
icon
key is used for the icon of the route on the Navbar. - The
collapse
key is used for making a collapsible item on the Navbar that contains other routes inside (nested routes), you need to pass the nested routes inside an array as a value for thecollapse
key. - The
route
key is used to store the route location which is used for the react router. - The
href
key is used to store the external links location. - The
component
key is used to store the component of its route. - The
dropdown
key is used to define that the item should open a dropdown for its collapse items. - The
description
key is used to define the description of a route under its name - The
columns
key is used to define that how the content should look inside the dropdown menu as columns, you can set the columns amount based on this key. - The
rowsPerColumn
key is used to define that how many rows should be in a column.