Как сделать адаптивное бургер меню?

Question

[ovsy]

Здравствуйте. Есть навигационное меню:


Его разметка:

<template>
  <nav class="main-menu top-menu">
    <ul>
      <li><a href="https://tion.news/" target="_blank">ICO</a></li>
      <li><a class="lng-unit" href="#p2p">{{ $t('header.menu.unit') }}</a></li>
      <li><a class="lng-chip" href="#stay">{{ $t('header.menu.chip') }}</a></li>
      <li><a class="lng-menu-ref" href="#ref">{{ $t('header.menu.referals') }}</a></li>
      <li><a class="lng-menu-garant" href="#garant">{{ $t('header.menu.warrantly') }}</a></li>
      <li><a class="lng-menu-node" href="#node">{{ $t('header.menu.node') }}</a></li>
      <li><a class="lng-menu-listing" href="https://tion.news/" target="_blank">{{ $t('header.menu.listing') }}</a></li>
      <li><a class="lng-menu-roadmap" href="https://tion.news/" target="_blank">{{ $t('header.menu.roadmap') }}</a></li>
      <li><a class="lng-menu-down" href="#download">{{ $t('header.menu.download') }}</a></li>
    </ul>
  </nav>
</template>

Как сделать из него бургер меню?

Comments

[IskDev]

Как вариант можно:
-Создать кнопку для открытия меню и скрыть ее
-На нужном брейкпоинте скрыть меню и отобразить кнопку
-Создать Vue компонент с адаптивным меню и через v-if отображать его по клику на кнопку