bramw_baserow/web-frontend/modules/builder/components/page/PageHeaderMenuItems.vue

<template>
  <ul class="header__filter">
    <li
      v-for="(itemType, index) in pageHeaderItemTypes"
      :key="itemType.getType()"
      class="header__filter-item"
    >
      <a
        ref="button"
        class="header__filter-link"
        @click="itemType.onClick($refs.component[index], $refs.button[index])"
      >
        <i class="header__filter-icon fas" :class="`fa-${itemType.icon}`"></i>
        <span class="header__filter-name">{{ itemType.label }}</span>
      </a>
      <component :is="itemType.component" ref="component" :page="page" />
    </li>
  </ul>
</template>

<script>
export default {
  name: 'PageHeaderMenuItems',
  props: {
    page: {
      type: Object,
      required: true,
    },
  },
  computed: {
    pageHeaderItemTypes() {
      return Object.values(this.$registry.getAll('pageHeaderItem'))
    },
  },
}
</script>