Меню компонента панели приложений Material UI не отображается после переключения

avatar
Saigal Amatya
8 апреля 2018 в 11:51
2696
2
1

Я играю с компонентами App Bar и Drawer в Material-UI. Всякий раз, когда я нажимаю на меню «Гамбургер» на панели приложений, ящик переключается. Но моя иконка гамбургера как бы полностью закрыта. Поэтому, если я хочу, чтобы мое меню Drawer отключалось, мне нужно обновить страницу. Мои компоненты следующие:

App.js

class App extends Component {
render() {
return (
  <MuiThemeProvider>
    <div className="App">
      <AppBarComponent />


     </div>
   </MuiThemeProvider>
  );
 }
}

AppBarComponent.js

  class AppBarComponent extends React.Component {

  constructor(props) {
    super(props);
    this.state = { open: false };
  }

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

  render() {
    return (
      <div>
        <AppBar title="App Bar Title"
          iconClassNameRight="muidocs-icon-navigation-expand-more"
          onLeftIconButtonClick={this.handleToggle}
        />
        <Drawer open={this.state.open}>
          <MenuItem>Menu Item 1</MenuItem>
          <MenuItem>Menu Item 2</MenuItem>
          </Drawer>
      </div>
    );
  }
};

export default AppBarComponent;

Каждый раз, когда я нажимаю на меню гамбургеров, ящик переключается как:

enter image description here

Как мы видим, меню гамбургеров полностью раскрыто. Как я могу сделать компонент App Bar отзывчивым? Должен ли я писать класс css вручную или есть способ его настроить?

Источник

Ответы (2)

avatar
sabin shrestha
8 апреля 2018 в 12:27
1

Единственным решением, которое может быть, является переключение ящика с правой стороны. Свойство openSecondary доступно в компоненте Drawer, вы можете сделать его логическим значением true для переключения с левой стороны.

Saigal Amatya
8 апреля 2018 в 12:39
0

Свойство openSecondary просто переключает компонент Drawer справа. Мой вопрос в том, как я могу переключить его, не закрывая меню гамбургеров на стороне по умолчанию.

avatar
P.Segura
20 декабря 2018 в 16:29
0

Вы можете установить z-индекс ящика на что-то меньшее, чем z-индекс AppBar. Измените положение AppBar на абсолютное, а ящик на относительное. Возможно, придется поиграться с набивкой, но не повредит.