Browse Source

feat(docs): Add visual indication of sub-sections in menu

Michael Bromley 7 years ago
parent
commit
f4843edca8

+ 32 - 5
docs/assets/styles/_menu.scss

@@ -1,11 +1,38 @@
 .book-menu {
     text-transform: capitalize;
-    .section > ul {
-        max-height: 0px;
-        overflow: hidden;
+    padding-left: 12px;
+    .section {
+        .section-link {
+            display: flex;
+            align-items: center;
 
-        &.expanded {
-            max-height: initial;
+            .section-icon {
+                width: 12px;
+                height: 12px;
+                transform: rotateZ(90deg);
+                opacity: 0.5;
+                margin-left: -15px;
+                margin-right: 3px;
+
+                &.expanded {
+                    transform: rotateZ(180deg);
+                }
+            }
+
+            a {
+                flex: 1;
+            }
+        }
+        > ul {
+            max-height: 0px;
+            overflow: hidden;
+
+            &.expanded {
+                max-height: initial;
+                > li:last-child {
+                    margin-bottom: 0;
+                }
+            }
         }
     }
 }

+ 3 - 5
docs/layouts/partials/docs/menu-filetree.html

@@ -13,12 +13,10 @@
         {{ if eq .Kind "section" }}
             <li class="section">
                 {{ $expanded := in $.CurrentPage .Permalink }}
+                <div class="section-link">
+                <img src="{{ "svg/clr-icon-angle.svg" | absURL }}" class="section-icon {{ if $expanded}}expanded{{ end }}" />
                 {{ template "book-page-link" (dict "Page" . "CurrentPage" $.CurrentPage) }}
-                <!-- {{ if $expanded }}
-
-                {{ else }}
-
-                {{ end }} -->
+                </div>
                 {{ template "book-section" (dict "Section" . "CurrentPage" $.CurrentPage "Expanded" $expanded) }}
             </li>
         {{ else }}

+ 1 - 0
docs/static/svg/clr-icon-angle.svg

@@ -0,0 +1 @@
+<svg version="1.1" viewBox="0 0 36 36" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" focusable="false" aria-hidden="true" role="img" width="32" height="32" fill="currentColor"><path class="clr-i-outline clr-i-outline-path-1" d="M29.52,22.52,18,10.6,6.48,22.52a1.7,1.7,0,0,0,2.45,2.36L18,15.49l9.08,9.39a1.7,1.7,0,0,0,2.45-2.36Z"/></svg>