zengzy / hhrcs_web · Files

<template>
  <VaCard class="mb-4 p-6">
    <section class="grid sm:grid-cols-2 lg:grid-cols-3 sm:gap-5 lg:gap-9">
      <div v-for="section in navSections" :key="section" class="mb-6 md:mb-0">
        <h3 class="h5 mb-4">{{ section }}</h3>
        <ul class="leading-5">
          <li v-for="item in navigation[section]" :key="`${section}-${item.name}`" class="mb-4">
            <a class="va-link" href="#">{{ item.name }}</a>
          </li>
        </ul>
      </div>
    </section>
  </VaCard>
</template>

<script setup>
import { computed } from 'vue'
import navigation from '../data/navigationLinks.json'

const navSections = computed(() => {
  return Object.keys(navigation)
})
</script>