You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

Navbar.vue 3.9KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181
  1. <template>
  2. <div class="layout__navbar">
  3. <div class="navbar__left">
  4. <nuxt-link v-if="canNudify" to="/" class="navbar__item navbar__item--home">
  5. Upload
  6. </nuxt-link>
  7. <nuxt-link id="settings" class="navbar__item" to="/settings">
  8. Settings
  9. </nuxt-link>
  10. <nuxt-link v-if="unlockedBadTime" v-tooltip="{ content: 'Mini-game. Can you survive until the end? 🎮💀', placement: 'bottom' }" class="navbar__item" to="/games/badtime">
  11. Bad Time Game
  12. </nuxt-link>
  13. <a v-if="isDev" class="navbar__item" @click.prevent="createError">
  14. Force Error
  15. </a>
  16. </div>
  17. <div class="navbar__right">
  18. <nuxt-link v-tooltip="{placement: 'bottom', content: 'Alert Center'}" class="navbar__icon" to="/alerts">
  19. <font-awesome-icon v-if="hasAlerts" icon="exclamation-triangle" class="alerts--active" />
  20. <font-awesome-icon v-else icon="check-circle" class="alerts--ok" />
  21. </nuxt-link>
  22. <nuxt-link v-tooltip="{placement: 'bottom', content: 'About'}" class="navbar__icon" to="/about">
  23. <font-awesome-icon icon="info-circle" />
  24. </nuxt-link>
  25. <nuxt-link
  26. v-if="$provider.system.online"
  27. v-tooltip="{placement: 'bottom', content: 'DreamNet'}"
  28. class="navbar__icon"
  29. to="/dreamnet">
  30. <font-awesome-icon icon="users" />
  31. </nuxt-link>
  32. <a
  33. v-if="$provider.system.online"
  34. id="guide"
  35. v-tooltip="{placement: 'bottom', content: 'User\'s Guide.'}"
  36. class="navbar__icon"
  37. :href="manualURL"
  38. target="_blank">
  39. <font-awesome-icon icon="question-circle" />
  40. </a>
  41. <a
  42. v-if="$provider.system.online"
  43. v-tooltip="{placement: 'bottom', content: 'Donate and get benefits!'}"
  44. class="navbar__icon"
  45. :href="donateUrl"
  46. target="_blank">
  47. <font-awesome-icon :icon="['fab', 'patreon']" />
  48. </a>
  49. </div>
  50. </div>
  51. </template>
  52. <script>
  53. import { requirements, settings } from '~/modules/system'
  54. import { dreamtrack } from '~/modules/services'
  55. import { events } from '~/modules'
  56. export default {
  57. data: () => ({
  58. unlockedBadTime: settings.achievements.badtime,
  59. }),
  60. computed: {
  61. canNudify() {
  62. return requirements.canNudify
  63. },
  64. donateUrl() {
  65. return dreamtrack.get('urls.support.patreon', 'https://www.patreon.com/dreamnet')
  66. },
  67. manualURL() {
  68. return dreamtrack.get('urls.docs.manual', 'https://time.dreamnet.tech/docs/guide/upload')
  69. },
  70. isDev() {
  71. return process.env.NODE_ENV === 'development'
  72. },
  73. hasAlerts() {
  74. return requirements.hasAlerts
  75. },
  76. },
  77. mounted() {
  78. events.on('achievements.badtime', () => {
  79. this.unlockedBadTime = true
  80. })
  81. },
  82. methods: {
  83. createError() {
  84. throw new Error('UI TEST ERROR')
  85. },
  86. },
  87. }
  88. </script>
  89. <style lang="scss" scoped>
  90. @keyframes alertAnim {
  91. 0% {
  92. @apply text-danger-500;
  93. }
  94. 50% {
  95. @apply text-warning-500;
  96. }
  97. 100% {
  98. @apply text-danger-500;
  99. }
  100. }
  101. .layout__navbar {
  102. @apply flex bg-dark-500 z-10;
  103. @apply border-b border-dark-100;
  104. height: 50px;
  105. .navbar__left,
  106. .navbar__right {
  107. @apply flex items-center;
  108. }
  109. .navbar__left {
  110. @apply flex-1 mr-2;
  111. }
  112. .navbar__right {
  113. @apply justify-end;
  114. }
  115. .navbar__item {
  116. @apply mx-6 text-sm uppercase font-bold;
  117. &:hover {
  118. @apply text-white;
  119. }
  120. &:not(.navbar__item--home) {
  121. &.nuxt-link-active {
  122. @apply text-primary-500;
  123. }
  124. }
  125. &.navbar__item--home {
  126. &.nuxt-link-exact-active {
  127. @apply text-primary-500;
  128. }
  129. }
  130. }
  131. .navbar__icon {
  132. @apply mx-4;
  133. &:hover {
  134. @apply text-white;
  135. }
  136. &.nuxt-link-active {
  137. @apply text-primary-500;
  138. }
  139. }
  140. }
  141. .alerts--active {
  142. animation-name: alertAnim;
  143. animation-iteration-count: infinite;
  144. animation-duration: 3s;
  145. animation-timing-function: ease-in-out;
  146. }
  147. .alerts--ok {
  148. @apply text-success-500;
  149. }
  150. </style>