I need the menu to adjust its height dynamically as the content of the page increases vertically. Even though I have applied "height:100%" in the styles, it doesn't seem to work.
Can anyone assist with this issue?
Here is the code snippet:
import React, { Component } from 'react';
import Menu from 'material-ui/Menu';
import MenuItem from 'material-ui/MenuItem';
import './mystyle.css';
const mainmenu = {
width: '180px',
height: '100%',
};
class MenuView extends Component {
render() {
return (
<div className="dash-menuview">
<Menu style={mainmenu} className="mydashboard">
<MenuItem primaryText="My Name" style={{color:'white'}} href="#/name" onClick={handlers.changeURL}/>
<MenuItem primaryText="Personal Information" style={{color:'white'}} href="#/information" onClick={handlers.changeURL}/>
<MenuItem primaryText="My Address" style={{color:'white'}} href="#/current" onClick={handlers.changeURL}/>
<MenuItem primaryText="My Files" style={{color:'white'}} href="#/files" onClick={handlers.logout}/>
</Menu>
</div>
);
}
}
export default MenuView;
mystyle.css
.dash-menuview {
margin-left: -8.8%;
}
.mydashboard a {
color: #FFFFFF;
text-decoration: none;
}