I am currently working on creating a horizontal menu with ReactJS and Material UI. However, I am facing a challenge where the menu is not responsive. Even when I resize the browser window, the menu size remains the same and only updates when I refresh the page with F5.
import React from 'react';
import AppBar from 'material-ui/AppBar';
import Drawer from 'material-ui/Drawer';
import MenuItem from 'material-ui/MenuItem';
import IconButton from 'material-ui/IconButton';
import NavigationMenu from 'material-ui/svg-icons/navigation/menu';
import NavigationClose from 'material-ui/svg-icons/navigation/close';
import Paper from 'material-ui/Paper';
import Menu from 'material-ui/Menu';
const style = {
display: 'inline-block',
margin: '0 32px 16px 0',
width: '100%'
};
const styleq = {
display: 'inline',
float: 'left',
width: '25%'
};
export default class MenuAlumno extends React.Component {
render() {
return (
<div>
<AppBar
title={<span style={STYLES.title}>- PLATFORM FOR INCIDENTS -</span>}
onTitleTouchTap={this.handleTouchTap}
titleStyle={STYLES.titleStyle}
iconElementLeft={this.state.drawerOpen ? <IconButton><NavigationClose/></IconButton> : <IconButton><NavigationMenu/></IconButton>}
onLeftIconButtonTouchTap={this.controlMenu}
/>
<Paper style={style}>
<Menu>
<MenuItem primaryText="Maps" style={styleq}/>
<MenuItem primaryText="Books" style={styleq}/>
<MenuItem primaryText="Flights" style={styleq} />
<MenuItem primaryText="Apps" style={styleq} />
</Menu>
</Paper>
</div>
);
}
}