リファレンス類を尊重

refs cpprefjp/site#476

css/kunai/site/sidebar.css

@@ -650,10 +650,25 @@ main[role="main"] .kunai-sidebar.force-legacy {
   }
 
   &[data-top-id="reference"] {
-    .kunai-branch {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 2em;
+
+    border-bottom: 3px dashed rgba(120, 120, 220, 0.6);
+
+    > .kunai-branch {
       > ul.branch {
         margin-bottom: .5em;
       }
+
+      &[data-branch-for="headers"] {
+        order: 3;
+        margin-bottom: 2em;
+        max-height: 70vh;
+      }
+      &[data-branch-for="articles"] {
+        order: 4;
+      }
     }
 
     > ul.articles {

js/kunai/ui/treeview.js

@@ -132,8 +132,12 @@ class DOM {
     $(e.target).closest('li').toggleClass('expanded')
   }
 
-  async kunaiBranch(me, scrollHandler) {
-    let elem = $('<div>', {class: 'kunai-branch', 'data-branch-id': this.lastBranchID++}).append(me.addClass('branch'))
+  async kunaiBranch(me, branchFor, scrollHandler) {
+    let elem = $('<div>', {
+      class: 'kunai-branch',
+      'data-branch-id': this.lastBranchID++,
+      'data-branch-for': branchFor,
+    }).append(me.addClass('branch'))
 
     if (scrollHandler) {
       elem.prepend($('<div>', {class: 'preview'}))
@@ -215,7 +219,7 @@ class DOM {
       self.append(await Promise.all(l.articles.map(async (ar) => {
         return await this.makeArticle(ar)
       })))
-      ret.append(await this.kunaiBranch(self))
+      ret.append(await this.kunaiBranch(self, 'articles'))
     }
 
     return ret
@@ -324,7 +328,7 @@ class Treeview {
         return await this.dom.makeArticle(ar)
       })))
 
-      e.append(await this.dom.kunaiBranch(self))
+      e.append(await this.dom.kunaiBranch(self, 'articles'))
     }
 
     if (top.headers && top.headers.length) {
@@ -334,6 +338,7 @@ class Treeview {
 
       e.append(await this.dom.kunaiBranch(
         self,
+        'headers',
         top.category.index === this.kc.categories().get('reference').index ?
           ::this.dom.handleScroll : null
       ))