css - Make navbar collapse with menu icon

Question

wondering how to make this navbar I have collapse the list items to a menu button on mobile view? Preferably similar to the way apple does with the left menu icon. Client wants the site to be very apple, and I am about 5 months into this so need a bit of help and clear explanations if possible

<template>
  <div class="wrapper">
    <nav>
      <div class="appleNav">
        <ul>
          <li>
            <a><img src="img/TBetMake_Logo-RGB-Hori-noTAG.png" height="20"></a>
          </li>
          <li><a href="/">Home</a></li>
          <li><a :class="{active:$route.name=='integrity'}" class='nav-link addMargin' onclick='document.documentElement.scrollTop = 0;' href="/integrity">Integrity</a></li>
          <li><a :class="{active:$route.name=='controls'}" class='nav-link addMargin' onclick='document.documentElement.scrollTop = 0;' href="/controls">Controls</a></li>
          <li><a :class="{active:$route.name=='platforms'}" class='nav-link addMargin' onclick='document.documentElement.scrollTop = 0;' href="/platforms">Platforms</a></li>
          <li><a :class="{active:$route.name=='mts'}" class='nav-link addMargin' onclick='document.documentElement.scrollTop = 0;' href="/mts">MTS</a></li>
          <li><a :class="{active:$route.name=='feeds'}" class='nav-link addMargin' onclick='document.documentElement.scrollTop = 0;' href="/feeds">Feeds</a></li>
          <li><a :class="{active:$route.name=='investors'}" class='nav-link addMargin' onclick='document.documentElement.scrollTop = 0;' href="/investors">Investors</a></li>
        </ul>
      </div>
    </nav>
  </div>
</template>
    
<style scoped>
  .appleNav {
    max-width: 1200px;
    margin: 0 auto;
  }

  body {
    margin: 0;
  }

  nav {
    height: auto;
    background: #323232;
  }

  nav ul {
    display: flex;
    height: 44px;
    justify-content: space-around;
    align-items: center;
    padding: 0;
    margin: 0 auto;
    list-style-type: none;
  }

  nav a {
    display: block;
    color: white;
    font-size: 15px;
    font-weight: lighter;
    text-decoration: none;
    transition: 0.3s;
  }
</style>

question from:https://stackoverflow.com/questions/65929522/make-navbar-collapse-with-menu-icon

Answer 1

Waitting for answers