StationHeader.vue 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  1. <template>
  2. <nav class="nav">
  3. <div class="nav-left">
  4. <a class="nav-item" href="#" v-link="{ path: '/' }" @click="this.$dispatch('leaveStation', title)">
  5. <span class="icon">
  6. <i class="material-icons">home</i>
  7. </span>
  8. </a>
  9. <a class="nav-item" href="#" @click="$parent.toggleModal()">
  10. <span class="icon">
  11. <i class="material-icons">playlist_add</i>
  12. </span>
  13. </a>
  14. <a class="nav-item" href="#">
  15. <span class="icon">
  16. <i class="material-icons">flag</i>
  17. </span>
  18. </a>
  19. <a class="nav-item" href="#">
  20. <span class="icon">
  21. <i class="material-icons left">skip_next</i>
  22. </span>
  23. </a>
  24. <a class="nav-item" href="#" v-if="$parent.$parent.role === 'admin' && $parent.locked" @click="$parent.unlockStation()">
  25. <span class="icon">
  26. <i class="material-icons left">lock_outline</i>
  27. </span>
  28. </a>
  29. <a class="nav-item" href="#" v-if="$parent.$parent.role === 'admin' && !$parent.locked" @click="$parent.lockStation()">
  30. <span class="icon">
  31. <i class="material-icons left">lock_open</i>
  32. </span>
  33. </a>
  34. <a class="nav-item" href="#" v-if="$parent.$parent.role === 'admin' && $parent.paused" @click="$parent.resumeStation()">
  35. <span class="icon">
  36. <i class="material-icons left">play_arrow</i>
  37. </span>
  38. </a>
  39. <a class="nav-item" href="#" v-if="$parent.$parent.role === 'admin' && !$parent.paused" @click="$parent.pauseStation()">
  40. <span class="icon">
  41. <i class="material-icons left">pause</i>
  42. </span>
  43. </a>
  44. </div>
  45. <div class="nav-center">
  46. {{title}}
  47. </div>
  48. <!--<span class="nav-toggle" :class="{ 'is-active': isActive }" @click="toggleMobileMenu()">
  49. <span></span>
  50. <span></span>
  51. <span></span>
  52. </span>-->
  53. <div class="nav-right">
  54. <a class="nav-item" href="#">
  55. <span class="icon">
  56. <i class="material-icons">queue_music</i>
  57. </span>
  58. </a>
  59. <a class="nav-item" href="#">
  60. <span class="icon">
  61. <i class="material-icons">chat</i>
  62. </span>
  63. </a>
  64. <a class="nav-item" href="#">
  65. <span class="icon">
  66. <i class="material-icons">people</i>
  67. </span>
  68. </a>
  69. </div>
  70. </nav>
  71. </template>
  72. <script>
  73. export default {
  74. data() {
  75. return {
  76. title: this.$route.params.id,
  77. isActive: false
  78. }
  79. },
  80. methods: {
  81. toggleMobileMenu: function() {
  82. this.isActive = !this.isActive;
  83. }
  84. }
  85. }
  86. </script>
  87. <style lang="scss" scoped>
  88. @import 'theme.scss';
  89. .nav {
  90. background-color: $grey-darker;
  91. }
  92. a.nav-item {
  93. color: $white;
  94. &:hover {
  95. color: $white;
  96. }
  97. }
  98. .nav-center {
  99. display: flex;
  100. align-items: center;
  101. text-transform: uppercase;
  102. color: $blue;
  103. font-size: 22px;
  104. }
  105. </style>