<!DOCTYPE html>
<html lang="ko"
	xmlns:th="http://www.thymeleaf.org">
<!--
 *******************************************************************************
 * @source  : gnb.html
 * @desc    : Top Menu
 *============================================================================
 * STYLE24
 * Copyright(C) 2020 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2020.10.06   gagamel     최초 작성
 *******************************************************************************
 -->
<header th:fragment="gnb">
	<!-- HEADER AREA -->
	<!-- <header> -->
		<!-- 로고, 전체화면 버튼 -->
		<div class="header-logo">
			<a href="/">
				<img src="/image/gnb_logo.png" alt="로고"/>
			</a>
			<button type="button" class="lnbClose">
				<i class="fa fa-bars"></i>
			</button>
		</div>
		<!-- //로고, 전체화면 버튼 -->
		
		<!-- 상단 메뉴 -->
		<div class="header-menu">
			<span class="menu" th:each="item, index : ${loginMenuList}" th:if="${item.menuLvl == 1}">
				<a href="#" th:href="@{javascript:void(0);}" th:attr="data-menu-id=@{${item.menuId}}" th:text="${item.menuNm}">메뉴명</a>
			</span>
		</div>
		<!-- //상단 메뉴 -->
		
		<!-- 사용자,권한,로그아웃-->
		<div class="header-info">
			<i class="heart">&#10084;</i>
			<a><strong th:text="${sessionInfo.userNm}">홍길동</strong></a>
			<i class="dot">&bull;</i>
			<a th:text="${sessionInfo.roleNm}">Director</a>
			<i class="dot">&bull;</i>
			<a href="#" th:onclick="|fnOpenPasswordChangePopup();|">비밀번호 변경</a>
			<i class="dot">&bull;</i>
			<a href="#" th:href="@{/logout}">Log out</a>
		</div>
		<!-- //사용자,권한,로그아웃-->
		
		<!-- 반응형 : 사용자,권한,로그아웃-->
		<div class="header-info-sm">
			<a class="tooltip">
				<i class="fa fa-user"></i>
				<span class="tooltiptext" th:text="${sessionInfo.userNm + '(' + sessionInfo.roleNm + ')'}">홍길동 (Director)</span>
			</a>
			<a href="#" th:href="@{/logout}" class="tooltip">
				<i class="fa fa-chain-broken"></i>
				<span class="tooltiptext logout">로그아웃</span>
			</a>
		</div>
		<!-- //반응형 : 사용자,권한,로그아웃-->
	<!-- </header> -->
	<!-- //HEADER AREA -->
	
<script th:inline="javascript">
/*<![CDATA[*/
	// Header 메뉴 클릭
	$('.header-menu > span > a').on('click', function() {
		// 햄버거 버튼 보이기
		$('.header-logo').find('.lnbClose').show();
		
		// active/inactive
		let a = $(this);
		let parentTag = $(a).parent().parent();
		$.each($(parentTag).find('a'), function(idx) {
			$(this).removeClass('on');
		});
		$(a).addClass('on');
		
		$('#wrapper').removeClass('dashboard');
		cfnDrawLnbMenu($(a).data('menuId'));
	});
	
	// 비밀번호 변경 팝업
	var fnOpenPasswordChangePopup = function() {
		cfnOpenModalPopup('/system/password/change/form', 'popupPasswordChange');
	}
	
	$(document.body).ready(function() {
		// 로그인메뉴목록 설정
		cfnSetLoginMenuList([[${loginMenuList}]]);
	});
/*]]>*/
</script>

</header>

</html>