Dynamically changing page content

[firaskrichi]

Is there a way to make content in the rest of the page scale dynamically based on the width of the dock?

[csillag]

Yes, I would also be interested in that.

[sufius]

Hey friends,

whats about this solution:

Link to dynamic main content width example

const styles = {
  main: {
    width: '100%',
    height: '150%',
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'top',
    paddingTop: '0',
    marginLeft: '0'
  }
}

@Radium
export default class PmbMainContent extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    const { children, className, ...reactProps } = this.props;
    if (this.props.isSidebarVisible){
        styles.main.width = (1 - this.props.size) * 100 + '%';
        styles.main.marginLeft =  this.props.size * 100 + '%';
    } else {
        styles.main.width = '100%';
        styles.main.marginLeft =  '0';
    }
    return (
        <div style={[styles.main]}>
          {children}
        </div>
    );
  }
}

Im passing the state and the width (size) of the sidebar component down to the main content component and calculating the new width dependent on the current width (size) of the sidebar. This calculated size is added as "left margin" to the main content component. Hope this solution is clean enough??? Thanks in advance