header.html 3.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  1. <template name="header">
  2. <header>
  3. <!-- Dropdown Structure -->
  4. <ul id="accountDrop" class="dropdown-content">
  5. {{#if currentUser}}
  6. <li><a href="/u/{{currentUser.profile.username}}" class="grey-text text-darken-4">Profile</a></li>
  7. <li><a href="/settings" class="grey-text text-darken-4">Settings</a></li>
  8. <li class="divider"></li>
  9. <li class="logout"><a class="grey-text text-darken-4">Logout</a></li>
  10. {{else}}
  11. <li><a href="/login" class="grey-text text-darken-4">Login / Register</a></li>
  12. {{/if}}
  13. </ul>
  14. <nav>
  15. <div class="nav-wrapper grey darken-3">
  16. <a href="/" class="brand-logo">Musare</a>
  17. <a href="#" data-activates="mobile-navi" class="button-collapse white-text"><i class="material-icons">menu</i></a>
  18. <ul class="right hide-on-med-and-down scroll-fix">
  19. {{#if isModerator}}
  20. <li><a class="light-blue-text text-accent-4" href="/admin"><b>Admin</b></a></li>
  21. {{/if}}
  22. <li><a href="/project" class="white-text">The Project</a></li>
  23. <li><a href="/" class="white-text">Donate</a></li>
  24. <li><a class="dropdown-button white-text" href="#!" data-activates="accountDrop">
  25. {{#if currentUser}}
  26. {{currentUser.profile.username}}
  27. {{else}}
  28. Account
  29. {{/if}}
  30. <i class="material-icons right white-text">arrow_drop_down</i></a></li>
  31. </ul>
  32. <ul class="side-nav" id="mobile-navi" style="width: 240px;">
  33. <ul class="collapsible" data-collapsible="accordion">
  34. {{#if isModerator}}
  35. <li><a href="/admin">Admin</a></li>
  36. {{/if}}
  37. <li>
  38. <a href="/project">The Project</a>
  39. </li>
  40. <li>
  41. <div class="collapsible-header black-text"><i class="material-icons">arrow_drop_down</i>
  42. {{#if currentUser}}
  43. {{currentUser.profile.username}}
  44. {{else}}
  45. Account
  46. {{/if}}
  47. </div>
  48. <div class="collapsible-body black-text">
  49. <a href="/login">Login / Register</a>
  50. </div>
  51. </li>
  52. </ul>
  53. <!--<li><a class="mobile-dropdown" href="#!" data-activates="contributeDrop">Contribute<i class="material-icons right">arrow_drop_down</i></a></li>
  54. <li><a class="mobile-dropdown" href="#!" data-activates="aboutDrop">About<i class="material-icons right">arrow_drop_down</i></a></li>
  55. <li><a class="mobile-dropdown" href="#!" data-activates="accountDrop">Account<i class="material-icons right">arrow_drop_down</i></a></li>-->
  56. </ul>
  57. </div>
  58. </nav>
  59. <script>
  60. (function () {
  61. $(".dropdown-button").dropdown({
  62. inDuration: 300,
  63. outDuration: 225,
  64. hover: true,
  65. belowOrigin: true
  66. });
  67. $(".button-collapse").sideNav();
  68. $('.collapsible').collapsible({
  69. accordion: false // A setting that changes the collapsible behavior to expandable instead of the default accordion style
  70. });
  71. })();
  72. </script>
  73. </header>
  74. </template>