[Drawer] Is there support for a pinned / stacked sidebar? #4752

tgoldenberg · 2016-07-20T15:37:34Z

Description

When I open the Drawer component, I would like it to not overlay on top of my layout, but push the content sideways. Similar to the sliding nav functionality in this example - http://react-toolbox.com/#/components/layout

Versions

Using React 15.2 with material-ui 15.2. Also using Meteor.

-->

The text was updated successfully, but these errors were encountered:

aahan96 · 2016-07-20T18:22:27Z

@tgoldenberg Google material design doesn't support such kind of drawers. Have a look at this: https://material.google.com/patterns/navigation-drawer.html#navigation-drawer-content

skirunman · 2016-07-20T19:58:11Z

I was going to ask the same question and the google spec does seem to say that only drawers of type Temporary should overlay the content. Drawers of type Permanent, Persistent and Mini variant all push the content to the right.

skirunman · 2016-07-20T20:28:41Z

See #3415 which says you can do this with setting zDepth prop.

tgoldenberg · 2016-07-20T20:46:07Z

@skirunman I'm not sure zDepth allows me to change this. Since position is set to fixed, even if I change zDepth as #3415 suggests, it doesn't push my content to the right when open (the "persistent" example in MD). Is there an example of what you are suggesting?

skirunman · 2016-07-20T21:10:43Z

No, I don't have an example as I was just researching if Material-UI would work for our Meteor/React app when I saw your question. We definitely need support for Persistent style of Drawer for our web app as well.

Maybe pass in additional styling to the Drawer component?

tgoldenberg · 2016-07-20T21:13:57Z

@aahan96 Any comments on this? It appears that Material Design does support persistent sidebars. I am sure other people are looking for this functionality besides myself...

aahan96 · 2016-07-20T21:24:43Z

@tgoldenberg You are right. After commenting on the issue, I checked the material design website and got to know about Persistent menus and that's why I reopened the issue. I think this feature should exist. Do you have any PRs to submit for this new feature?

tgoldenberg · 2016-07-20T21:26:41Z

@aahan96 I'm not familiar enough with the codebase to do that. It seems like an issue that someone with advanced css knowledge might be able to solve. I just adopted material-ui pretty recently. Hoping this issue gets some attention and some help.

skirunman · 2016-07-21T00:45:42Z

After looking at this a bit I think it would be nice to have 2 more props for the Drawer component so it would be easier to support all the google material navigation drawer styles. So something like:

clipped = sets height of drawer to 100% minus the height of the app bar (64px by default) so it does not overlay the app bar.
pushContent = sets left (or right) margin of the main body content to the width of the drawer so the drawer pushes content instead of overlaying it.

Just an idea.

skirunman · 2016-07-21T07:14:25Z

This seems related #157

carlosbaraza · 2016-09-21T21:47:56Z

Any news about this feature? Roadmap?

skirunman · 2016-10-25T22:27:13Z

We ended up implementing this ourselves in our LayoutDrawer.js component. Maybe this will help someone else. FYI, we also are using Meteor.js.

import {Meteor} from 'meteor/meteor';

import React, {PropTypes} from 'react';
import {Link} from 'react-router';

import Divider from 'material-ui/Divider';
import Drawer from 'material-ui/Drawer';
import Help from 'material-ui/svg-icons/action/help';
import MenuItem from 'material-ui/MenuItem';
import Settings from 'material-ui/svg-icons/action/settings';
import withWidth, {LARGE} from 'material-ui/utils/withWidth';

import {navigation} from './Layout';
import UserCardHeader from '/imports/client/components/UserCardHeader';

const {settings: {'public': {supportUrl} = {}} = {}} = Meteor;

export const LayoutDrawer = ({children, width, ...props}, {isDrawerOpened, onDrawerOpened}) => (
  <Drawer
    docked={width === LARGE}
    open={width === LARGE || isDrawerOpened}
    onRequestChange={onDrawerOpened}
    {...props}
  >
    <UserCardHeader />
    {width === LARGE && navigation.map(({label, icon: Icon, path}) =>
      <MenuItem key={label} primaryText={label} leftIcon={<Icon />} containerElement={<Link to={path} />} />
    )}
    {children}
    <Divider />
    <MenuItem leftIcon={<Settings />} primaryText="Settings" containerElement={<Link to="/settings" />} />
    <MenuItem leftIcon={<Help />} primaryText="Help & Feedback" href={supportUrl} target="_blank" />
  </Drawer>
);

LayoutDrawer.propTypes = {
  width: PropTypes.number,
  children: PropTypes.node
};

LayoutDrawer.contextTypes = {
  isDrawerOpened: PropTypes.bool.isRequired,
  onDrawerOpened: PropTypes.func.isRequired
};

export default withWidth()(LayoutDrawer);

nguyenbathanh · 2016-12-16T04:48:50Z

I figured out a trick to do this, see my example and code below:

