Nested drawer/layout in react toolbox

Question

How can I implement a nested drawer layout?

 LOGO | Nav-Items-Here
-------------------------
Page Header
-------------------------
Drawer  | Content
/Sidebar|
        |
        |

I tried using a nested layout but it does not work. The drawer is always pinned to the top of the window. My code looks like this (simplified to remove complexity like react router):

      <Layout>
        <Panel>
          <DomainPage /> 
        </Panel>
      </Layout>

DomainPage

  <div>
    <header styleName="pageHeader.header pageHeader.headerNoBorder">
      <h1 styleName="pageHeader.headerText">{this.props.domain.get("name")}</h1>
    </header>

    <Tabs theme={theme} index={this.state.index} onChange={this.handleTabChange}>
      <Tab label="Intents">
        <DomainIntentsTab />
      </Tab>
      <!-- ... -->
    </Tabs>
  </div>

DomainIntentsTab

  <Layout>
    <Panel>
      <NavDrawer pinned active>
        Test
      </NavDrawer>
    </Panel>
  </Layout>

Venugopal · Accepted Answer · 2017-05-02T08:32:36.510

Test the below code in react-toolbox playground

class LayoutTest extends React.Component {
state = {
    drawerActive: false
};

toggleDrawerActive = () => {
    this.setState({ drawerActive: !this.state.drawerActive });
};

render() {
    return (
       <Layout>
        <Panel>
          {/* DomainPage */}
          <div>
            <header>
              <h1>Header</h1>
            </header>
            <Tabs>
              <Tab label="Intents">
               {/* DomainIntentsTab */}
                <Layout>
                  <Panel>
                    <NavDrawer active={this.state.drawerActive} onOverlayClick={ this.toggleDrawerActive }>
                      <p>Navigation, account switcher, etc. go here.</p>
                    </NavDrawer>
                    <div style={{ flex: 1, overflowY: 'auto', padding: '1.8rem' }}>
                      <Button label="toggle drawer" onClick={ this.toggleDrawerActive } primary raised/>
                      <h1>Main Content</h1>
                      <p>Main content goes here.</p>
                    </div>
                  </Panel>
                </Layout>
              </Tab>
            </Tabs>
          </div>
        </Panel>
      </Layout>
    );
  }
}

return <LayoutTest />;

You may find the box-shadow of NavDrawer visible in navdrawer-closed state. You can correct this with CSS

EDIT

pinned side menu:

as per this, NavDrawer and Panel are siblings; so you can modify DomainIntentsTab section as below.

Note: don't forget to add pinned on NavDrawer

<Tab label="Intents">
    {/* DomainIntentsTab */}
    <Layout>
        <NavDrawer pinned active={this.state.drawerActive} onOverlayClick={ this.toggleDrawerActive }>
            <p>Navigation, account switcher, etc. go here.</p>
        </NavDrawer>
        <Panel>
            <div style={{ flex: 1, overflowY: 'auto', padding: '1.8rem' }}>
                <Button label="toggle drawer" onClick={ this.toggleDrawerActive } primary raised/>
                <h1>Main Content</h1>
                <p>Main content goes here.</p>
            </div>
        </Panel>
    </Layout>
</Tab>

Ok but the problem is I want the sidebar "docked", I could set `active=true`, but its still above my content. For now I used CSS to implement the sidebar. Will mark as answer since it solves the issue of sidebar always docking at top ... But ... what mistake did I make? — Jiew Meng, May 02 '17 at 07:47
@JiewMeng edited my answer. let me know if that's what you wanted? — Venugopal, May 02 '17 at 08:33

Nested drawer/layout in react toolbox

1 Answers1