响应式导航栏汉堡菜单

Question

我想让我的导航在移动设备上看起来不错。 我设法将导航设置为移动设备，但我不知道如何继续使用汉堡菜单。

当我单击汉堡包图标时，它应该显示所有链接以及搜索栏。

在这里可以看到我的desktop navigation设计。

在这里您可以看到我的Mobile navigation设计。

我的HTML：

<div class="header">

  <div class="burgerMenu">
    <svg viewBox="0 -53 384 384" xmlns="http://www.w3.org/2000/svg"><path d="m368 154.667969h-352c-8.832031 0-16-7.167969-16-16s7.167969-16 16-16h352c8.832031 0 16 7.167969 16 16s-7.167969 16-16 16zm0 0"/><path d="m368 32h-352c-8.832031 0-16-7.167969-16-16s7.167969-16 16-16h352c8.832031 0 16 7.167969 16 16s-7.167969 16-16 16zm0 0"/><path d="m368 277.332031h-352c-8.832031 0-16-7.167969-16-16s7.167969-16 16-16h352c8.832031 0 16 7.167969 16 16s-7.167969 16-16 16zm0 0"/></svg>
  </div>


  <div class="logo">
    <img width="40" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg=="/>
    <span>MY CEO</span>
  </div>


  <div class="nav">
    <a href="#">home</a>
    <a href="#">list</a>
    <a href="#">content</a>
  </div>

  


<div class="research">
  <input type="text">
  <button class="toolbar-Research">
    <svg viewBox="0 0 478.208 478.208" >
    <path d="M473.418,449.285L303.28,279.148c59.759-73.087,48.954-180.779-24.132-240.538S98.369-10.344,38.61,62.742
      S-10.344,243.521,62.742,303.28c62.953,51.473,153.453,51.473,216.406,0l170.138,170.138c6.78,6.548,17.584,6.36,24.132-0.42
      C479.805,466.384,479.805,455.899,473.418,449.285z M171.218,307.751c-75.37-0.085-136.449-61.163-136.533-136.533
      c0-75.405,61.128-136.533,136.533-136.533s136.533,61.128,136.533,136.533S246.623,307.751,171.218,307.751z"/>
    </svg>
  </button>
</div>



<div class="account">
    <p>Shaunz</p>
    <img src="./assets/img/profil.jpg" alt="profil picture">
</div>
</div>

我的SCSS：

$c-main: #d27219;
$c-background: #1972d8;

.header{
  height: 4rem;
  background-color: #127dd4;
  display: flex;
  align-items: center;
  color: white;
  font-weight: 400;
}

.burgerMenu{
  width: 3rem;
  height: 3rem;
  //background-color: white;
  border-radius: 50%;
  display: none;
  align-items: center;
  margin: 0 1rem;
  svg{
    width: 2rem;
    height: 2rem;
    margin: 0 auto;
    fill: white;
  }
}

.logo{
  margin: 0 1rem;
  display: flex;
  align-items: center;
}


.nav{
  a{
    margin-left: 1.5rem;
    color: white;
    text-decoration: none;
    font-weight: 400;
    text-transform: uppercase;
  }
  a:first-of-type{
    margin-left: 4rem; 
  }
  a:hover{
    opacity: 0.8;
  }
}


.research{
  margin-left: auto;
  margin-right: 4rem;
  display: flex;
  text-align: center;
  button:focus {outline:0;}
  .toolbar-Research {
    height: 2rem;
    border-radius: 0px 6px 6px 0px;
    border: none;
    width: 2rem;
    height: 2rem;
    svg{
      fill: $c-background;
    }
  }

  input{
    border: none;
    height: 2rem;
    border-radius: 6px 0px 0px 6px;
  }
  input:focus{
    outline: none;
  }
}

.account{
  display: flex;
  align-items: center;
  margin: 0 1rem;
  img{
    width: 3rem;
    height: 3rem;
    background-color: white;
    border-radius: 50%;
  }
  p{
    margin-right: 1rem;;
  }
}
.account:hover{
  opacity: 0.8;
  cursor: pointer;
}


.active {
  display: block;
}


@media only screen and (max-width: 900px) {
  .account p{
    display: none; 
  }
  .research{
    margin-right: 0.5rem;
  }
}


@media only screen and (max-width: 700px) {
  .research{
    display: none;
  }
  .burgerMenu{
    display: flex;
  }
  .logo{
    margin: 0 auto;
  }
  .nav{
    display: none;
  }
}