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.backup.vue 4.2KB

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