import React from 'react'
import {List, ListItem} from 'material-ui/List'
import ActionGrade from 'material-ui/svg-icons/action/grade'
import ContentInbox from 'material-ui/svg-icons/content/inbox'
import ContentDrafts from 'material-ui/svg-icons/content/drafts'
import ContentSend from 'material-ui/svg-icons/content/send'
import Subheader from 'material-ui/Subheader'
import Toggle from 'material-ui/Toggle'
import darkBaseTheme from 'material-ui/styles/baseThemes/darkBaseTheme'
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
import getMuiTheme from 'material-ui/styles/getMuiTheme'
import classnames from 'classnames'

export class MyComponent extends React.Component {
  constructor(props){
    super(props)
    this.state = {open: true}
    this.handleToggle = this.handleToggle.bind(this)
    this.handleClose = this.handleClose.bind(this)
  }

  handleToggle() {
    this.setState({open: !this.state.open})
  }

  handleClose() {
    this.setState({open: true})
  }

  render(){
    return (
      <div>
         <MuiThemeProvider muiTheme={getMuiTheme()}>
         <div>
            <AppBar
            className={classnames('app-bar', {'expanded': this.state.open})}
            onLeftIconButtonTouchTap={this.handleToggle}
            title="How long have you been alive?"
            iconElementRight={<RightBar />}
            />
            <Drawer
            docked={true}
            open={this.state.open}
            onRequestChange={(open) => this.setState({open})}
            >
          <List>
            <Subheader>Nested List Items</Subheader>
            <ListItem primaryText="Sent mail" leftIcon={<ContentSend />} />
            <ListItem primaryText="Drafts" leftIcon={<ContentDrafts />} />
            <ListItem
              primaryText="Inbox"
              leftIcon={<ContentInbox />}
              initiallyOpen={true}
              primaryTogglesNestedList={true}
              nestedItems={[
                <ListItem
                  key={1}
                  primaryText="Starred"
                  leftIcon={<ActionGrade />}
                />,
                <ListItem
                  key={2}
                  primaryText="Sent Mail"
                  leftIcon={<ContentSend />}
                  disabled={true}
                  nestedItems={[
                    <ListItem key={1} primaryText="Drafts" leftIcon={<ContentDrafts />} />,
                  ]}
                />,
                <ListItem
                  key={3}
                  primaryText="Inbox"
                  leftIcon={<ContentInbox />}
                  open={this.state.open}
                  onNestedListToggle={this.handleNestedListToggle}
                  nestedItems={[
                    <ListItem key={1} primaryText="Drafts" leftIcon={<ContentDrafts />} />,
                  ]}
                />,
              ]}
            />
          </List>
        </Drawer>
          { this.props.isAuthenticated && <div className={classnames('app-content', {'expanded': this.state.open})}> { this.props.children } </div>}
        </div>
      </MuiThemeProvider>
      </div>
    )
  }
}

and the css style:

.app-bar{
  -moz-transition: left 218ms cubic-bezier(0.4, 0, 0.2, 1);
  -o-transition: left 218ms cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-transition: left 218ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: left 218ms cubic-bezier(0.4, 0, 0.2, 1);
  left: 0;
  width: auto !important;
  right: 0 !important;
  position: fixed !important;
}

.app-content{
  -moz-transition: padding-left 218ms cubic-bezier(0.4, 0, 0.2, 1);
  -o-transition: padding-left 218ms cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-transition: padding-left 218ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: padding-left 218ms cubic-bezier(0.4, 0, 0.2, 1);
  padding-right: 20px !important;
  padding-top: 64px !important;
}

.app-bar.expanded{
  left: 255px;
}

.app-content.expanded{
  padding-left: 255px;
}

ryanbelke · 2017-04-26T03:34:51Z

I was able to get @nguyenbathanh code working above with some modifications. Mainly I put all of the content that I want to slide when opened in a container div called app-root.

<div className={INSERT TEMPLATE LITERAL HERE app-root ${(this.state.open ? ' expanded' : '')} INSERT TEMPLATE LITERAL HERE }>

Full Code/CSS

<div style={styles.container}>

       <Drawer open={this.state.open}
               width={120}
       >
         <MenuItem>
           <h4>Content</h4>
           <Contents {...{ actions, data, cssTransitionGroupClassNames }} />
         </MenuItem>

       </Drawer>
       <div className={`app-root  ${(this.state.open ? ' expanded' : '')}` }>

       <Toolbar>
         <ToolbarGroup firstChild={true}>
           <RaisedButton
             label="Show Content"
             onTouchTap={this.handleToggle}

           />
           <ToolbarSeparator />

           <RaisedButton label="Manage Content" />
         <ToolbarSeparator />
         <RaisedButton label="Manage More Content" />

         </ToolbarGroup>


       </Toolbar>
    
     </div>
     </div>

CSS
.app-root{
 -moz-transition: left 218ms cubic-bezier(0.4, 0, 0.2, 1);
 -o-transition: left 218ms cubic-bezier(0.4, 0, 0.2, 1);
 -webkit-transition: left 218ms cubic-bezier(0.4, 0, 0.2, 1);
 transition: left 218ms cubic-bezier(0.4, 0, 0.2, 1);
 left: 0;
 width: auto !important;
 right: 0 !important;
 position: fixed !important;
}

