MainHeader.vue 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  1. <template>
  2. <nav class="navbar navbar-default">
  3. <div class="container-fluid">
  4. <div class="navbar-header">
  5. <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-navbar" aria-expanded="false">
  6. <span class="sr-only">Toggle navigation</span>
  7. <span class="icon-bar"></span>
  8. <span class="icon-bar"></span>
  9. <span class="icon-bar"></span>
  10. </button>
  11. <a class="navbar-brand" href="#" v-link="{ path: '/' }">Musare</a>
  12. </div>
  13. <div class="collapse navbar-collapse" id="main-navbar">
  14. <ul class="nav navbar-nav navbar-right">
  15. <li><a href="#">The Project</a></li>
  16. <li><a href="#">Donate</a></li>
  17. <li><a href="#" @click="$parent.logout()">Logout</a></li>
  18. <li><a href="#" data-toggle="modal" data-target="#register">Register</a></li>
  19. <li><a href="#" data-toggle="modal" data-target="#login">Login</a></li>
  20. </ul>
  21. </div>
  22. </div>
  23. </nav>
  24. </template>
  25. <style lang="sass" scoped>
  26. .navbar-default {
  27. background-color: #424242;
  28. border: 0;
  29. border-radius: 0;
  30. margin: 0;
  31. min-height: 64px;
  32. .navbar-brand, li a, li a:hover, li a:focus {
  33. line-height: 64px;
  34. padding: 0px 10px;
  35. margin: 0px;
  36. color: #fff;
  37. }
  38. li:hover {
  39. background-color: #393939;
  40. color: #fff;
  41. }
  42. .navbar-toggle, .navbar-toggle:hover, .navbar-toggle:focus {
  43. border: 0;
  44. background: 0;
  45. .icon-bar {
  46. background-color: #fff;
  47. }
  48. }
  49. .navbar-collapse {
  50. border: 0;
  51. }
  52. }
  53. </style>