<template>
  <section class="Navigation" :class="{ open }">
    <nav>
      <PpButton class="round text" @click="close()">
        <Icon name="uil:times" mode="svg" />
      </PpButton>
      <ul class="flex-col">
        <li v-for="page in pages">
          <NuxtLink :to="page.route" @click="close()" active-class="active">
            <Icon class="icon" :name="page.icon" mode="svg" />
            <span>{{ page.label }}</span>
          </NuxtLink>
        </li>
      </ul>
    </nav>
  </section>
</template>

<script setup lang="ts">
const nav = useNavigation()
const close = () => nav.hideNavigation()
const open = computed(() => nav.isNavigationVisible.value)

const pages = [
  {
    label: 'Home',
    icon: 'uil:home',
    route: '/'
  },
  {
    label: 'Schnellrechner',
    icon: 'uil:calculator',
    route: '/rechner'
  },
  {
    label: 'Wissen',
    icon: 'uil:brain',
    route: '/wissen'
  },
  // {
  //   label: 'Über uns',
  //   icon: 'users-alt',
  //   route: '/about-us'
  // }
]
</script>