DBNT
/
FAISP
9
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix:leftMenu 수정

TaehunPark 2022-10-31 17:24:31 +09:00
parent 5686eedce3
commit b507af1a8d
2 changed files with 65 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/main/resources/static/css/common.css
View File

@ -51,4 +51,22 @@
.modal-xxl{
--bs-modal-width : 1440px;
}
/*사이드바 카테고리 트리*/
.btn-toggle:hover, .btn-toggle:focus {
color: rgba(0, 0, 0, .85);
background-color: #d2f4ea;
}
.btn-toggle::before {
width: 1.25em;
line-height: 0;
content: url("/img/bootstrap-icons-1.9.1/caret-right-fill.svg");
transition: transform .35s ease;
transform-origin: 0.5em 50%;
}
.btn-toggle[aria-expanded="true"]::before {
content: url("/img/bootstrap-icons-1.9.1/caret-down-fill.svg");
/*왜 안돌까?*/
/*transform: rotate(90deg);*/
}

70
src/main/resources/templates/fragments/leftMenu.html
View File

@ -4,36 +4,60 @@
<a href="/" class="d-flex">
<img id="logo" th:src="@{/img/logo.png}" alt="logo" title="logo">
</a>
<ul class="nav nav-pills flex-column my-3">
<li th:each="firstMenu:${session.menuList}">
<th:block th:each="cat1Code:${session.commonCode.get('CAT1')}">
<div class="flex-shrink-0 pe-3 py-3 bg-transparent">
<ul class="list-unstyled ps-0">
<li class="mb-1" th:each="firstMenu:${session.menuList}">
<th:block th:each="cat1Code:${session.commonCode.get('CAT1')}">
<th:block th:if="${cat1Code.itemCd eq firstMenu.cat1Cd}">
<a href="#" class="nav-link link-dark firstMenuLink" th:text="${cat1Code.itemValue}"></a>
<div class="menuDiv secondMenu h-100 bg-white" style="display: none">
<ul class="nav nav-pills flex-column">
<li th:each="secondMenu:${firstMenu.childList}">
<button class="btn btn-toggle align-items-center rounded collapsed"
data-bs-toggle="collapse" aria-expanded="false"
th:data-categoryseq="${cat1Code.itemValue}"
th:data-bs-target="'#collapse'+${cat1Code.itemCd}" th:text="${cat1Code.itemValue}">
</button>
<div class="collapse ps-3" th:id="|collapse${cat1Code.itemCd}|">
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1">
<li th:each="secondMenu:${firstMenu.childList}">
<th:block th:each="cat2Code:${session.commonCode.get('CAT2')}">
<th:block th:if="${cat2Code.itemCd eq secondMenu.cat2Cd}">
<a class="nav-link link-dark secondMenuLink" th:text="${cat2Code.itemValue}" th:href="${#lists.isEmpty(secondMenu.childList)?secondMenu.menuUrl:'#'}"></a>
<div class="menuDiv thirdMenu h-100 bg-white" style="display: none" th:if="${#lists.isEmpty(secondMenu.childList) ne true}">
<ul class="nav nav-pills flex-column">
<li th:each="thirdMenu:${secondMenu.childList}">
<th:block th:if="${cat2Code.itemCd eq secondMenu.cat2Cd}">
<ul class="list-unstyled ps-0">
<li class="mb-1">
<th:block th:unless="${#lists.isEmpty(secondMenu.childList)}">
<button class="btn btn-toggle align-items-center rounded collapsed"
data-bs-toggle="collapse" aria-expanded="false" th:onclick="location.href='#'"
th:data-bs-target="'#collapse'+${cat2Code.itemCd}" th:text="${cat2Code.itemValue}">
</button>
</th:block>
<th:block th:if="${#lists.isEmpty(secondMenu.childList)}">
<a th:href="@{${secondMenu.menuUrl}}" class="bi bi-dash link-dark rounded ps-3 text-decoration-none"
th:text="${cat2Code.itemValue}"></a>
</th:block>
<div class="collapse ps-3" th:id="|collapse${cat2Code.itemCd}|">
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1">
<li th:each="thirdMenu:${secondMenu.childList}">
<th:block th:each="cat3Code:${session.commonCode.get('CAT3')}">
<th:block th:if="${cat3Code.itemCd eq thirdMenu.cat3Cd}">
<a class="nav-link link-dark" th:text="${cat3Code.itemValue}" th:href="${thirdMenu.menuUrl}"></a>
<ul class="list-unstyled ps-0">
<li>
<a th:href="@{${thirdMenu.menuUrl}}" class="bi bi-dash link-dark rounded ps-3 text-decoration-none"
th:text="${cat3Code.itemValue}"></a>
</li>
</ul>
</th:block>
</th:block>
</li>
</ul>
</div>
</th:block>
</li>
</ul>
</div>
</li>
</ul>
</th:block>
</th:block>
</li>
</th:block>
</li>
</ul>
</div>
</th:block>
</th:block>
</li>
</ul>
</th:block>
</th:block>
</li>
</ul>
</div>
</div>
</html>