gnb.html 2.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. <!DOCTYPE html>
  2. <html lang="ko"
  3. xmlns:th="http://www.thymeleaf.org">
  4. <!--
  5. *******************************************************************************
  6. * @source : gnb.html
  7. * @desc : Top Menu
  8. *============================================================================
  9. * STYLE24
  10. * Copyright(C) 2020 TSIT, All rights reserved.
  11. *============================================================================
  12. * VER DATE AUTHOR DESCRIPTION
  13. * === =========== ========== =============================================
  14. * 1.0 2020.10.06 gagamel 최초 작성
  15. *******************************************************************************
  16. -->
  17. <div th:fragment="gnb">
  18. <!-- HEADER AREA -->
  19. <header>
  20. <!-- 로고, 전체화면 버튼 -->
  21. <div class="header-logo">
  22. <a href="/">
  23. <img src="/image/gnb_logo.png" alt="로고"/>
  24. </a>
  25. <button type="button" class="lnbClose">
  26. <i class="fa fa-bars"></i>
  27. </button>
  28. </div>
  29. <!-- //로고, 전체화면 버튼 -->
  30. <!-- 상단 메뉴 -->
  31. <div class="header-menu">
  32. <span class="menu" th:each="item, index : ${loginMenuList}" th:if="${item.menuLvl == 1}">
  33. <a href="#" th:href="@{javascript:void(0);}" th:attr="data-menu-id=@{${item.menuId}}" th:text="${item.menuNm}">메뉴명</a>
  34. </span>
  35. </div>
  36. <!-- //상단 메뉴 -->
  37. <!-- 사용자,권한,로그아웃-->
  38. <div class="header-info">
  39. <i class="heart">&#10084;</i>
  40. <a><strong th:text="${sessionInfo.userNm}">홍길동</strong></a>
  41. <i class="dot">&bull;</i>
  42. <a th:text="${sessionInfo.roleNm}">Director</a>
  43. <i class="dot">&bull;</i>
  44. <a th:onclick="|cfnPasswordChange();|">비밀번호 변경</a>
  45. <i class="dot">&bull;</i>
  46. <a href="#" th:href="@{/logout}">Log out</a>
  47. </div>
  48. <!-- //사용자,권한,로그아웃-->
  49. <!-- 반응형 : 사용자,권한,로그아웃-->
  50. <div class="header-info-sm">
  51. <a class="tooltip">
  52. <i class="fa fa-user"></i>
  53. <span class="tooltiptext" th:text="${sessionInfo.userNm + '(' + sessionInfo.roleNm + ')'}">홍길동 (Director)</span>
  54. </a>
  55. <a href="#" th:href="@{/logout}" class="tooltip">
  56. <i class="fa fa-chain-broken"></i>
  57. <span class="tooltiptext logout">로그아웃</span>
  58. </a>
  59. </div>
  60. <!-- //반응형 : 사용자,권한,로그아웃-->
  61. </header>
  62. <!-- //HEADER AREA -->
  63. <script th:inline="javascript">
  64. /*<![CDATA[*/
  65. // Header 메뉴 클릭
  66. $('.header-menu > span > a').on('click', function() {
  67. // 햄버거 버튼 보이기
  68. $('.header-logo').find('.lnbClose').show();
  69. // active/inactive
  70. let a = $(this);
  71. let parentTag = $(a).parent().parent();
  72. $.each($(parentTag).find('a'), function(idx) {
  73. $(this).removeClass('on');
  74. });
  75. $(a).addClass('on');
  76. cfnDrawLnbMenu($(a).data('menuId'));
  77. });
  78. $(document.body).ready(function() {
  79. // 로그인메뉴목록 설정
  80. cfnSetLoginMenuList([[${loginMenuList}]]);
  81. });
  82. /*]]>*/
  83. </script>
  84. </div>
  85. </html>