<template>
  <div >
    <ul class="help-menu">
      <li v-for="page in pages" class="help-menu-element-container" @click="$emit('changePage', page.page)"><div :class="{'help-menu-element-active': isActive(page.page)}" class="help-menu-element">{{ page.title }}</div></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "TheHelpMenu",
  emits: ['changePage'],
  props: {
    currentPage: {
      type: String,
      required: true
    },
    pages: {
      type: Array,
      required: true
    }
  },
  methods: {
    isActive(page) {
      return page === this.currentPage;
    }
  },
}
</script>


<style scoped>

.help-menu-element {
  font-weight: 400;
  font-size: 1.4rem;
  color: #6B869C;
  height: 25px;

}


.help-menu-element:hover, .help-menu-element-active {
  color: #002F54;
  border-bottom: 5px solid #5AF0B4;
  /* AE0055 */
  height: 25px;
  cursor: pointer;
}

.help-menu-element-container {
  display: flex;
  justify-content: flex-start;
  list-style-type: none;
}

</style>