API REFERENCE

Inset Sidebar

Render this component inside InsetContainer to achieve inset layout. Read more about Inset sidebar config

Usage example

import styled from 'styled-components'
import Layout, {
 Root,
 getInsetContainer,
 getInsetSidebar
} from '@mui-treasury/layout';

const InsetContainer = getInsetContainer(styled)
const InsetSidebar = getInsetSidebar(styled)

cosnt scheme = Layout()

scheme.configureInsetSidebar((builder) => {
  builder
    .create("primarySidebar", { anchor: "right" })
    .registerStickyConfig("md", {
      width: 256,
      top: 0,
    });
});

const App = () => {
  return (
    <Root scheme={scheme}>
      <Content>
        <InsetContainer
          rightSidebar={
            <InsetSidebar sidebarId="primarySidebar">
              sidebar content
            </InsetSidebar>
          }
          // leftSidebar should have anchor: left
        >
          content
        </InsetContainer>
      </Content>
    </Root>
  )
}

Props

  • sidebarId
    • type : string
    • required: yes
    • description : id that match sidebar config
  • classes
    • type : { root: string; paper: string }
    • description : className as object

Styling

use classes to target root and paper of sidebar. Both are normal div.


Related components