Maak een geanimeerde hamburger menu knop in Nuxt en Tailwind

Laten we samen beginnen om de knop te maken. Ik zal de code laten zien en je dan vervolgens per regel uitleggen wat het is, wat het doet en waarom we het doen.

We beginnen met het schrijven van onze HTML code. Omdat we in Nuxt werken, schrijven we dit natuurlijk binnen een template.

<template>
  <div
      class="cursor-pointer menu-button"
      :class="{ 'open' : menuOpened }"
      @click="menuOpened = !menuOpened">
    <div class="menu-hamburger" />
  </div>
</template>

Wat we hier doen is het volgende:

• We maken een div aan welke als "wrapper" zal dienen. Hierbinnen wordt het hamburger menu dus weergegeven.
• We voegen twee classes toe namelijk cursor-pointer en menu-button. De class cursor-pointer is een class uit Tailwind welke er voor zorgt dat wanneer je over het element gaat met je muis, dat de cursor in een pointer veranderd. Dit maakt het duidelijk voor de gebruiker dat er een interactie mogelijk is.
• De class menu-button is een class welke wij zelf aanmaken zodat we hier wat styling aan kunnen toevoegen wanneer er een bepaalde staat actief is.
• Natuurlijk voegen we ook een @click event toe. Wanneer de gebruiker op de div klikt zal de functie, of code die we meegeven aan de @click uitgevoerd worden en is het voor ons mogelijk om een status te wijzigen zodat we weten of het menu open of dicht is.
• Nu we de HTML klaar hebben staan moeten we natuurlijk ook de variabele maken waarin we de status opslaan. Dit doen we met onderstaande code:

import { ref } from '@nuxtjs/composition-api'

export default {
  setup () {
    const menuOpened = ref(false)

    return {
      menuOpened,
    }
  },
}

• Het eerste wat we doen is de ref functie importeren van de Nuxt Composition API. De ref functie zorgt er simpel gezegd voor dat we een reactieve waarde (reactive value) kunnen toekennen. Wanneer de waarde dus veranderd, zal dit direct ook reflecteren in je template en de rest van de code.
• Vervolgens maken we een constante variabele met de naam menuOpened aan van het boolean type met de standaard waarde false.
• Omdat we deze waarde ook in onze template willen kunnen gebruiken, moeten we hem ook returnen. Dit doen we aan het einde van de setup methode.
• Nu we alles klaar hebben staan, rest ons alleen nog wat styling te schrijven.

.menu-button {
  @apply w-8 h-7 relative flex items-center justify-center;
}

.menu-hamburger {
  @apply bg-black w-6 h-1 rounded-2xl transition-all ease-in-out duration-500;
}

.menu-hamburger::after,
.menu-hamburger::before {
  content: '';
  @apply bg-black w-6 h-1 rounded-2xl absolute transition-all ease-in-out duration-500;
}

.menu-hamburger::before {
  @apply translate-y-2;
}

.menu-hamburger::after {
  @apply -translate-y-2;
}

.menu-button.open .menu-hamburger {
  @apply -translate-x-3 bg-transparent;
}

.menu-button.open .menu-hamburger::before {
  @apply rotate-45 -translate-y-0 translate-x-3;
}

.menu-button.open .menu-hamburger::after {
  @apply -rotate-45 -translate-y-0 translate-x-3;
}

• Het eerste wat we doen is de style tag toevoegen aan onze code. We geven deze het attribuut scoped mee. Dit doen we zodat we zeker weten dat onze CSS alleen invloed heeft op dit specifieke component en niet op andere componenten binnen de website.
• Nu kunnen we een hoogte en breedte toekennen aan onze button. Dit doen we door de Tailwind classes w-8 en h-7 te gebruiken. We gebruiken ook de classes flex, items-center en justify-center om er voor te zorgen dat alles binnen de div altijd horizontaal en verticaal in het midden staat.
• Wat is een hamburger menu zonder de bekende drie streepjes!? We gaan deze nu toevoegen. We maken onze classe .menu-hamburger aan en voegen daar onder andere ook de classes transition-all, ease-in-out en duration-500 aan toe. Wat deze classes doen is er voor zorgen dat de animatie geleidelijk verloopt en niet in één keer gebeurd. De animatie gaat nu van punt A naar punt B tijdens een duratie van 500 milliseconden.
• Wanneer je nu naar je pagina kijkt zal je zien dat er één zwarte streep staat. We missen er dus nog twee! Deze gaan we nu toevoegen door gebruik te maken van pseudo classes.

.menu-hamburger::after,
.menu-hamburger::before {
  content: '';
  @apply bg-black w-6 h-1 rounded-2xl absolute transition-all ease-in-out duration-500
}

.menu-hamburger::before {
  @apply translate-y-2
}

.menu-hamburger::after {
  @apply -translate-y-2
}

.menu-button.open .menu-hamburger::before {
  @apply rotate-45 -translate-y-0 translate-x-3
}

.menu-button.open .menu-hamburger::after {
  @apply -rotate-45 -translate-y-0 translate-x-3
}

• Met het eerste stuk CSS definieren we een before en after zonder content. We zorgen er hiermee voor dat we twee extra streepjes krijgen. Het ene streepje zetten we een klein beetje omhoog door er later een translate-y-2 op te zetten, terwijl we het andere streepje weer wat verder naar ondere plaatsen met -translate-y-2.
• Het laatste wat nu rest is het maken van de animatie voor elk net toegevoegd steepje. Dit kunnen we simpelweg doen door te kijken wanneer de open class is toegevoegd aan de div. We doen dit als volgt: .menu-button.open. Dit betekend letterlijk "Als de div met class menu-button" ook een class open heeft, dan..."
• Vervolgens zie je dat we een transform uitvoeren. De classes rotate-45 -translate-y-0 translate-x-3 zorgen er voor dat de streep 45 graden draait en dat zijn positie op de x-as horizontaal corrigeert. Dit doen we voor beide stepen individueel natuurlijk.
• Als het goed is heb je nu een mooie geanimeerde hamburger knop voor je website!