StationHeader.vue 2.9 KB

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