dashboard.vue

<template>
  <div :class="$style.Wrapper">
    <strong>
      <bm-link
        :class="$style.MenuItem"
        to="/dashboard/orders"
      >
        <i18n path="dashboard_menu_orders" />
      </bm-link>
    </strong>
    <bm-link
      v-if="getBuyback"
      :class="$style.MenuItem"
      data-test="buyback-link"
      to="/dashboard/sourcing"
      anchor
    >
      <i18n path="dashboard_menu_buyback" />
    </bm-link>
    <bm-link
      :class="$style.MenuItem"
      to="/dashboard/profil"
      anchor
    >
      <i18n path="dashboard_menu_info" />
    </bm-link>
    <bm-link
      :class="$style.MenuItem"
      to="/dashboard/others"
      anchor
    >
      <i18n path="dashboard_menu_other" />
    </bm-link>
    <a
      :class="[$style.Logout, $style.MenuItem]"
      href="/logout"
    >
      <i18n path="dashboard_menu_logout" />
    </a>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import BmLink from '@core/components/cta/Link'

export default {
  components: {
    BmLink,
  },
  computed: {
    ...mapGetters(['getBuyback']),
  },
}
</script>

<style lang="sass" module>
.Wrapper
  display: flex
  max-width: 81rem
  background: $white
  overflow: hidden
  padding: 1rem 2rem
  border: 1px solid $bmBlueGrey
  border-radius: 0.2rem
  flex-direction: column
  @media #{$over-sm}
    padding: 0 2rem
    height: 5rem
    align-items: center
    flex-direction: row

.MenuItem
  margin-bottom: 0.5rem
  text-decoration: none
  @media #{$over-sm}
    margin: 0
    margin-right: 2rem

.Logout
  color: $dark
  padding-top: 0.5rem
  text-align: right
  border-top: 1px solid $bmBlueGrey
  @media #{$over-sm}
    padding: 0
    margin: 0
    margin-left: auto
    border: none
</style>