Tips on making Material-UI Drawer compress other content when it is open

Seeking assistance from those familiar with CSS and Material UI! I'm currently working on implementing a Material UI Drawer component that doesn't just slide out over the top of the page content, but actually causes the page content to adjust around it by squeezing or expanding. My project utilizes Bootstrap rows and containers, but I'm unsure how to use them to achieve this effect. Here is how my component is structured:

<div>
    <AppBar
    onLeftIconButtonTouchTap={this.handleToggle}
      title="Imaginary Company"
    />
    <Row>
      <QuotesList />
    </Row>
    <Drawer
    containerStyle={{ top: 64, width:150 }}
    open={this.state.open}
    >
      <MenuItem>Menu Item</MenuItem>
      <MenuItem>Menu Item 2</MenuItem>
    </Drawer>
  </div>

The 'top' property is included to ensure the top title area of the App Bar remains visible when the drawer is open or closed. Any advice or guidance would be greatly appreciated. Thank you!

UPDATE: After some experimentation, I have come up with a solution using the 'styled-components' library. By creating a wrapper component that accepts a 'collapsed' prop and implements an animation sliding to the right equal to the drawer's width (150), I was able to achieve the desired effect. Below is the code snippet using styled-components:

const CollapsibleContainer = styled.div`
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
$:after {
content: "";
display: table;
clear: both;
}
position: absolute;
right: 0;
left: ${props => props.collapsed ? '150px' : '0'}!important;
transition: 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
`; 

While not a flawless solution, it serves its purpose well. Hopefully, this can be helpful to someone else facing a similar challenge. :)

Answer №1

Here is a solution similar to your "hacky" approach, with a jsFiddle link provided: https://jsfiddle.net/88uq8751/3/

The concept is the same. You shift your content to the right by the width of the drawer, applying a transition or animation effect. This can be achieved in various ways, using properties like width, marginLeft, absolute positioning, or even transform:translate. In this example, I utilized marginLeft:

