<template>
  <div class="Burger" :class="{ open }">
    <nav class="z-4" ref="navElement">
      <ul class="row">
        <li v-for="({label, to, aria, icon}) in navigation" :key="label">
          <NuxtLink :to="to" :aria-label="aria" active-class="active" class="inline-flex-row big-gap" @click="close">
            <Icon :name="icon" mode="svg" />
            {{ label }}
          </NuxtLink>
        </li>
      </ul>
    </nav>
  </div>
</template>

<script setup lang="ts">
import { navigation } from '~/utils/navigation'

const navElement = useTemplateRef('navElement')

const nav = useNavigation()
const close = () => nav.hideNavigation()
const open = computed(() => nav.isNavigationVisible.value)

onClickOutside(navElement, close)
</script>