css初级项目如何实现响应式导航栏

<nav class="navbar">
  <div class="logo">Logo</div>
  <ul class="nav-links">
    <li><a href="#">首页</a></li>
    <li><a href="#">关于</a></li>
    <li><a href="#">服务</a></li>
    <li><a href="#">联系</a></li>
  </ul>
  <div class="burger">
    <span></span>
    <span></span>
    <span></span>
  </div>
</nav>

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #333;
  padding: 1rem;
}
<p>.logo {
color: white;
font-size: 1.5rem;
}</p><p>.nav-links {
list-style: none;
display: flex;
gap: 2rem;
}</p><p>.nav-links a {
color: white;
text-decoration: none;
}</p>

@media (max-width: 768px) {
  .nav-links {
    position: absolute;
    top: 70px;
    right: 0;
    width: 100%;
    height: calc(100vh - 70px);
    background: #333;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: translateX(100%);
    transition: transform 0.3s ease-in;
  }
<p>.nav-links.active {
transform: translateX(0);
}</p><p>.burger {
display: block;
cursor: pointer;
}</p><p>.burger span {
display: block;
width: 25px;
height: 3px;
margin: 5px auto;
background: #fff;
transition: all 0.3s ease;
}
}</p>

document.querySelector('.burger').addEventListener('click', function() {
  document.querySelector('.nav-links').classList.toggle('active');
});