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.0KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158
  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="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. <!-- Developer Navigation -->
  22. <section v-if="isDev" class="menu-section">
  23. <nav class="menu-items" />
  24. </section>
  25. </div>
  26. </div>
  27. </template>
  28. <script>
  29. import { requirements } from '~/modules/system'
  30. const { settings } = $provider
  31. export default {
  32. computed: {
  33. canNudify() {
  34. return requirements.canNudify
  35. },
  36. isDev() {
  37. return process.env.NODE_ENV === 'development'
  38. },
  39. isActive() {
  40. // eslint-disable-next-line no-underscore-dangle
  41. return settings.welcome !== true
  42. },
  43. },
  44. methods: {
  45. testBug() {
  46. throw new Error('wow much error')
  47. },
  48. },
  49. }
  50. </script>
  51. <style lang="scss" scoped>
  52. @keyframes navShowAnim {
  53. 0% {
  54. left: -200px;
  55. }
  56. 100% {
  57. left: 0;
  58. }
  59. }
  60. .layout-menu {
  61. @apply pb-6 shadow h-screen bg-dark-500 relative;
  62. @apply border-r border-dark-300;
  63. width: 200px;
  64. .menu {
  65. @apply absolute top-0 bottom-0;
  66. left: -200px;
  67. width: inherit;
  68. &.is-active {
  69. animation-name: navShowAnim;
  70. animation-fill-mode: forwards;
  71. animation-duration: 0.5s;
  72. animation-timing-function: ease-in-out;
  73. }
  74. }
  75. .menu-header {
  76. @apply mb-4 text-gray-300 flex flex-col items-center justify-center;
  77. animation: 20s ease-in-out infinite bgAnim;
  78. height: 70px;
  79. background: rgb(99, 66, 245);
  80. background: linear-gradient(
  81. 40deg,
  82. rgba(99, 66, 245, 1) 0%,
  83. rgba(239, 125, 199, 1) 100%
  84. );
  85. background-size: 200% 100%;
  86. /*
  87. clip-path: polygon(
  88. 50% 0%,
  89. 100% 0,
  90. 100% 85%,
  91. 75% 100%,
  92. 25% 100%,
  93. 0 85%,
  94. 0 0
  95. );
  96. */
  97. .header-title {
  98. @apply text-white text-xl font-bold;
  99. }
  100. .header-greetings {
  101. @apply text-sm;
  102. }
  103. }
  104. .menu-section {
  105. @apply mb-4;
  106. }
  107. .section-title {
  108. @apply text-center font-bold;
  109. }
  110. .menu-items {
  111. .menu-item {
  112. @apply border-l-4 border-transparent pl-4 font-semibold flex items-center;
  113. height: 50px;
  114. transition: all 0.1s ease-in-out;
  115. .icon {
  116. @apply text-center mr-2;
  117. filter: grayscale(100%);
  118. width: 22px;
  119. transition: all 0.1s ease-in-out;
  120. }
  121. &:hover,
  122. &.nuxt-link-exact-active {
  123. @apply text-primary-500 border-primary-500;
  124. .icon {
  125. filter: unset;
  126. }
  127. }
  128. }
  129. }
  130. }
  131. </style>