nav.ejs 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
  1. <nav class="navbar nav-shadow" role="navigation" aria-label="main navigation">
  2. <div class="container">
  3. <div class="navbar-brand">
  4. <a class="navbar-item is-size-5" href="/" style="font-weight: bold">
  5. 消息推送服务
  6. </a>
  7. <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false"
  8. data-target="mainNavbar">
  9. <span aria-hidden="true"></span>
  10. <span aria-hidden="true"></span>
  11. <span aria-hidden="true"></span>
  12. </a>
  13. </div>
  14. <div id="mainNavbar" class="navbar-menu">
  15. <div class="navbar-start">
  16. <a class="navbar-item" href="/"> 首页 </a>
  17. <a class="navbar-item" target="_blank" href="https://github.com/songquanpeng/message-pusher/blob/master/README.md"> 帮助 </a>
  18. <a class="navbar-item" target="_blank" href="https://iamazing.cn/page/message-pusher"> 关于 </a>
  19. </div>
  20. <div class="navbar-end">
  21. <div class="navbar-item">
  22. <div class="buttons">
  23. <% if (isLogged) { %>
  24. <% if (isAdmin) { %>
  25. <a class="button is-light" href="/register">添加新用户</a>
  26. <% } %>
  27. <a class="button is-light" href="/configure">配置</a>
  28. <a class="button is-light" href="/logout">退出</a>
  29. <% } else { %>
  30. <a class="button is-light" href="/register">注册</a>
  31. <a class="button is-light" href="/login">登录</a>
  32. <% } %>
  33. </div>
  34. </div>
  35. </div>
  36. </div>
  37. </div>
  38. </nav>
  39. <script>
  40. document.addEventListener('DOMContentLoaded', () => {
  41. const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
  42. if ($navbarBurgers.length > 0) {
  43. $navbarBurgers.forEach( el => {
  44. el.addEventListener('click', () => {
  45. const target = el.dataset.target;
  46. const $target = document.getElementById(target);
  47. el.classList.toggle('is-active');
  48. $target.classList.toggle('is-active');
  49. });
  50. });
  51. }
  52. });
  53. </script>