Layout component is used to structure the general layout within your app
which can be configured for each app size breakpoint (see
more information). A general layout has a fixed
AppBar at the top of the page,
<main> element that contains your app's main content, a configurable
Tree, and a keyboard focusable only link that can skip everything
AppBar and navigation
Tree and focus the
<main> content instead.
There are 5 different layout types available within
react-md but some of the
layouts are not available on smaller devices due to limited screen size.
"temporary"layout will add a hamburger menu into the main fixed
AppBarthat will show your navigation tree in a
Sheetthat will be closed automatically once a navigation item has been clicked. This layout type is available for all screen sizes.
"toggleable"layout will add a hamburger menu into the main fixed
AppBarthat will show your navigation tree once clicked in a persistent panel at the left of the page. While this panel is visible, the main content will have its max-width reduced to accommodate for the size of the panel. The panel can be closed by clicking the back arrow in the header. This layout is only available on tablets and desktops.
"clipped"layout will add some slight
box-shadowto your navigation tree and placed below the fixed app bar. The navigation panel will always be visible and the main content will have its max-width reduced to accommodate for the size of the panel. This layout is only available on desktop.
"floating"layout will be exactly the same as the
"clipped"layout except that it will have no
box-shadow. This layout is only available on desktop.
"full-height"layout will make the navigation panel span the full height of the viewport and offset the title within the
AppBarso that it is not covered. This layout is only available on desktop.
This example will allow you to see all the available layout types and play with configuring it for different media types.
Since there might be times where it is useful to update the temporary and
toggleable layouts' visibility, this package also exports a
hook to help out that returns the current configuration and controls.
The example below will give a quick example using this hook to control the
visibility of the navigation panel for non-persistent layouts. This example will
also show how to make toggleable layouts default to being visible with a new
defaultToggleableVisible prop introduced in