MainHeader.vue 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170
  1. <template>
  2. <nav class="nav is-info">
  3. <div class="nav-left">
  4. <router-link class="nav-item is-brand" to="/">
  5. <img
  6. :src="`${this.siteSettings.logo}`"
  7. :alt="`${this.siteSettings.siteName}` || `Musare`"
  8. />
  9. </router-link>
  10. </div>
  11. <span
  12. class="nav-toggle"
  13. :class="{ 'is-active': isMobile }"
  14. @click="isMobile = !isMobile"
  15. >
  16. <span />
  17. <span />
  18. <span />
  19. </span>
  20. <div class="nav-right nav-menu" :class="{ 'is-active': isMobile }">
  21. <router-link
  22. v-if="$parent.$parent.role === 'admin'"
  23. class="nav-item is-tab admin"
  24. to="/admin"
  25. >
  26. <strong>Admin</strong>
  27. </router-link>
  28. <span v-if="$parent.$parent.loggedIn" class="grouped">
  29. <router-link
  30. class="nav-item is-tab"
  31. :to="{
  32. name: 'profile',
  33. params: { username: $parent.$parent.username }
  34. }"
  35. >
  36. Profile
  37. </router-link>
  38. <router-link class="nav-item is-tab" to="/settings"
  39. >Settings</router-link
  40. >
  41. <a
  42. class="nav-item is-tab"
  43. href="#"
  44. @click="$parent.$parent.logout()"
  45. >Logout</a
  46. >
  47. </span>
  48. <span v-else class="grouped">
  49. <a
  50. class="nav-item"
  51. href="#"
  52. @click="
  53. openModal({
  54. sector: 'header',
  55. modal: 'login'
  56. })
  57. "
  58. >Login</a
  59. >
  60. <a
  61. class="nav-item"
  62. href="#"
  63. @click="
  64. openModal({
  65. sector: 'header',
  66. modal: 'register'
  67. })
  68. "
  69. >Register</a
  70. >
  71. </span>
  72. </div>
  73. </nav>
  74. </template>
  75. <script>
  76. import { mapState, mapActions } from "vuex";
  77. export default {
  78. data() {
  79. return {
  80. isMobile: false,
  81. frontendDomain: "",
  82. siteSettings: {
  83. logo: "",
  84. siteName: ""
  85. }
  86. };
  87. },
  88. mounted() {
  89. lofig.get("frontendDomain", res => {
  90. this.frontendDomain = res;
  91. return res;
  92. });
  93. lofig.get("siteSettings", res => {
  94. this.siteSettings = res;
  95. return res;
  96. });
  97. },
  98. computed: mapState("modals", {
  99. modals: state => state.modals.header
  100. }),
  101. methods: {
  102. ...mapActions("modals", ["openModal"])
  103. }
  104. };
  105. </script>
  106. <style lang="scss" scoped>
  107. .nav {
  108. background-color: #03a9f4;
  109. height: 64px;
  110. border-radius: 0% 0% 33% 33% / 0% 0% 7% 7%;
  111. .nav-menu.is-active {
  112. .nav-item {
  113. color: #333;
  114. &:hover {
  115. color: #333;
  116. }
  117. }
  118. }
  119. a.nav-item.is-tab:hover {
  120. border-bottom: none;
  121. border-top: solid 1px #ffffff;
  122. }
  123. .nav-toggle {
  124. height: 64px;
  125. &.is-active span {
  126. background-color: #333;
  127. }
  128. }
  129. .is-brand {
  130. font-size: 2.1rem !important;
  131. line-height: 64px !important;
  132. padding: 0 20px;
  133. color: #ffffff;
  134. font-family: Pacifico, cursive;
  135. filter: brightness(0) invert(1);
  136. img {
  137. max-height: 38px;
  138. }
  139. }
  140. .nav-item {
  141. font-size: 17px;
  142. color: #ffffff;
  143. &:hover {
  144. color: #ffffff;
  145. }
  146. }
  147. .admin strong {
  148. color: #9d42b1;
  149. }
  150. }
  151. .grouped {
  152. margin: 0;
  153. display: flex;
  154. text-decoration: none;
  155. }
  156. </style>