const { Drawer, RaisedButton, MuiThemeProvider, getMuiTheme } = MaterialUI;

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = { drawerOpen: false };
  }

  render() {
    const contentStyle = {  transition: 'margin-left 450ms cubic-bezier(0.23, 1, 0.32, 1)' };

    if (this.state.drawerOpen) {
      contentStyle.marginLeft = 256;
    }

    return (
      <div>
        <Drawer open={this.state.drawerOpen}>
          <div style={{ textAlign: 'right' }}>
            <RaisedButton onClick={() => this.setState({ drawerOpen: false }) }>X</RaisedButton>
          </div>
          {this.props.children}
        </Drawer>
        <div style={contentStyle}>
          <RaisedButton onClick={() => this.setState({ drawerOpen: true }) }>Open</RaisedButton>
          <p>
            Lorem ipsum dolor sit amet, amet epicuri vel ea, noster causae oporteat has ut, ad est periculis concludaturque.Mundi docendi volutpat ut sea, an sea suas epicurei.Sea numquam definitionem ne.Te postea aliquip invidunt quo.Id prima commune complectitur pri, sed at vero posse contentiones, sea cu fugit etiam iusto.Ei mei prima appareat, est brute luptatum iudicabit id.Alii homero imperdiet usu id, dico meis alienum per ad, dolorem mentitum philosophia quo id.
          </p><p>
            Nec in dolor ancillae contentiones, at harum graecis his.An delectus scripserit pro.Ei dicta liber vis, sed no quidam legimus fabellas, no expetendis vituperata mei.Vim et ferri nominavi constituto.Wisi tamquam intellegebat duo in.Omittam adolescens abhorreant no sea.Cibo iusto verear ut mea, per at viris nominavi referrentur.
          </p><p>
            Sea officiis moderatius te.Graeci causae malorum ius in, cu has offendit tractatos interpretaris.Ea porro liberavisse mei, no mei propriae salutandi intellegat, te nibh singulis vim.Vim mucius feugait blandit ea.At est mollis vivendo.Eu has choro doctus verterem.Utroque suscipiantur ne eum, vix in alia intellegat.
          </p><p>
            Lorem ipsum dolor sit amet, amet epicuri vel ea, noster causae oporteat has ut, ad est periculis concludaturque.Mundi docendi volutpat ut sea, an sea suas epicurei.Sea numquam definitionem ne.Te postea aliquip invidunt quo.Id prima commune complectitur pri, sed at vero posse contentiones, sea cu fugit etiam iusto.Ei mei prima appareat, est brute luptatum iudicabit id.Alii homero imperdiet usu id, dico meis alienum per ad, dolorem mentitum philosophia quo id.
          </p><p>
            Nec in dolor ancillae contentiones, at harum graecis his.An delectus scripserit pro.Ei dicta liber vis, sed no quidam legimus fabellas, no expetendis vituperata mei.Vim et ferri nominavi constituto.Wisi tamquam intellegebat duo in.Omittam adolescens abhorreant no sea.Cibo iusto verear ut mea, per at viris nominavi referrentur.
          </p><p>
            Sea officiis moderatius te.Graeci causae malorum ius in, cu has offendit tractatos interpretaris.Ea porro liberavisse mei, no mei propriae salutandi intellegat, te nibh singulis vim.Vim mucius feugait blandit ea.At est mollis vivendo.Eu has choro doctus verterem.Utroque suscipiantur ne eum, vix in alia intellegat.
          </p><p>
            Lorem ipsum dolor sit amet, amet epicuri vel ea, noster causae oporteat has ut, ad est periculis concludaturque.Mundi docendi volutpat ut sea, an sea suas epicurei.Sea numquam definitionem ne.Te postea aliquip invidunt quo.Id prima commune complectitur pri, sed at vero posse contentiones, sea cu fugit etiam iusto.Ei mei prima appareat, est brute luptatum iudicabit id.Alii homero imperdiet usu id, dico meis alienum per ad, dolorem mentitum philosophia quo id.
          </p><p>
            Nec in dolor ancillae contentiones, at harum graecis his.An delectus scripserit pro.Ei dicta liber vis, sed no quidam legimus fabellas, no expetendis vituperata mei.Vim et ferri nominavi constituto.Wisi tamquam intellegebat duo in.Omittam adolescens abhorreant no sea.Cibo iusto verear ut mea, per at viris nominavi referrentur.
          </p><p>
            Sea officiis moderatius te.Graeci causae malorum ius in, cu has offendit tractatos interpretaris.Ea porro liberavisse mei, no mei propriae salutandi intellegat, te nibh singulis vim.Vim mucius feugait blandit ea.At est mollis vivendo.Eu has choro doctus verterem.Utroque suscipiantur ne eum, vix in alia intellegat.
          </p>        
        </div>
    </div>
    );
  }

}

const App = () => (
  <MuiThemeProvider muiTheme={getMuiTheme() }>
    <Example />
  </MuiThemeProvider>
);

ReactDOM.render(
  <App />,
  document.getElementById('container')
);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

fluid columns gliding from side to side

I'm currently working with Bootstrap to design responsive columns. My goal is to have the next column of content slide in from either the left or right side when the user clicks on the respective arrow button. While I have found solutions for fixed w ...

Sending a POST request to an external API using NextJs

I am a newcomer to Next.js and I am trying to figure out how to send a post request to an external API. Despite going through the documentation, I couldn't find any clear examples that could help me. Basically, I have an external endpoint for regist ...

What is the best way to align text on the right side of a mui AppBar/Toolbar component?

How can I modify the menu bar to include a log out button on the right side? Here is the current code: <main> <AppBar> <Toolbar> <Typography style={{ marginRight: 16 }} variant="h6" className=" ...

Different method for adding child elements to the DOM

When creating a DOM element, I am following this process: var imgEle = document.createElement('img');     imgEle.src = imgURL;             x.appendChild(imgEle); Instead of appending the last line which creates multiple img elements ev ...

Exploring Next.js: The difference between Client Side Navigation and direct html modifications

