React-toolbox: Support for clipped and floating permanent navigation drawers

[mpiroc]

The material guidelines describe three types on permanent navigation drawers (scroll down to 'Types of permanent navigation drawers'):

• Full-height navigation drawer: Apps focused on information consumption that use a left-to-right hierarchy
• Navigation drawer clipped under the app bar: Apps focused on productivity that require balance across the screen
• Floating navigation drawer: Apps that require less hierarchy

I can implement the first type by using the pinned property on NavDrawer or Drawer. But I would like to use the second type (clipped under app bar), and I don't see an obvious way to do that using react-toolbox.

[javivelasco]

It is possible indeed but you need to use the new implementation under 2.0 beta. Here is how it would look:

And the code could like like:

import React from 'react';
import AppBar from '../components/app_bar';
import { Layout, Panel, NavDrawer } from '../components/layout';

const Root = () => (
  <Layout>
    <AppBar title="React Toolbox" fixed flat />

    <NavDrawer active pinned clipped>
      This is the content for the drawer
    </NavDrawer>

    <Panel>
      This is the content for panel
    </Panel>
  </Layout>
);

export default Root;

[mpiroc]

I was able to work around this in 1.x by using a nested layout:

<Layout>
  <Panel>
    <MyAppBarComponent />
    <Layout>
      <NavDrawer pinned={true}>
        {'Nav content'}
      </NavDrawer>
      <Panel>
        {'Main content'}
      </Panel>
    </Layout>
  </Panel>
</Layout>