📑 material-ui-panel

A zero-maintenance panel manager inspired by VSCode that adds in Material-UI elements a self populating and state keeping organization of it's children.

---

🪄 Installation

Install the latest version with your default package manager. The application expects given as peer React 16.0+ and Material UI 4.0

npm install @kadarka/material-ui-panel --save

yarn i @kadarka/material-ui-panel

🎛️ Architecture & Structure

DOM wise

The base structure it's a grid with 5 columns, at most 5, at least 3 all the time visible. Columns are [ ( 'leftMenu' 'leftPanel' ) 'main' ( 'rightPanel' 'rightMenu' ) ]

Architecture wise

The <MuiPanelManager> is a HOC Context driven manager suggested to be added close the the root of the document, preferably outside the ±<Router> but inside the <MuiTheme>

import { createTheme, ThemeOptions, ThemeProvider } from '@material-ui/core/styles'
// import { useMemo } from 'react'
// import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
// import routes from './routes'

export default (): JSX.Element => {
  const theme = useMemo(() => createTheme({ palette: { type: 'dark' } } as ThemeOptions), [])

  return (
	<ThemeProvider {...{ theme }}>
		{/* ... */}
		<MuiPanelManager>
    		{/* notification?... */}
    		{/* login/modals/errors?... */}
		{/* ... */}
		<Router>
			{/* ... */}
			<Switch>
				{routes.map(({ path, exact, component }) => <Route key={path} {...{ exact, path, component }} />)}
			</Switch>
		</Router>
		{/* ... */}
	</ThemeProvider>
	)
}

⏰ Minimal versions

React 16.0+ (Sept 2017)

---

< MuiPanelManager >

Self organizing manager wrapper that renders all children given

Available API's

Argument	Default	Description
allowRightClick	false	Determines if the panel allows opening the default browser context menu on right click

Code sample

<MuiPanelManager>
	<MuiDivider tooltip="Default separator" />

	<NotificationPanel />

	<MuiPanel title="Lorem Ipsum Panel" icon={<FormatIndentIncreaseIcon />}>
		{`Lorem ipsum dolor sit amet, ...`}
	</MuiPanel>

	<MuiPanel title="Sample Panel" icon={<FormatAlignLeftIcon />}>
		<Skeleton animation="wave" height={10} style={{ marginBottom: 6 }} />
	</MuiPanel>
</MuiPanelManager>