What you need to know

Core Concept

There are 3 parts that synchronize with each other. configuration, logic and components.

Data flow

In order to build layout, you need to use layout api to setup configuration of your layout. Think of it as a set of commands to control the behavior and effect of the components. Technically, config is just a plain object of key-value pairs. let see some example.

import Layout from '@mui-treasury/layout';

const scheme = Layout();
// scheme is layout builder
// you can config each part of layout
scheme.configureHeader(builder => {
  // set up Header

// usually in dashboard layout, you need this sidebar
scheme.configureEdgeSidebar(builder => {
  // set up EdgeSidebar

// usually in blog, doc layout, you need this sidebar
scheme.configureInsetSidebar(builder => {
  // set up InsetSidebar

we will not go into detail at this point because we want you to get to know how it works. After config is set, the scheme must be sent to Root component to let it spread the commands. Root is react context provider behind the scene (no magic here) The config that Root receive will be encapsulated for communicating with other components.

import Layout, { Root } from '@mui-treasury/layout';const scheme = Layout();
// ----
// setup phase
// ----

const App = () => {  return <Root scheme={scheme}></Root>;};

Finally, place components inside Root to let them get the commands and display based on each responsibility of each component. ex. EdgeSidebar will stay on the edge of the browser, left or right depends on the configuration. On the other hand, InsetSidebar is designed to display inside of the container.

However, before you import components from the library you need to specify css-in-js library first. In this example, we are using styled-components

import Layout, {  Root,  getHeader,  getEdgeSidebar,  getContent,  getFooter,} from '@mui-treasury/layout';import styled from 'styled-components';// @emotion/styled is also compatible
const scheme = Layout();
// ----
// setup phase
// ----

// get component 1 by 1 to minimize bundle size
const Header = getHeader(styled)
const EdgeSidebar = getEdgeSidebar(styled)
const Content = getContent(styled)
const Footer = getFooter(styled)

const App = () => {  return (    <Root scheme={scheme}>      <Header />      <EdgeSidebar />      <Content />      <Footer />    </Root>  );};