MainHeader.vue 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111
  1. <template>
  2. <nav class="nav is-info">
  3. <div class="nav-left">
  4. <a class="nav-item is-brand" href="#" v-link="{ path: '/' }">
  5. Musare
  6. </a>
  7. </div>
  8. <span class="nav-toggle" :class="{ 'is-active': isMobile }" @click="isMobile = !isMobile">
  9. <span></span>
  10. <span></span>
  11. <span></span>
  12. </span>
  13. <div class="nav-right nav-menu" :class="{ 'is-active': isMobile }">
  14. <a class="nav-item is-tab admin" href="#" v-link="{ path: '/admin' }" v-if="$parent.$parent.role === 'admin'">
  15. <strong>Admin</strong>
  16. </a>
  17. <!--a class="nav-item is-tab" href="#">
  18. About
  19. </a-->
  20. <a class="nav-item is-tab" href="#" v-link="{ path: '/news' }">
  21. News
  22. </a>
  23. <span class="grouped" v-if="$parent.$parent.loggedIn">
  24. <a class="nav-item is-tab" href="#" v-link="{ path: '/u/' + $parent.$parent.username }">
  25. Profile
  26. </a>
  27. <a class="nav-item is-tab" href="#" v-link="{ path: '/settings' }">
  28. Settings
  29. </a>
  30. <a class="nav-item is-tab" href="#" @click="$parent.$parent.logout()">
  31. Logout
  32. </a>
  33. </span>
  34. <span class="grouped" v-else>
  35. <a class="nav-item" href="#" @click="toggleModal('login')">
  36. Login
  37. </a>
  38. <a class="nav-item" href="#" @click="toggleModal('register')">
  39. Register
  40. </a>
  41. </span>
  42. </div>
  43. </nav>
  44. </template>
  45. <script>
  46. export default {
  47. data() {
  48. return {
  49. isMobile: false
  50. }
  51. },
  52. methods: {
  53. toggleModal: function (type) {
  54. this.$dispatch('toggleModal', type);
  55. }
  56. }
  57. }
  58. </script>
  59. <style lang="scss" scoped>
  60. @import 'theme.scss';
  61. .nav {
  62. background-color: #03a9f4;
  63. height: 64px;
  64. .nav-menu.is-active {
  65. .nav-item {
  66. color: #333;
  67. &:hover {
  68. color: #333;
  69. }
  70. }
  71. }
  72. .nav-toggle {
  73. height: 64px;
  74. &.is-active span {
  75. background-color: #333;
  76. }
  77. }
  78. .is-brand {
  79. font-size: 2.1rem !important;
  80. line-height: 64px !important;
  81. padding: 0 20px;
  82. }
  83. .nav-item {
  84. font-size: 15px;
  85. color: $white;
  86. &:hover {
  87. color: $white;
  88. }
  89. }
  90. .admin {
  91. color: #424242;
  92. }
  93. }
  94. .grouped {
  95. margin: 0;
  96. display: flex;
  97. text-decoration: none;
  98. }
  99. </style>