Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254
  1. <template>
  2. <div class="nav">
  3. <div class="nav__left">
  4. <button v-tooltip="'Go back'" class="nav__item nav__item--button text-2xl" @click="$router.go(-1)">
  5. <font-awesome-icon icon="caret-left" />
  6. </button>
  7. <button v-tooltip="'Go forward'" class="nav__item nav__item--button text-2xl" @click="$router.go(1)">
  8. <font-awesome-icon icon="caret-right" />
  9. </button>
  10. <!--
  11. <nuxt-link
  12. v-tooltip="'Bad Dream Minigame 🎮'"
  13. to="/games/baddream"
  14. class="nav__item nav__item--button">
  15. B
  16. </nuxt-link>
  17. -->
  18. </div>
  19. <div class="nav__center">
  20. <nuxt-link v-tooltip="'Upload'" to="/" class="nav__item nav__item--link">
  21. <font-awesome-icon icon="upload" />
  22. </nuxt-link>
  23. <nuxt-link v-tooltip="'My Photos'" to="/photos" class="nav__item nav__item--link">
  24. <font-awesome-icon icon="images" />
  25. </nuxt-link>
  26. <nuxt-link v-if="isDev"
  27. v-tooltip="'Dev Garden'"
  28. to="/garden"
  29. class="nav__item nav__item--link">
  30. <font-awesome-icon icon="house-damage" />
  31. </nuxt-link>
  32. </div>
  33. <div class="nav__right">
  34. <nuxt-link v-tooltip="'Settings'" to="/settings" class="nav__item nav__item--button">
  35. <font-awesome-icon icon="cog" />
  36. </nuxt-link>
  37. <nuxt-link v-tooltip="'About'" to="/about" class="nav__item nav__item--button">
  38. <font-awesome-icon icon="info-circle" />
  39. </nuxt-link>
  40. <nuxt-link v-tooltip="'Help & Tips'" to="/help" class="nav__item nav__item--button">
  41. <font-awesome-icon icon="question-circle" />
  42. </nuxt-link>
  43. <nuxt-link v-if="isBadTimeAvailable"
  44. v-tooltip="'Bad Time Minigame 🎮'"
  45. to="/games/badtime"
  46. class="nav__item nav__item--button">
  47. <img src="~/assets/images/games/sans.png">
  48. </nuxt-link>
  49. </div>
  50. </div>
  51. </template>
  52. <script>
  53. import Avatars from '@dicebear/avatars'
  54. import sprites from '@dicebear/avatars-jdenticon-sprites'
  55. import { requirements, settings } from '~/modules/system'
  56. import { dreamtrack } from '~/modules/services'
  57. import { events } from '~/modules'
  58. export default {
  59. data: () => ({
  60. isBadTimeAvailable: settings.achievements.badtime,
  61. }),
  62. computed: {
  63. avatar() {
  64. const avatars = new Avatars(sprites, { base64: true })
  65. return avatars.create(settings.user)
  66. },
  67. canNudify() {
  68. return requirements.canNudify
  69. },
  70. donateUrl() {
  71. return dreamtrack.get('urls.support.patreon', 'https://www.patreon.com/dreamnet')
  72. },
  73. manualURL() {
  74. return dreamtrack.get('urls.docs.manual', 'https://time.dreamnet.tech/docs/guide/upload')
  75. },
  76. isDev() {
  77. return process.env.NODE_ENV === 'development'
  78. },
  79. hasAlerts() {
  80. return requirements.hasAlerts
  81. },
  82. },
  83. mounted() {
  84. events.on('achievements.badtime', () => {
  85. this.isBadTimeAvailable = true
  86. })
  87. },
  88. methods: {
  89. createError() {
  90. throw new Error('UI TEST ERROR')
  91. },
  92. },
  93. }
  94. </script>
  95. <style lang="scss" scoped>
  96. @keyframes alertAnim {
  97. 0% {
  98. @apply text-danger-500;
  99. }
  100. 50% {
  101. @apply text-warning-500;
  102. }
  103. 100% {
  104. @apply text-danger-500;
  105. }
  106. }
  107. .nav {
  108. @apply flex z-10;
  109. @apply h-full bg-menus border-b border-menus-light shadow px-3;
  110. grid-area: nav;
  111. .nav__left,
  112. .nav__center,
  113. .nav__right {
  114. @apply flex-1 flex;
  115. }
  116. .nav__left {
  117. @apply items-center;
  118. }
  119. .nav__center {
  120. @apply justify-center;
  121. }
  122. .nav__right {
  123. @apply justify-end items-center;
  124. }
  125. }
  126. .nav__item {
  127. @apply flex items-center;
  128. img {
  129. @apply rounded-full;
  130. height: 30px;
  131. }
  132. &.nav__item--link {
  133. @apply justify-center border-b-2 border-transparent;
  134. width: 100px;
  135. .icon {
  136. @apply text-lg;
  137. }
  138. &:hover,
  139. &.nuxt-link-exact-active {
  140. @apply text-primary border-primary;
  141. }
  142. }
  143. &.nav__item--button {
  144. @apply justify-center;
  145. @apply rounded-full mx-2 outline-none;
  146. height: 40px;
  147. width: 40px;
  148. &:hover {
  149. @apply bg-dark-400;
  150. }
  151. img {
  152. height: 20px;
  153. }
  154. }
  155. }
  156. .layout__navbar {
  157. @apply flex bg-dark-500 z-10;
  158. @apply border-b border-dark-100;
  159. grid-area: nav;
  160. height: 50px;
  161. .navbar__left,
  162. .navbar__right {
  163. @apply flex items-center;
  164. }
  165. .navbar__left {
  166. @apply flex-1 mr-2;
  167. }
  168. .navbar__right {
  169. @apply justify-end;
  170. }
  171. .navbar__item {
  172. @apply mx-6 text-sm uppercase font-bold;
  173. &:hover {
  174. @apply text-white;
  175. }
  176. &:not(.navbar__item--home) {
  177. &.nuxt-link-active {
  178. @apply text-primary-500;
  179. }
  180. }
  181. &.navbar__item--home {
  182. &.nuxt-link-exact-active {
  183. @apply text-primary-500;
  184. }
  185. }
  186. }
  187. .navbar__icon {
  188. @apply mx-4;
  189. &:hover {
  190. @apply text-white;
  191. }
  192. &.nuxt-link-active {
  193. @apply text-primary-500;
  194. }
  195. }
  196. }
  197. .alerts--active {
  198. animation-duration: 3s;
  199. animation-iteration-count: infinite;
  200. animation-name: alertAnim;
  201. animation-timing-function: ease-in-out;
  202. }
  203. .alerts--ok {
  204. @apply text-success-500;
  205. }
  206. </style>