@barejs/dashbourd-router

A [react]9https://reactjs.org/ mui dashboard incorporating react-router.

The dashboard is designed for micro-sites. Two navigation menus are provides: sites and pages.
The sites are rendered as simple href links, which provide the menus to navigate between micro-sites.
The pages are rendered as react-router-dom links, which provide the menus to navigate within the site.

The props are:

- title (string): Displayed on the app-bar.
- basename (string): Passed through to BrowserRouter.
- sites (array): The array of sites (see the section on sites and pages).
- pages (array): The array of pages (see the section on sites and pages).
- routes (node): A react node for the react-router-dom routes.
- appBarItems (node): A react node for the controls on the app-bar.

$3

Both the sites and pages are arrays of the following shape:

``javascript
[
...

{
code: 'app1', // A unique key
title: 'Application 1', // The menu title.
description: 'The first application', // Used a a tooltip.
url: '/example/ui', // The url. An href for the sites, and router link for the pages.
iconName: 'dashboard' // The name of an icon rendered in mui with {iconName}
},

...
]
`

Requirements

You will need to add founts to the index.html. This is used to specify the icon name in the sites and pages props.

`html
rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons"
/>
`

Example

`javascript
import React from 'react'
import { Route, Redirect } from 'react-router-dom'

import Typography from '@mui/material/Typography'

import DashboardRouter from 'barejs-dashboard-router'
import { Page1, Page2, Page3 } from './pages'

class Site extends React.Component {
render() {
return (
title="Example Dashboard"
basename="/example/ui"
sites={[
{
code: 'app1',
title: 'Application 1',
description: 'The first application',
url: '/example/ui',
iconName: 'dashboard'
},
{
code: 'app2',
title: 'Application2',
description: 'The second application',
url: '/orders/ui',
iconName: 'album'
}
]}
pages={[
{
code: 'page1',
title: 'First Page',
description: 'The first page',
path: '/first-page',
iconName: 'shopping_cart'
},
{
code: 'page2',
title: 'Second Page',
description: 'The second page',
path: '/second-page',
iconName: 'people'
},
{
code: 'page3',
title: 'Third Page',
description: 'The third page',
path: '/third-page',
iconName: 'agriculture'
}
]}
routes={
<>

exact
path="/first-page"
render={props => (

)}
/>
exact
path="/second-page"
render={props => }
/>
exact
path="/third-page"
render={props => }
/>

}
appBarItems={

John Doe

}
/>
)
}
}

export default Site
``