How do I create a responsive sidebar component using React's Material UI?

javascript reactjs material-ui refluxjs
rishi kilaru picture rishi kilaru · May 6, 2017 · Viewed 8.7k times · Source

I am trying to create responsive side bar using react material design but couldn't find a way to do it.

The page content should be responsive when the sidebar opens, and the sidebar should not overlay on the page content.

It should look like https://blackrockdigital.github.io/startbootstrap-simple-sidebar/.

The code so far is:

Answer

Aanchal1103 picture Aanchal1103 · May 7, 2017

Material ui drawer doesn't really support this feature. You can checkout this issue #4752 on material ui repo where someone has implemented this functionality through css. https://github.com/callemall/material-ui/issues/4752

Related questions

MUI customize button color?

I am struggling to modify button colors in MUI next (v1). How would I set muitheme to behave similarity to bootstrap, so I could just use "btn-danger" for red, "btn-success" for green... ? I tried with custom className but it doesn't …

Read More
Uncaught Invariant Violation: Too many re-renders. React limits the number of renders to prevent an infinite loop

I'm trying to add a snackBar in order to display a message whenever a user signIn or not. SnackBar.jsx: import React from "react"; import PropTypes from "prop-types"; import classNames from "classnames"; import CheckCircleIcon from "@material-ui/icons/CheckCircle"; import ErrorIcon …

Read More
How get data from material-ui TextField, DropDownMenu components?

I create form, I have several TextField, DropDownMenu material-ui components included, question is how I can collect all data from all TextFields, DropDownMenus in one obj and sent it on server. For TextField it has TextField.getValue() Returns the value …

Read More