💄 Add tree line on TOC list style.

assets/css/_common/outline/sidebar/sidebar-toc.scss

@@ -1,26 +1,57 @@
-
 .post-toc {
   font-size: $font-size-small;
   padding: 0 8px;
-  
+
   ul {
+
     list-style: none;
     margin: 0;
     padding: 0 2px 5px 10px;
     text-align: left;
     counter-reset: item;
 
-    > li {
-      padding-left: 0;
+    >li {
+
+
+      > ul {
+        border-left: 1px solid;
+        margin-left: 6px;
+
+        li {
+          position: relative;
+          padding-left: 0;
+
+          &:before {
+            position: absolute;
+            content: ' ';
+            top: 0.14em;
+            left: -0.75em;
+            width: 0.68em;
+            height: 0.815em;
+            border-style: none none dashed none;
+            border-width: 0.05em;
+          }
+        }
+      }
+
+
     }
 
+
+
     a {
       transition: all $transition-ease;
+      border: none;
 
       &:before {
-        content: counters(item, ".") ". "; 
+        content: counters(item, ".") ". ";
         counter-increment: item;
       }
+
+      &:hover {
+        text-decoration: underline;
+        color: $orange;
+      }
     }
   }
 
@@ -39,24 +70,24 @@
       display: if($toc_expand_all, block, none);
     }
 
-    .active > .nav-child {
+    .active>.nav-child {
       display: block;
     }
 
-    .active-current > .nav-child {
+    .active-current>.nav-child {
       display: block;
 
-      > .nav-item {
+      >.nav-item {
         display: block;
       }
     }
 
-    .active > a {
+    .active>a {
       border-bottom-color: $sidebar-highlight;
       color: $sidebar-highlight;
     }
 
-    .active-current > a {
+    .active-current>a {
       color: $sidebar-highlight;
 
       &:hover {
@@ -64,4 +95,4 @@
       }
     }
   }
-}
+}