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.

Navigation.vue 3.7KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172
  1. <template>
  2. <div class="layout-menu">
  3. <div :class="{ 'is-active': isActive }" class="navbar">
  4. <!-- App Navigation -->
  5. <section class="menu-section">
  6. <nav class="menu-items">
  7. <nuxt-link v-if="$provider.tools.system.canNudify" to="/" class="menu-item">
  8. <span class="icon">📷</span>
  9. <span>Nudify</span>
  10. </nuxt-link>
  11. <nuxt-link to="/system/about" class="menu-item">
  12. <span class="icon">🌌</span>
  13. <span>About</span>
  14. </nuxt-link>
  15. <nuxt-link to="/system/settings/processing" class="menu-item">
  16. <span class="icon">🔧</span>
  17. <span>Settings</span>
  18. </nuxt-link>
  19. </nav>
  20. </section>
  21. <!-- Nice links -->
  22. <section v-if="$provider.tools.system.online" class="menu-section">
  23. <nav class="menu-items">
  24. <app-external-link :href="$provider.services.nucleus.urls.web" class="menu-item">
  25. <span class="icon">🌎</span>
  26. <span>Website</span>
  27. </app-external-link>
  28. <app-external-link :href="$provider.services.nucleus.urls.chat" class="menu-item">
  29. <span class="icon">💬</span>
  30. <span>Chat</span>
  31. </app-external-link>
  32. <app-external-link :href="$provider.services.nucleus.urls.forum" class="menu-item">
  33. <span class="icon">👥</span>
  34. <span>Forum</span>
  35. </app-external-link>
  36. </nav>
  37. </section>
  38. <!-- Developer Navigation -->
  39. <section v-if="isDev" class="menu-section">
  40. <nav class="menu-items" />
  41. </section>
  42. </div>
  43. </div>
  44. </template>
  45. <script>
  46. const { settings } = $provider.services
  47. export default {
  48. computed: {
  49. isDev() {
  50. return process.env.NODE_ENV === 'development'
  51. },
  52. isActive() {
  53. // eslint-disable-next-line no-underscore-dangle
  54. return settings.welcome !== true
  55. },
  56. },
  57. methods: {
  58. testBug() {
  59. throw new Error('wow much error')
  60. },
  61. },
  62. }
  63. </script>
  64. <style lang="scss" scoped>
  65. @keyframes navShowAnim {
  66. 0% {
  67. left: -200px;
  68. }
  69. 100% {
  70. left: 0;
  71. }
  72. }
  73. .layout-menu {
  74. @apply pb-6 shadow h-screen bg-dark-500 relative;
  75. @apply border-r border-dark-300;
  76. width: 200px;
  77. .menu {
  78. @apply absolute top-0 bottom-0;
  79. left: -200px;
  80. width: inherit;
  81. &.is-active {
  82. animation-name: navShowAnim;
  83. animation-fill-mode: forwards;
  84. animation-duration: 0.5s;
  85. animation-timing-function: ease-in-out;
  86. }
  87. }
  88. .menu-header {
  89. @apply mb-4 text-gray-300 flex flex-col items-center justify-center;
  90. animation: 20s ease-in-out infinite bgAnim;
  91. height: 70px;
  92. background: rgb(99, 66, 245);
  93. background: linear-gradient(
  94. 40deg,
  95. rgba(99, 66, 245, 1) 0%,
  96. rgba(239, 125, 199, 1) 100%
  97. );
  98. background-size: 200% 100%;
  99. /*
  100. clip-path: polygon(
  101. 50% 0%,
  102. 100% 0,
  103. 100% 85%,
  104. 75% 100%,
  105. 25% 100%,
  106. 0 85%,
  107. 0 0
  108. );
  109. */
  110. .header-title {
  111. @apply text-white text-xl font-bold;
  112. }
  113. .header-greetings {
  114. @apply text-sm;
  115. }
  116. }
  117. .menu-section {
  118. @apply mb-4;
  119. }
  120. .section-title {
  121. @apply text-center font-bold;
  122. }
  123. .menu-items {
  124. .menu-item {
  125. @apply border-l-4 border-transparent pl-4 font-semibold flex items-center;
  126. height: 50px;
  127. transition: all 0.1s ease-in-out;
  128. .icon {
  129. @apply text-center mr-2;
  130. filter: grayscale(100%);
  131. width: 22px;
  132. transition: all 0.1s ease-in-out;
  133. }
  134. &:hover,
  135. &.nuxt-link-exact-active {
  136. @apply text-primary-500 border-primary-500;
  137. .icon {
  138. filter: unset;
  139. }
  140. }
  141. }
  142. }
  143. }
  144. </style>