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 2.7KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
  1. <template>
  2. <div class="layout__navbar">
  3. <div class="navbar__left">
  4. <nuxt-link v-if="canNudify" to="/" class="navbar__item">
  5. Nudify
  6. </nuxt-link>
  7. <nuxt-link id="settings" class="navbar__item" to="/settings">
  8. Settings
  9. </nuxt-link>
  10. <a id="guide" class="navbar__item" :href="manualURL" target="_blank">
  11. Help
  12. </a>
  13. <nuxt-link v-if="unlockedBadTime" class="navbar__item" to="/games/badtime">
  14. Bad Time
  15. </nuxt-link>
  16. <a v-if="isDev" class="navbar__item" @click.prevent="createError">
  17. Force Error
  18. </a>
  19. <a v-if="isDev" href="https://google.com" class="navbar__item">
  20. External Page
  21. </a>
  22. <a v-if="isDev" href="https://google.com" target="_blank" class="navbar__item">
  23. Popup
  24. </a>
  25. </div>
  26. <div class="navbar__right">
  27. <nuxt-link v-tooltip="{placement: 'bottom', content: 'About'}" class="navbar__icon" to="/about">
  28. <font-awesome-icon icon="info-circle" />
  29. </nuxt-link>
  30. <nuxt-link v-tooltip="{placement: 'bottom', content: 'DreamNet'}" class="navbar__icon" to="/dreamnet">
  31. <font-awesome-icon icon="users" />
  32. </nuxt-link>
  33. <a v-tooltip="{placement: 'bottom', content: 'Donate and get benefits!'}" class="navbar__icon" :href="donateUrl" target="_blank">
  34. <font-awesome-icon :icon="['fab', 'patreon']" />
  35. </a>
  36. </div>
  37. </div>
  38. </template>
  39. <script>
  40. import { requirements, settings } from '~/modules/system'
  41. import { nucleus } from '~/modules/services'
  42. import { events } from '~/modules'
  43. export default {
  44. data: () => ({
  45. unlockedBadTime: settings.achievements.badtime,
  46. }),
  47. computed: {
  48. canNudify() {
  49. return requirements.canNudify
  50. },
  51. donateUrl() {
  52. return nucleus.urls?.support?.patreon || 'https://www.patreon.com/dreamnet'
  53. },
  54. manualURL() {
  55. return nucleus.urls?.docs?.manual || 'https://time.dreamnet.tech/docs/guide/upload'
  56. },
  57. isDev() {
  58. return process.env.name === 'development'
  59. },
  60. },
  61. mounted() {
  62. events.on('achievements.badtime', () => {
  63. this.unlockedBadTime = true
  64. })
  65. },
  66. methods: {
  67. createError() {
  68. throw new Error('UI TEST ERROR')
  69. },
  70. },
  71. }
  72. </script>
  73. <style lang="scss" scoped>
  74. .layout__navbar {
  75. @apply flex bg-dark-500 z-10;
  76. @apply border-b border-dark-100;
  77. height: 50px;
  78. .navbar__left,
  79. .navbar__right {
  80. @apply flex items-center;
  81. }
  82. .navbar__left {
  83. @apply flex-1 mr-2;
  84. }
  85. .navbar__right {
  86. @apply justify-end;
  87. }
  88. .navbar__item {
  89. @apply mx-6 text-sm uppercase font-bold;
  90. &:hover {
  91. @apply text-white;
  92. }
  93. }
  94. .navbar__icon {
  95. @apply mx-4;
  96. &:hover {
  97. @apply text-white;
  98. }
  99. }
  100. }
  101. </style>