<template>
  <div id="menu">
    <div class="container">
      <div class="pure-menu pure-menu-horizontal">
        <ul class="pure-menu-list">
          <menu-link route="/admin/uploads" :title="$t('admin.menu.uploads')"></menu-link>
          <menu-link route="/admin/codes" :title="$t('admin.menu.codes')"></menu-link>
          <menu-link route="/admin/users" :title="$t('admin.menu.users')"></menu-link>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
var menuLink =  {
  props: ['route', 'title'],
  template: '<router-link tag="li" :to="route" class="pure-menu-item" active-class="pure-menu-selected">' +
            '<a class="pure-menu-link">{{ title }}</a>' +
            '</router-link>'
};


export default {
  data()
  {
    return {
    };
  },

  components: {
    'menu-link': menuLink
  }
}
</script>

<style lang="scss">
@import '../../../../node_modules/purecss/build/menus.css';


#menu
{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;

  background-color: black;

  .pure-menu-link
  {
    color: white;

    &:hover
    {
      background-color: #323232;
    }
  }

  .pure-menu-selected
  {
    .pure-menu-link, .pure-menu-link:hover
    {
      background-color: #228dd4;
    }
  }
}
</style>