Verschachtelte Schublade/Layout in React Toolbox

Question

Wie kann ich ein verschachteltes Schubladenlayout implementieren?

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

Ich habe versucht, ein verschachteltes Layout zu verwenden, aber es funktioniert nicht. Die Schublade ist immer an der Oberseite des Fensters befestigt. Mein Code sieht wie folgt aus (vereinfacht Komplexität zu entfernen wie Router reagieren):

 <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> 

Answer 1

testen Code unten 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 />; 

Sie können die box-shadow von NavDrawer in Navwarter-geschlossenen Zustand sichtbar finden. Sie können dies korrigieren, mit CSS

EDIT

gemerkt Seitenmenü:

nach this, NavDrawer und Panel Geschwister sind; so können Sie ändern DomainIntentsTab Abschnitt wie folgt.

Hinweis: vergessen Sie nicht, pinned auf 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>