MainHeader.vue 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234
  1. <template>
  2. <nav class="nav is-info" :class="{ transparent }">
  3. <div class="nav-left">
  4. <router-link v-if="!hideLogo" class="nav-item is-brand" to="/">
  5. <img
  6. :src="siteSettings.logo_white"
  7. :alt="siteSettings.sitename || `Musare`"
  8. />
  9. </router-link>
  10. </div>
  11. <span
  12. class="nav-toggle"
  13. :class="{ 'is-active': isMobile }"
  14. tabindex="0"
  15. @click="isMobile = !isMobile"
  16. @keyup.enter="isMobile = !isMobile"
  17. >
  18. <span />
  19. <span />
  20. <span />
  21. </span>
  22. <div class="nav-right nav-menu" :class="{ 'is-active': isMobile }">
  23. <router-link
  24. v-if="role === 'admin'"
  25. class="nav-item admin"
  26. to="/admin"
  27. >
  28. <strong>Admin</strong>
  29. </router-link>
  30. <span v-if="loggedIn" class="grouped">
  31. <router-link
  32. class="nav-item"
  33. :to="{
  34. name: 'profile',
  35. params: { username }
  36. }"
  37. >
  38. Profile
  39. </router-link>
  40. <router-link class="nav-item" to="/settings"
  41. >Settings</router-link
  42. >
  43. <a class="nav-item" href="#" @click="logout()">Logout</a>
  44. </span>
  45. <span v-if="!loggedIn && !hideLoggedOut" class="grouped">
  46. <a class="nav-item" href="#" @click="openModal('login')"
  47. >Login</a
  48. >
  49. <a class="nav-item" href="#" @click="openModal('register')"
  50. >Register</a
  51. >
  52. </span>
  53. <div class="nav-item" id="nightmode-toggle">
  54. <p class="is-expanded checkbox-control">
  55. <label class="switch">
  56. <input
  57. type="checkbox"
  58. id="instant-nightmode"
  59. v-model="localNightmode"
  60. />
  61. <span class="slider round"></span>
  62. </label>
  63. <label for="instant-nightmode">
  64. <p>Nightmode</p>
  65. </label>
  66. </p>
  67. </div>
  68. </div>
  69. </nav>
  70. </template>
  71. <script>
  72. import Toast from "toasters";
  73. import { mapState, mapGetters, mapActions } from "vuex";
  74. export default {
  75. props: {
  76. hideLogo: { type: Boolean, default: false },
  77. transparent: { type: Boolean, default: false },
  78. hideLoggedOut: { type: Boolean, default: false }
  79. },
  80. data() {
  81. return {
  82. localNightmode: null,
  83. isMobile: false,
  84. frontendDomain: "",
  85. siteSettings: {
  86. logo: "",
  87. sitename: ""
  88. }
  89. };
  90. },
  91. computed: {
  92. ...mapState({
  93. modals: state => state.modalVisibility.modals.header,
  94. role: state => state.user.auth.role,
  95. loggedIn: state => state.user.auth.loggedIn,
  96. username: state => state.user.auth.username
  97. }),
  98. ...mapGetters({
  99. socket: "websockets/getSocket"
  100. })
  101. },
  102. watch: {
  103. localNightmode(newValue, oldValue) {
  104. console.log(newValue, oldValue, this.localNightmode);
  105. if (oldValue === null) return;
  106. localStorage.setItem("nightmode", this.localNightmode);
  107. if (this.loggedIn) {
  108. this.socket.dispatch(
  109. "users.updatePreferences",
  110. { nightmode: this.localNightmode },
  111. res => {
  112. if (res.status !== "success") new Toast(res.message);
  113. }
  114. );
  115. }
  116. this.changeNightmode(this.localNightmode);
  117. }
  118. },
  119. async mounted() {
  120. this.localNightmode = JSON.parse(localStorage.getItem("nightmode"));
  121. if (this.localNightmode === null) this.localNightmode = false;
  122. this.socket.dispatch("users.getPreferences", res => {
  123. if (res.status === "success")
  124. this.localNightmode = res.data.preferences.nightmode;
  125. });
  126. this.socket.on("keep.event:user.preferences.updated", res => {
  127. if (res.data.preferences.nightmode !== undefined)
  128. this.localNightmode = res.data.preferences.nightmode;
  129. });
  130. this.frontendDomain = await lofig.get("frontendDomain");
  131. this.siteSettings = await lofig.get("siteSettings");
  132. },
  133. methods: {
  134. ...mapActions("modalVisibility", ["openModal"]),
  135. ...mapActions("user/auth", ["logout"]),
  136. ...mapActions("user/preferences", ["changeNightmode"])
  137. }
  138. };
  139. </script>
  140. <style lang="scss" scoped>
  141. .night-mode {
  142. .nav {
  143. background-color: var(--dark-grey-3) !important;
  144. }
  145. .nav-item {
  146. color: var(--light-grey-2) !important;
  147. }
  148. }
  149. .nav {
  150. flex-shrink: 0;
  151. background-color: var(--primary-color);
  152. height: 64px;
  153. border-radius: 0% 0% 33% 33% / 0% 0% 7% 7%;
  154. &.transparent {
  155. background-color: transparent !important;
  156. }
  157. @media (max-width: 650px) {
  158. border-radius: 0;
  159. }
  160. .nav-menu.is-active {
  161. .nav-item {
  162. color: var(--dark-grey-2);
  163. &:hover {
  164. color: var(--dark-grey-2);
  165. }
  166. }
  167. }
  168. a.nav-item.is-tab:hover {
  169. border-bottom: none;
  170. border-top: solid 1px var(--white);
  171. padding-top: 9px;
  172. }
  173. .nav-toggle {
  174. height: 64px;
  175. &:hover,
  176. &:active {
  177. filter: brightness(95%);
  178. }
  179. span {
  180. background-color: var(--white);
  181. }
  182. }
  183. .is-brand {
  184. font-size: 2.1rem !important;
  185. line-height: 38px !important;
  186. padding: 0 20px;
  187. font-family: Pacifico, cursive;
  188. img {
  189. max-height: 38px;
  190. color: var(--primary-color);
  191. user-select: none;
  192. }
  193. }
  194. .nav-item {
  195. font-size: 17px;
  196. color: var(--white);
  197. &:hover {
  198. color: var(--white);
  199. }
  200. }
  201. }
  202. .grouped {
  203. margin: 0;
  204. display: flex;
  205. text-decoration: none;
  206. }
  207. </style>