.app-root.expanded{
 left: 255px;
}

rishikilaru · 2017-05-08T19:25:21Z

to create something like this on the right side : (http://stackoverflow.com/questions/43822173/how-do-i-create-a-responsive-sidebar-component-using-reacts-material-ui/43856873#43856873)

Zuurkern · 2017-05-12T17:12:26Z

@rishikilaru I am working on implementing all types of drawers in the Material Design Guidelines. I am almost finished and will open a PR soon. However, these changes are based off the next branch.

brion-fuller · 2017-05-17T04:11:05Z

How is the progress of the drawers going?

Sewdn · 2017-05-17T15:00:58Z

@brion-fuller its done! #6878 needs to be reviewed and merged still

oliviertassinari · 2017-08-26T18:45:33Z

Closed by #7925

pselden · 2018-02-08T04:20:38Z

Sorry to necro this thread, but is there an example that anyone has where it doesn't push the app bar when it opens, like in Google Inbox?

bijay-shrestha · 2019-06-10T08:43:43Z

I figured out a trick to do this, see my example and code below:

It is not working

aahan96 closed this as completed Jul 20, 2016

aahan96 reopened this Jul 20, 2016

aahan96 added the new feature New feature or request label Jul 20, 2016

skirunman mentioned this issue Jul 21, 2016

[BottomSheet] Add BottomSheet component #4732

Closed

9 tasks

keithamoss mentioned this issue Feb 3, 2017

initial prototype of React/Typescript frontend ealgis/ealgis#20

Closed

Zuurkern mentioned this issue May 16, 2017

[Drawer] Support all types of navigation drawers in the Material Design Guidelines #6878

Closed

5 tasks

oliviertassinari changed the title ~~Is there support for a pinned / stacked sidebar?~~ [Drawer] Is there support for a pinned / stacked sidebar? May 19, 2017

vyrotek mentioned this issue Aug 14, 2017

Using utils/withWidth throws webpack_require error #7749

Closed

oliviertassinari closed this as completed Aug 26, 2017

jonborchardt mentioned this issue Feb 16, 2023

Update colors to be smaller allenai/varnish-mui#28

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Drawer] Is there support for a pinned / stacked sidebar? #4752

[Drawer] Is there support for a pinned / stacked sidebar? #4752

tgoldenberg commented Jul 20, 2016

aahan96 commented Jul 20, 2016

skirunman commented Jul 20, 2016

skirunman commented Jul 20, 2016

tgoldenberg commented Jul 20, 2016

skirunman commented Jul 20, 2016 •

edited

Loading

tgoldenberg commented Jul 20, 2016

aahan96 commented Jul 20, 2016

tgoldenberg commented Jul 20, 2016

skirunman commented Jul 21, 2016

skirunman commented Jul 21, 2016

carlosbaraza commented Sep 21, 2016

skirunman commented Oct 25, 2016

nguyenbathanh commented Dec 16, 2016 •

edited

Loading

ryanbelke commented Apr 26, 2017 •

edited

Loading

rishikilaru commented May 8, 2017 •

edited

Loading

Zuurkern commented May 12, 2017

brion-fuller commented May 17, 2017

Sewdn commented May 17, 2017

oliviertassinari commented Aug 26, 2017

pselden commented Feb 8, 2018

bijay-shrestha commented Jun 10, 2019 •

edited by oliviertassinari

Loading

[Drawer] Is there support for a pinned / stacked sidebar? #4752

[Drawer] Is there support for a pinned / stacked sidebar? #4752

Comments

tgoldenberg commented Jul 20, 2016

Description

Versions

aahan96 commented Jul 20, 2016

skirunman commented Jul 20, 2016

skirunman commented Jul 20, 2016

tgoldenberg commented Jul 20, 2016

skirunman commented Jul 20, 2016 • edited Loading

tgoldenberg commented Jul 20, 2016

aahan96 commented Jul 20, 2016

tgoldenberg commented Jul 20, 2016

skirunman commented Jul 21, 2016

skirunman commented Jul 21, 2016

carlosbaraza commented Sep 21, 2016

skirunman commented Oct 25, 2016

nguyenbathanh commented Dec 16, 2016 • edited Loading

ryanbelke commented Apr 26, 2017 • edited Loading

rishikilaru commented May 8, 2017 • edited Loading

Zuurkern commented May 12, 2017

brion-fuller commented May 17, 2017

Sewdn commented May 17, 2017

oliviertassinari commented Aug 26, 2017

pselden commented Feb 8, 2018

bijay-shrestha commented Jun 10, 2019 • edited by oliviertassinari Loading

skirunman commented Jul 20, 2016 •

edited

Loading

nguyenbathanh commented Dec 16, 2016 •

edited

Loading

ryanbelke commented Apr 26, 2017 •

edited

Loading

rishikilaru commented May 8, 2017 •

edited

Loading

bijay-shrestha commented Jun 10, 2019 •

edited by oliviertassinari

Loading