Responsive navbar
how can I manipulate the left-nav class when checkbox in responsive-nav class is checked.
<div class="nav-links">
<div class="brand">
<a href="index.html"><img src="./images/logo.png" alt="Netflix Logo" class="logo"></a>
</div>
<ul class="left-nav">
<li><a href="#" class="active">Home</a></li>
<li><a href="#">Tv Shows</a></li>
<li><a href="#">Movies</a></li>
<li><a href="#">New & Popular</a></li>
<li><a href="#">My List</a></li>
</ul>
<ul class="right-nav">
<li><a href="#"><i class="fa-sharp fa-solid fa-magnifying-glass"></i></a></li>
<li><a href="#"><i class="fa-solid fa-bell"></i></a></li>
<li><a href="#"><img src="./images/netflix-avatar.png" alt="Profile Image" class="avatar"></a>
</li>
</ul>
<div class="responsive-nav">
<input type="checkbox" id="check">
<label for="check"><i class="fa-solid fa-bars"></i></label>
</div>
</div><div class="nav-links">
<div class="brand">
<a href="index.html"><img src="./images/logo.png" alt="Netflix Logo" class="logo"></a>
</div>
<ul class="left-nav">
<li><a href="#" class="active">Home</a></li>
<li><a href="#">Tv Shows</a></li>
<li><a href="#">Movies</a></li>
<li><a href="#">New & Popular</a></li>
<li><a href="#">My List</a></li>
</ul>
<ul class="right-nav">
<li><a href="#"><i class="fa-sharp fa-solid fa-magnifying-glass"></i></a></li>
<li><a href="#"><i class="fa-solid fa-bell"></i></a></li>
<li><a href="#"><img src="./images/netflix-avatar.png" alt="Profile Image" class="avatar"></a>
</li>
</ul>
<div class="responsive-nav">
<input type="checkbox" id="check">
<label for="check"><i class="fa-solid fa-bars"></i></label>
</div>
</div>
