I am trying to make the menu height responsive by setting it equal to the window height using CSS. I want the menu height to increase as the page length increases due to added elements. I have attempted using "height:100%" and "height: 100vh" in the styles without success.
Can anyone offer assistance?
The code snippet is shown below:
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 {
background: #545454;
color: #FFFFFF;
text-decoration: none;
color: white;
margin-left: 0%;
font-weight: bold;
}