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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197
  1. <template>
  2. <div class="layout-navbar">
  3. <div :class="{ 'is-active': isActive }" class="navbar">
  4. <!-- Welcome! -->
  5. <div class="navbar-header">
  6. <h1 class="header-title">
  7. {{ $dream.name }}
  8. </h1>
  9. <h3 class="header-greetings">
  10. {{ greetings }}
  11. </h3>
  12. </div>
  13. <!-- App Navigation -->
  14. <section class="navbar-section">
  15. <nav class="navbar-items">
  16. <nuxt-link v-if="$platform.requirements.all" to="/" class="navbar-item">
  17. <span class="icon">📷</span>
  18. <span>Nudify</span>
  19. </nuxt-link>
  20. <nuxt-link to="/system/about" class="navbar-item">
  21. <span class="icon">🌌</span>
  22. <span>About</span>
  23. </nuxt-link>
  24. <nuxt-link to="/system/settings/processing" class="navbar-item">
  25. <span class="icon">🔧</span>
  26. <span>Settings</span>
  27. </nuxt-link>
  28. </nav>
  29. </section>
  30. <!-- Developer Navigation -->
  31. <section v-if="isDev" class="navbar-section">
  32. <nav class="navbar-items">
  33. <a href="#" class="navbar-item" @click.prevent="testBug">
  34. <span class="icon">🐛</span>
  35. <span>I am a error!</span>
  36. </a>
  37. </nav>
  38. </section>
  39. </div>
  40. </div>
  41. </template>
  42. <script>
  43. import moment from 'moment'
  44. export default {
  45. computed: {
  46. greetings() {
  47. const hours = moment().hours()
  48. if (hours >= 6 && hours <= 11) {
  49. return 'Good morning ☕'
  50. }
  51. if (hours >= 12 && hours <= 19) {
  52. return 'Good afternoon 🌞'
  53. }
  54. if (hours >= 0 && hours <= 5) {
  55. return 'Sweet dreams 🐏'
  56. }
  57. return 'Good night 🌛'
  58. },
  59. isDev() {
  60. return process.env.NODE_ENV === 'development'
  61. },
  62. isActive() {
  63. return $settings._settings.welcome !== true
  64. }
  65. },
  66. methods: {
  67. testBug() {
  68. $tools.testError()
  69. throw new Error('wow much error')
  70. }
  71. }
  72. }
  73. </script>
  74. <style lang="scss">
  75. @keyframes bgAnim {
  76. 0% {
  77. background-position: 0% 0%;
  78. }
  79. 50% {
  80. background-position: 100% 0%;
  81. }
  82. 100% {
  83. background-position: 0% 0%;
  84. }
  85. }
  86. @keyframes navShowAnim {
  87. 0% {
  88. left: -200px;
  89. }
  90. 100% {
  91. left: 0;
  92. }
  93. }
  94. .layout-navbar {
  95. @apply pb-6 shadow h-screen bg-dark-500 relative;
  96. width: 200px;
  97. .navbar {
  98. @apply absolute top-0 bottom-0;
  99. left: -200px;
  100. width: inherit;
  101. &.is-active {
  102. animation-name: navShowAnim;
  103. animation-fill-mode: forwards;
  104. animation-duration: 0.5s;
  105. animation-timing-function: ease-in-out;
  106. }
  107. }
  108. .navbar-header {
  109. @apply mb-5 text-gray-300 flex flex-col items-center justify-center;
  110. animation: 20s ease-in-out infinite bgAnim;
  111. height: 70px;
  112. background: rgb(99, 66, 245);
  113. background: linear-gradient(
  114. 40deg,
  115. rgba(99, 66, 245, 1) 0%,
  116. rgba(239, 125, 199, 1) 100%
  117. );
  118. background-size: 200% 100%;
  119. /*
  120. clip-path: polygon(
  121. 50% 0%,
  122. 100% 0,
  123. 100% 85%,
  124. 75% 100%,
  125. 25% 100%,
  126. 0 85%,
  127. 0 0
  128. );
  129. */
  130. .header-title {
  131. @apply text-white text-xl font-bold;
  132. }
  133. .header-greetings {
  134. @apply text-sm;
  135. }
  136. }
  137. .navbar-section {
  138. @apply mb-5;
  139. }
  140. .section-title {
  141. @apply text-center font-bold;
  142. }
  143. .navbar-items {
  144. .navbar-item {
  145. @apply border-l-4 border-transparent pl-4 font-semibold flex items-center;
  146. height: 50px;
  147. transition: all 0.1s ease-in-out;
  148. .icon {
  149. @apply text-center mr-2;
  150. filter: grayscale(100%);
  151. width: 22px;
  152. transition: all 0.1s ease-in-out;
  153. }
  154. &:hover,
  155. &.nuxt-link-exact-active {
  156. @apply text-primary border-primary;
  157. .icon {
  158. filter: unset;
  159. }
  160. }
  161. }
  162. }
  163. }
  164. </style>