Layout

Usage

import { Layout, SplitPaneProps } from "mui-extended";
import { SwipeableDrawerProps } from "@mui/material";

const menu: ReactNode;
const appBar: ReactNode;
const content: ReactNode;
const splitPaneProps: SplitPaneProps; // optional - splitpane used for Desktop Layout
const swipeableDrawerProps: SwipeableDrawerProps; //optional - swipeableDrawer used for Mobile Layout

const layout = (
  <Layout
    menu={menu}
    appBar={appBar}
    splitPaneProps={splitPaneProps}
    swipeableDrawerProps={swipeableDrawerProps}
  >
    {content}
  </Layout>
);

Layout has 3 parts

• content - Actual Content of the Layout
• menu (Optional) - Closable Menu to be displayed on the left of the content
• appBar (Optional) - App Bar to be displayed on the top of the content

This Documentation Uses Layout component along with TreeMenuWithNextLinks

Features

Responsive

• SplitPane for Desktop
• SwipeableDrawer wraapped with withCloseOnNavigation

Contained

Overflow in menu and content are handled independently