<template>
  <div class="d-flex justify-space-between links-menu">
    <v-btn color="primary" depressed tile nuxt to="/">
      <v-icon>mdi-home</v-icon>
    </v-btn>

    <v-menu offset-y rounded="0">
      <template #activator="{ on, attrs }">
        <v-btn v-bind="attrs" color="primary" depressed tile v-on="on">
          About <v-icon>mdi-menu-down</v-icon>
        </v-btn>
      </template>
      <v-list>
        <v-list-item nuxt to="/acknowledgement">
          <v-list-item-content>
            <v-list-item-title>Acknowledgement</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
        <v-list-item nuxt to="/disclaimer">
          <v-list-item-content>
            <v-list-item-title>Disclaimer</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
        <v-list-item nuxt to="/accessibility">
          <v-list-item-content>
            <v-list-item-title>Accessibility</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
        <v-list-item nuxt to="/privacy_notice">
          <v-list-item-content>
            <v-list-item-title>Privacy Notice</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-menu>
  </div>
</template>

<script>
export default {}
</script>

<style lang="scss" scoped>
.links-menu {
  width: 100%;
}
</style>