@mui-treasury/layout

Material-UI Layout v2

A set of components that allows you to build dynamic and responsive layout based on Material-UI

Prerequisites

This project based on React Material-UI, so you have to install @material-ui/core @material-ui/styles.

Installation

// yarn
yarn add @material-ui/core @material-ui/icons @mui-treasury/layout

// npm
npm install @material-ui/core @material-ui/icons @mui-treasury/layout

Demo

see demo here Codesandbox Demo

Usage

import React from 'react';
import {
  Root,
  Header,
  Sidebar,
  SidebarTrigger,
  SidebarTriggerIcon,
  CollapseBtn,
  CollapseIcon,
  Footer,
  Content,
  standardLayoutPreset,
} from '@mui-treasury/layout';
import Box from '@material-ui/core/Box';
import Toolbar from '@material-ui/core/Toolbar';

const App = () => {
  return (
    <Root config={standardLayoutPreset}>
      {({ sidebarStyles, headerStyles }) => (
        <>
          <Header>
            <Toolbar>
              <SidebarTrigger className={headerStyles.leftTrigger}>
                <SidebarTriggerIcon />
              </SidebarTrigger>
              test
            </Toolbar>
          </Header>
          <Sidebar>
            <div className={sidebarStyles.container}>Sidebar</div>
            <CollapseBtn className={sidebarStyles.collapseBtn}>
              <CollapseIcon />
            </CollapseBtn>
          </Sidebar>
          <Content>
            <Box minHeight={1000}>
              <p>Content</p>
            </Box>
          </Content>
          <Footer>Footer</Footer>
        </>
      )}
    </Root>
  );
};

export default App;

Built-in Features

• Collapsible Nav

  

• Header Magnet

  

• Auto Collapsed

  

Custom Styles

Mostly, you will custom Header & Nav. This is an example for Header

Presets

• Standard

  

• Fixed

  

• Content Based

  

• Cozy

  

How it works

• No magic, just React Context API.

• They are basically material-ui components that are combined to make things easier. AppBar, Drawer

• use @material-ui/styles to style components

• use react-hooks

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

License

MIT