enfrancais-app/src/components/nodes/NodeViewChildListGroup.vue

<template>
  <nav class="node-view-child-list-group">
    <b-list-group>
      <b-list-group-item
        v-for="child in children" :key="child.id"
        :variant="child.variant"
        href="javascript:;"
        @click="$parent.$emit('open-child', { childId: child.id })"
      >
        {{ $t('variants.' + child.variant) }}
      </b-list-group-item>
    </b-list-group>
  </nav>
</template>

<script>
export default {
  name: 'NodeViewChildListGroup',

  props: {
    children: { type: Array, required: true }
  }
}
</script>

<style lang="scss" scoped>
.node-view-child-list-group {
  position: relative;
  z-index: 1;

  .list-group {
    font-family: $font-family-base;
    font-weight: $font-weight-bold;

    @include media-breakpoint-up($size-bp) {
      font-size: 1.75rem;
    }

    &-item {

    }
  }
}
</style>