Ohm-Management - Projektarbeit B-ME
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.

navRoutes.js 4.7KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108
  1. Vue.component('nav-router', {
  2. template: `
  3. <div>
  4. <nav class="navbar is-fixed-bottom is-expanded is-primary is-hidden-desktop" role="navigation" aria-label="main navigation">
  5. <div class="navbar-brand is-expanded is-light">
  6. <router-link to="/home" class="navbar-item is-primary is-expanded has-text-centered is-hidden-desktop">
  7. <i class="material-icons">home</i>
  8. </router-link>
  9. <router-link to="/files" class="navbar-item is-primary is-expanded">
  10. <i class="material-icons">search</i>
  11. </router-link>
  12. <router-link v-if="isAuthor" to="/createMessage" class="navbar-item is-primary is-expanded is-hidden-desktop">
  13. <i class="material-icons">add_circle</i>
  14. </router-link>
  15. <router-link to="/bookmark" class="navbar-item is-primary is-expanded is-hidden-desktop">
  16. <i class="material-icons">bookmark</i>
  17. </router-link>
  18. <router-link to="/profil" class="navbar-item is-primary is-expanded is-hidden-desktop">
  19. <i class="material-icons">person</i>
  20. </router-link>
  21. </div>
  22. </nav>
  23. <div class="is-fullheight">
  24. <div class="column is-sidebar-menu is-hidden-touch">
  25. <aside class="menu is-medium">
  26. <ul class="menu-list">
  27. <li><router-link to="/home">
  28. <i class="material-icons">home</i> Home
  29. </router-link></li>
  30. <li><router-link to="/files">
  31. <i class="material-icons">search</i> Search
  32. </router-link></li>
  33. <li><router-link v-if="isAuthor" to="/createMessage">
  34. <i class="material-icons">add_circle</i> Create Message
  35. </router-link></li>
  36. <li><router-link to="/bookmark">
  37. <i class="material-icons">bookmark</i> Bookmark
  38. </router-link></li>
  39. <li><router-link to="/profil">
  40. <i class="material-icons">person</i> Profil
  41. </router-link></li>
  42. </ul>
  43. </aside>
  44. </div>
  45. </div>
  46. </div>`,
  47. data: function() {
  48. return {
  49. isAuthor: this.isAuthorCheck(),
  50. };
  51. },
  52. methods: {
  53. isAuthorCheck: function() {
  54. console.info(auth.roles.author === authorRole);
  55. return (auth.roles.author === authorRole);
  56. },
  57. },
  58. updated: function() {
  59. this.isAuthorChecked();
  60. }
  61. });
  62. const routes = [
  63. { path: "/", component: HomeRouter },
  64. { path: "/home", component: HomeRouter },
  65. { path: "/files", component: FileRouter },
  66. { path: "/createMessage", component: CreateMsgRouter },
  67. { path: "/bookmark", component: BookmarkRouter },
  68. { path: "/profil", component: ProfilRouter },
  69. ];
  70. const router = new VueRouter({
  71. routes,
  72. linkActiveClass: 'is-active'
  73. });
  74. /*
  75. <div class="nav-right nav-menu is-hidden-desktop-only">
  76. <router-link to="/home" class="nav-item is-primary is-expanded has-text-centered is-hidden-desktop-only">
  77. <i class="material-icons">home</i> Home
  78. </router-link>
  79. <router-link to="/files" class="nav-item is-primary is-expanded has-text-centered is-hidden-desktop-only">
  80. <i class="material-icons">language</i> Language
  81. </router-link>
  82. <router-link to="/createMessage" class="navbar-item is-primary is-expanded has-text-centered is-hidden-desktop-only">
  83. <i class="material-icons">add_circle</i> Create Message
  84. </router-link>
  85. <router-link to="/bookmark" class="navbar-item is-primary is-expanded has-text-centered is-hidden-desktop-only">
  86. <i class="material-icons">bookmark</i> Bookmark
  87. </router-link>
  88. <router-link to="/profil" class="navbar-item is-primary is-expanded has-text-centered is-hidden-desktop-only">
  89. <i class="material-icons">person</i> Profil
  90. </router-link>
  91. </div>
  92. */