title: React MUI Drawer overlaying page content
body: <p>I'd like to have a Drawer that doesn't overlay the page content. So far I have the following code</p>
  <pre><code>  &lt;ThemeProvider theme={oclockTheme}&gt;
          &lt;main&gt;
              &lt;Drawer
                  variant='temporary'
                  open={showMenu}
                  hideBackdrop
              &gt;
                  &lt;List&gt;
                      &lt;ListItem sx={{ justifyContent: 'center' }}&gt;
                          &lt;img src={oclockLogo} alt=&quot;O'Clock logo&quot; /&gt;
                      &lt;/ListItem&gt;
                  &lt;/List&gt;
                  
                  &lt;Divider light /&gt;
                  
                  &lt;List &gt;
                      &lt;ListItem&gt;
                         Menu item
                      &lt;/ListItem&gt;
  
                  &lt;/List&gt;
              &lt;/Drawer&gt;
              
              &lt;Button onClick={() =&gt; setShowMenu(true)} variant=&quot;contained&quot; color=&quot;primary&quot;&gt;Teste&lt;/Button&gt;
          &lt;/main&gt;
      &lt;/ThemeProvider &gt;
  </code></pre>
  <p>And the problem is that the Drawer overlays my button</p>
  <p><a href="https://i.stack.imgur.com/GtTDd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GtTDd.png" alt="Drawer closed" /></a></p>
  <p><a href="https://i.stack.imgur.com/7NSH2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7NSH2.png" alt="Drawer opened" /></a></p>
  <p>And I'd like to push my bottom to the right when the Drawer is opened and pull it back to the left when it's closed...</p>
  <p>I've seen a solution in the library docs, but I'd like to know if anyone else can help me doing it with a cleaner/smaller code. I also know that we have the SwipeableDrawer, but I couldn't find a way to change its styles...</p>