Why the burger menu does not pop out? - css

Question

I tried building a burger-menu that will pop out some items when clicked. I managed to create and style everything but when I click it the menu does not come out. I do not understand why, what suppose to make this happen is clicking on the check-box and it expanding the max-height of the .menu class to a specific height. I am trying to achieve this with pure css.
Here is the relevant code:
The react component I am trying to style:
...
const TopBar = () => {
...
return (
<header className="header">
<input className="menu-btn" type="checkbox" id="menu-btn" />
<label className="menu-icon" htmlFor="menu-btn"><span className="nav-icon"></span></label>
<div className="logo">Sort Visualizer</div>
<section className="menu">
<div className="algorithm-select">
<select name="Sorting Algorithm"
id="algorithm"
onChange={(e) => handleAlgorithmSelect(e)}
value={data.sortingAlgorithm}>
{sortManager.getAllAlgorithms().map((value) =>
<option value={value}
key={shortid.generate()}
>{value}</option>)}
</select>
</div>
<div className="array-size">
<div className="slider-container">
5
<input type="range"
min="5"
max="100"
value={data.length}
onChange={(e) => handleLength(e)}
className="slider"
id="myRange"
/>
100
</div>
</div>
<div>
<button className="randomize-btn" onClick={() => generateArray()}>Randomize</button>
</div>
</section>
</header>
);
}
export default TopBar;
Here is the whole stylesheet:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 62.5%;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* TopBar */
.header {
background-color: #222;
color: #fff;
box-shadow: 1px 3px 10px 0 rgba(0, 0, 0, .4);
position: fixed;
width: 100%;
height: 8%;
z-index: 3;
}
.header .menu {
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
overflow: hidden;
}
.header .menu div {
display: block;
padding: 20px;
border-right: 1px solid #ccc;
}
.header .logo {
float: left;
display: block;
font-size: 3rem;
padding: 5px 20px;
}
.header .menu-btn {
position: absolute;
top: 0;
right: 0;
z-index: 2;
cursor: pointer;
width: 45px;
height: 45px;
opacity: 0;
}
.header .menu-icon {
position: absolute;
top: 0;
right: 0;
z-index: 1;
width: 40px;
height: 40px;
margin: 6px 5px;
display: flex;
align-items: center;
justify-content: center;
}
.header .menu-icon .nav-icon {
position: relative;
width: 75%;
height: 2px;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.4s ease;
}
.header .menu-icon .nav-icon:before,
.header .menu-icon .nav-icon:after {
content: '';
position: absolute;
z-index: 1;
top: -9px;
width: 100%;
height: 2px;
background: inherit;
}
.header .menu-icon .nav-icon:after {
top: 9px;
}
.header .menu-btn:checked + .menu-icon .nav-icon {
transform: rotate(135deg);
}
.header .menu-btn:checked + .menu-icon .nav-icon:before,
.header .menu-btn:checked + .menu-icon .nav-icon:after {
top: 0;
transform: rotate(90deg);
}
.header .menu-btn:checked ~ .menu {
max-height: 240px;
}
I tried a few things but it wasn't successful. What am I missing?