카테고리 선택 사이드바 구현.
parent
a0765ec49a
commit
e689cdc1c5
|
|
@ -1,4 +1,3 @@
|
|||
|
||||
.form-signin{
|
||||
width: 100%;
|
||||
max-width: 330px;
|
||||
|
|
@ -10,3 +9,20 @@
|
|||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.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.7.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.7.1/caret-down-fill.svg");
|
||||
/*왜 안돌까?*/
|
||||
/*transform: rotate(90deg);*/
|
||||
}
|
||||
|
|
@ -19,51 +19,68 @@
|
|||
<input type="button" class="btn btn-outline-success" value="자료 등록"/>
|
||||
</div>
|
||||
<div sec:authorize="isAuthenticated()">
|
||||
<div class="flex-shrink-0 p-3 bg-white">
|
||||
<div class="flex-shrink-0 pe-3 py-3 bg-transparent">
|
||||
<ul class="list-unstyled ps-0">
|
||||
<th:block th:each="depth1:${session.categoryList}">
|
||||
<li class="mb-1">
|
||||
<button class="btn btn-toggle align-items-center rounded collapsed"
|
||||
data-bs-toggle="collapse" aria-expanded="false" th:data-bs-target="'#collapse'+${depth1.categorySeq}"
|
||||
th:text="${depth1.categoryName}">
|
||||
</button>
|
||||
<div class="collapse ps-3" th:id="|collapse${depth1.categorySeq}|">
|
||||
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1">
|
||||
<th:block th:each="depth2:${depth1.childCategoryList}">
|
||||
<li>
|
||||
<ul class="list-unstyled ps-0">
|
||||
<li class="mb-1">
|
||||
<button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#home-collapse" aria-expanded="false">
|
||||
Home
|
||||
<button class="btn btn-toggle align-items-center rounded collapsed"
|
||||
data-bs-toggle="collapse" aria-expanded="false"
|
||||
th:data-bs-target="'#collapse'+${depth2.categorySeq}" th:text="${depth2.categoryName}">
|
||||
</button>
|
||||
<div class="collapse" id="home-collapse" style="">
|
||||
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
|
||||
<li><a href="#" class="link-dark rounded">Overview</a></li>
|
||||
<li><a href="#" class="link-dark rounded">Updates</a></li>
|
||||
<li><a href="#" class="link-dark rounded">Reports</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<div class="collapse ps-3" th:id="|collapse${depth2.categorySeq}|">
|
||||
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1">
|
||||
<th:block th:each="depth3:${depth2.childCategoryList}">
|
||||
<li>
|
||||
<ul class="list-unstyled ps-0">
|
||||
<li class="mb-1">
|
||||
<button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#dashboard-collapse" aria-expanded="false">
|
||||
Dashboard
|
||||
<button class="btn btn-toggle align-items-center rounded collapsed"
|
||||
data-bs-toggle="collapse" aria-expanded="false"
|
||||
th:data-bs-target="'#collapse'+${depth3.categorySeq}" th:text="${depth3.categoryName}">
|
||||
</button>
|
||||
<div class="collapse" id="dashboard-collapse" style="">
|
||||
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
|
||||
<li><a href="#" class="link-dark rounded">Overview</a></li>
|
||||
<li><a href="#" class="link-dark rounded">Weekly</a></li>
|
||||
<li><a href="#" class="link-dark rounded">Monthly</a></li>
|
||||
<li><a href="#" class="link-dark rounded">Annually</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="mb-1">
|
||||
<button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#orders-collapse" aria-expanded="false">
|
||||
Orders
|
||||
</button>
|
||||
<div class="collapse" id="orders-collapse" style="">
|
||||
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
|
||||
<li><a href="#" class="link-dark rounded">New</a></li>
|
||||
<li><a href="#" class="link-dark rounded">Processed</a></li>
|
||||
<li><a href="#" class="link-dark rounded">Shipped</a></li>
|
||||
<li><a href="#" class="link-dark rounded">Returned</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<th:block th:each="category:${session.categoryList}">
|
||||
|
||||
<div class="collapse ps-3" th:id="|collapse${depth3.categorySeq}|">
|
||||
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1">
|
||||
<th:block th:each="depth4:${depth3.childCategoryList}">
|
||||
<li><a href="#" class="bi bi-dash link-dark rounded ps-3 text-decoration-none" th:text="${depth4.categoryName}"></a></li>
|
||||
</th:block>
|
||||
<th:block th:if="${depth3.childCategoryList.size==0}">
|
||||
<li>등록된 소분류가 없습니다.</li>
|
||||
</th:block>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</th:block>
|
||||
<th:block th:if="${depth2.childCategoryList.size==0}">
|
||||
<li>등록된 중분류가 없습니다.</li>
|
||||
</th:block>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</th:block>
|
||||
<th:block th:if="${depth1.childCategoryList.size==0}">
|
||||
<li>등록된 연도가 없습니다.</li>
|
||||
</th:block>
|
||||
<!--<li><a href="#" class="link-dark rounded">Shipped</a></li>
|
||||
<li><a href="#" class="link-dark rounded">Returned</a></li>-->
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
</th:block>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</html>
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
|
||||
<!--bootstrap-->
|
||||
<link rel="stylesheet" th:href="@{/vendor/bootstrap-5.1.3-dist/css/bootstrap.min.css}">
|
||||
<link rel="stylesheet" th:href="@{/img/bootstrap-icons-1.7.1/bootstrap-icons.scss}">
|
||||
<link rel="stylesheet" th:href="@{/img/bootstrap-icons-1.7.1/bootstrap-icons.css}">
|
||||
<!--bootstrap-datepicker-->
|
||||
<link rel="stylesheet" th:href="@{/vendor/bootstrap-datepicker-1.9.0-dist/css/bootstrap-datepicker.min.css}">
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue