From b507af1a8dafb3972c2aeb1917363cdf0932bbe3 Mon Sep 17 00:00:00 2001
From: TaehunPark <qkrxogns21@gmail.com>
Date: Mon, 31 Oct 2022 17:24:31 +0900
Subject: [PATCH] =?UTF-8?q?fix:leftMenu=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/main/resources/static/css/common.css      | 18 +++++
 .../templates/fragments/leftMenu.html         | 70 +++++++++++++------
 2 files changed, 65 insertions(+), 23 deletions(-)

diff --git a/src/main/resources/static/css/common.css b/src/main/resources/static/css/common.css
index df682d4c..fb06e4d0 100644
--- a/src/main/resources/static/css/common.css
+++ b/src/main/resources/static/css/common.css
@@ -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);*/
 }
\ No newline at end of file
diff --git a/src/main/resources/templates/fragments/leftMenu.html b/src/main/resources/templates/fragments/leftMenu.html
index b33b3847..386092a9 100644
--- a/src/main/resources/templates/fragments/leftMenu.html
+++ b/src/main/resources/templates/fragments/leftMenu.html
@@ -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>
\ No newline at end of file