My goal is to create a menu that initially displays with a certain width, but when a button is clicked, it will decrease the width to 50px and only show the icon.
I'm struggling to figure out how to adjust the width of my div and integrate this functionality into a semantic grid layout.
Here is the code snippet:
function Menu() {
const [open, setOpen] = useState(true);
const handleClick = e => {
e.preventDefault();
setOpen(!open);
};
return (
<Grid style={{background: '#eee'}}>
<Grid.Column computer={2} tablet={4} mobile={5} style={{background: '#000', padding:'0', height:'100vh'}}>
<div style={{background:'#000', width:'100%', height:'100%'}}>
</div>
</Grid.Column>
<Grid.Column width={14} style={{background: '#eee', padding:'0'}}>
<Button icon onClick={handleClick}>
<Icon name="align justify" />
</Button>
</Grid.Column>
</Grid>
);
}
CSS Styles:
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#root,
.App,
.ui.grid{
height: 100vh !important;
margin: 0 !important;
padding:0 !important;
}
View the live code example here.