CommunityHeader.vue 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133
  1. <template>
  2. <nav class='nav'>
  3. <div class='nav-left'>
  4. <a class='nav-item logo' href='#' v-link='{ path: "/" }' @click='this.$dispatch("leaveStation", title)'>
  5. Musare
  6. </a>
  7. <a class='nav-item' href='#' v-if='isOwner()' @click='$parent.toggleModal("editStation")'>
  8. <span class='icon'>
  9. <i class='material-icons'>settings</i>
  10. </span>
  11. </a>
  12. </div>
  13. <!--<div class='nav-center'>
  14. {{title}}
  15. </div>-->
  16. <span class="nav-toggle" :class="{ 'is-active': isMobile }" @click="isMobile = !isMobile">
  17. <span></span>
  18. <span></span>
  19. <span></span>
  20. </span>
  21. <div class="nav-right nav-menu" :class="{ 'is-active': isMobile }">
  22. <a class='nav-item' href='#' @click='$parent.sidebars.queue = !$parent.sidebars.queue' v-if='$parent.station.partyMode === true'>
  23. <span class='icon'>
  24. <i class='material-icons'>queue_music</i>
  25. </span>
  26. </a>
  27. <a v-if='isOwner()' class='nav-item' href='#' @click='$parent.skipStation()'>
  28. <span class='icon'>
  29. <i class='material-icons'>skip_next</i>
  30. </span>
  31. </a>
  32. <a v-if='!isOwner() && $parent.$parent.loggedIn' class='nav-item' href='#' @click='$parent.voteSkipStation()'>
  33. <span class='icon'>
  34. <i class='material-icons'>skip_next</i>
  35. </span>
  36. </a>
  37. <a class='nav-item' href='#' v-if='isOwner() && $parent.paused' @click='$parent.resumeStation()'>
  38. <span class='icon'>
  39. <i class='material-icons'>play_arrow</i>
  40. </span>
  41. </a>
  42. <a class='nav-item' href='#' v-if='isOwner() && !$parent.paused' @click='$parent.pauseStation()'>
  43. <span class='icon'>
  44. <i class='material-icons'>pause</i>
  45. </span>
  46. </a>
  47. <!--<a class='nav-item' href='#'>
  48. <span class='icon'>
  49. <i class='material-icons'>chat</i>
  50. </span>
  51. </a>-->
  52. <!--<a class='nav-item' href='#' @click='$parent.sidebars.users = !$parent.sidebars.users'>
  53. <span class='icon'>
  54. <i class='material-icons'>people</i>
  55. </span>
  56. </a>-->
  57. <a class='nav-item' href='#' @click='$parent.sidebars.playlist = !$parent.sidebars.playlist'>
  58. <span class='icon'>
  59. <i class='material-icons'>library_music</i>
  60. </span>
  61. </a>
  62. </div>
  63. </nav>
  64. </template>
  65. <script>
  66. export default {
  67. data() {
  68. return {
  69. title: this.$route.params.id,
  70. isMobile: false
  71. }
  72. },
  73. methods: {
  74. isOwner: function () {
  75. return this.$parent.$parent.role === 'admin' || this.$parent.$parent.userId === this.$parent.station.owner
  76. }
  77. }
  78. }
  79. </script>
  80. <style lang='scss' scoped>
  81. @import 'theme.scss';
  82. .nav {
  83. background-color: #03a9f4;
  84. }
  85. a.nav-item {
  86. color: $white;
  87. &:hover {
  88. color: $white;
  89. }
  90. padding: 0 18px;
  91. .icon {
  92. height: 64px;
  93. i {
  94. font-size: 2rem;
  95. line-height: 64px;
  96. height: 64px;
  97. width: 34px;
  98. }
  99. }
  100. }
  101. .nav-toggle {
  102. height: 64px;
  103. }
  104. .logo {
  105. font-size: 2.1rem;
  106. line-height: 64px;
  107. padding-left: 20px !important;
  108. padding-right: 20px !important;
  109. }
  110. .nav-center {
  111. display: flex;
  112. align-items: center;
  113. text-transform: uppercase;
  114. color: $blue;
  115. font-size: 22px;
  116. }
  117. .nav-right.is-active .nav-item {
  118. background: #03a9f4;
  119. border: 0;
  120. }
  121. </style>