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

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  1. <template>
  2. <div class="layout__navbar">
  3. <div class="navbar__left">
  4. <nuxt-link v-if="$provider.tools.system.canNudify" to="/" class="navbar__item">
  5. Nudify
  6. </nuxt-link>
  7. <nuxt-link class="navbar__item" to="/about">
  8. About
  9. </nuxt-link>
  10. <nuxt-link v-if="$provider.tools.system.canNudify" class="navbar__item" to="/dreamnet">
  11. DreamNet
  12. </nuxt-link>
  13. </div>
  14. <div class="navbar__right">
  15. <nuxt-link v-tooltip="{placement: 'bottom', content: 'Settings'}" class="navbar__icon" to="/settings">
  16. <font-awesome-icon icon="cog" />
  17. </nuxt-link>
  18. <nuxt-link v-if="false" v-tooltip="{placement: 'bottom', content: 'About'}" class="navbar__icon" to="/about">
  19. <font-awesome-icon icon="info-circle" />
  20. </nuxt-link>
  21. <nuxt-link v-if="false" v-tooltip="{placement: 'bottom', content: 'DreamNet'}" class="navbar__icon" to="/dreamnet">
  22. <font-awesome-icon icon="code" />
  23. </nuxt-link>
  24. <a v-tooltip="{placement: 'bottom', content: 'Donate and get benefits!'}" class="navbar__icon" :href="donateUrl" target="_blank">
  25. <font-awesome-icon :icon="['fab', 'patreon']" />
  26. </a>
  27. </div>
  28. </div>
  29. </template>
  30. <script>
  31. const { nucleus } = $provider.services
  32. export default {
  33. computed: {
  34. donateUrl() {
  35. return nucleus.urls?.support?.patreon || 'https://www.patreon.com/dreamnet'
  36. },
  37. },
  38. }
  39. </script>
  40. <style lang="scss" scoped>
  41. .layout__navbar {
  42. @apply flex bg-dark-500 z-10;
  43. @apply border-b border-dark-300;
  44. height: 50px;
  45. .navbar__left,
  46. .navbar__right {
  47. @apply flex-1 flex items-center;
  48. }
  49. .navbar__right {
  50. @apply justify-end;
  51. }
  52. .navbar__item {
  53. @apply mx-6 text-sm uppercase font-bold;
  54. &:hover {
  55. @apply text-white;
  56. }
  57. }
  58. .navbar__icon {
  59. @apply mx-4;
  60. &:hover {
  61. @apply text-white;
  62. }
  63. }
  64. }
  65. </style>