<script setup lang="ts">
const { g, p } = useContentInjected()

const props = defineProps<{
  class?: string
  ux?: any
  linkProps?: any
}>()

const classes = useStyling(
  'scaffoldVerticalNavList',
  {
    slots: {
      base: '',
      list: 'flex flex-col',
      item: '',
    },
  },
  props
)
</script>

<template>
  <nav :class="classes.base">
    <ul :class="classes.list">
      <li :class="classes.item" v-for="page in g.scaffold.pages">
        <XText
          as="link"
          :link-props="{ to: p(page.link) }"
          :text="page.text"
          v-bind="props.linkProps"
        />
      </li>
    </ul>
  </nav>
</template>