Currently, I am diving into the next.js tutorial, but there are some aspects that have me puzzled: In the tutorial, it mentions here, that when you click a <Link> element, it does not trigger a server request but instead performs "Client-side naviga ...

Customizable user profile page

I'm currently working with twitter bootstrap. My goal is to design a profile page featuring an edit button positioned on the top left corner. Upon clicking this button, all the profile details will transition into editable form fields (which I bel ...

What is the best way to continuously loop the animation in my SVG scene?

After designing a SVG landscape with an animation triggered by clicking the sun, I encountered an issue where the animation only works once. Subsequent clicks do not result in any animation. Below is my current JavaScript code: const sun = document.getEle ...

What steps can I take to incorporate a dropdown feature into my existing menu design?

I am currently working on a navigation menu that includes various subjects. One of the subjects is titled Equipment, and when I hover over it, Throwables and Gear appear. However, I now want to add another dropdown menu that opens when I hover over Throwab ...

An issue arises when trying to close and reopen a tab on Internet Explorer 11

I am encountering an issue with my React application. Whenever I use window.location = "url", Internet Explorer closes the developer tools if they are open and refreshes the page while displaying a dialogue message stating "A problem with the webpage cause ...

Guide on Organizing Information in Next.js

I have an online store and I am looking to organize my data by categories. Initially, I tried using APIs for this purpose but it ended up putting a strain on my server. So now, I am attempting to use Redux to store the data and filter it from there. Howeve ...

Designing a responsive navigation bar with slide functionality for both web and mobile interfaces utilizing Bootstrap

I have integrated Bootstrap 4.5.0 with the necessary CSS and script from the CDN on my webpage. I am attempting to create a responsive navigation bar header similar to the one on the Bootstrap website, which functions effectively on both desktop web browse ...

The catch block is triggered when the dispatch function is called within the try block

It's strange how the code below works perfectly without any errors and records a response once the loginHandler() function is triggered. However, when I include the dispatch function inside the try block after receiving the response, the catch block e ...

State mutation not reflected in input field value update

During the development of a small project for educational purposes, I encountered an issue with updating the input value. Below is the simplified component causing this issue. function TipSelector({selections, onTipChanged}: {selections: TipSelectorItem[], ...

Step-by-step guide on dynamically generating table rows in React

I have been trying to dynamically create a table with rows and columns based on an array. While my rest request is functioning properly, I am facing challenges when attempting to switch from a hard-coded example to a dynamic approach using loops or mapping ...

What is the process for updating the Schema when a column's visibility changes in a Datagrid using Material UI?

After reviewing the Datagrid documentation on events, I discovered that the columnVisibilityChange event can be utilized to identify various column visibility changes. However, when I attempted to implement it in my DataGrid component, it failed to trigger ...

Incorporating styling preferences within a directive's template

One of the directives I am currently working on looks like this: app.directive('MessageChild', function($timeout) { return { restrict: 'E', scope: { pos: '=?', msg: '=' ...

Displaying child properties in a functional ReactJS component

React version 0.14 introduces the concept of pure functional components, ensuring that the same input always results in the same output. Props are passed as function arguments. // Using ES6 arrow functions with implicit return: const PureComponent = ({url ...

Trouble with CSS styling in Asp.Net MVC dropdown list

I have encountered an issue while trying to apply a CSS class to an ASP.NET MVC dropdown list. The CSS class works fine for the EditorFor case, but not for the DropDownListFor case. I am wondering what could be missing from my code? Here is the working CS ...

PrimeNG - Sticky header feature malfunctioning in the p-table

Hello there, I am currently using PrimeNG p-table which features both horizontal and vertical scrolling. My goal is to implement a sticky header for the table, so far I have attempted two methods: [scrollable]="true" scrollHeight="350px" ...

Encountering issues when adding information to a React table

Every time I try to submit data, I encounter an error message. Line 53: Expected an assignment or function call and instead saw an expression no-unused-expressions I am attempting to add user-submitted data onto a table as td elements. Could someon ...