Add docs menu

docs/_data/links.json

@@ -249,7 +249,7 @@
       "path": "/documentation/components/tabs"
     }
   },
-  "order": {
+  "categories": {
     "overview": ["overview-start", "overview-classes", "overview-modular", "overview-responsiveness", "overview-variables", "overview-colors", "overview-functions", "overview-mixins"],
     "columns": ["columns-basics", "columns-sizes", "columns-responsiveness", "columns-nesting", "columns-gap", "columns-options"],
     "modifiers": ["modifiers-syntax", "modifiers-helpers", "modifiers-responsive-helpers", "modifiers-color-helpers", "modifiers-typography-helpers"],

docs/_layouts/documentation.html

@@ -5,8 +5,9 @@ route: documentation
 
 {% include navbar.html id="Documentation" %}
 
+{% assign current_category = page.doc-tab %}
 {% assign current_link_id = page.breadcrumb | last %}
-{% assign category_links = site.data.links.order[page.doc-tab] %}
+{% assign category_links = site.data.links.categories[current_category] %}
 
 {% for link_id in category_links %}
   {% if link_id == current_link_id %}
@@ -98,9 +99,38 @@ route: documentation
       </div>
 
       <aside class="bd-side">
-        {% unless page.hide_carbon %}
+        <nav class="bd-categories">
+          {% for category in site.data.links.categories %}
+            <div class="bd-category">
+              {% assign category_id = category[0] %}
+              {% assign category_links = category[1] %}
 
-        {% endunless %}
+              {% assign category_link = site.data.links.by_id[category_id] %}
+
+              <header class="bd-category-header">
+                <a class="bd-category-toggle">
+                  <span class="icon">
+                    <i class="fas fa-chevron-down"></i>
+                  </span>
+                </a>
+                <a class="bd-category-name" href="{{ site.url }}{{ category_link.path }}">
+                  <strong>{{ category_link.name }}</strong>
+                </a>
+              </header>
+
+              <ul class="bd-category-list {% if category_id == current_category %}is-active{% endif %}">
+                {% for link_id in category_links %}
+                  {% assign link = site.data.links.by_id[link_id] %}
+                  <li {% if link_id == current_link_id %}class="is-current"{% endif %}>
+                    <a href="{{ site.url }}{{ link.path }}">
+                      {{ link.name }}
+                    </a>
+                  </li>
+                {% endfor %}
+              </ul>
+            </div>
+          {% endfor %}
+        </nav>
       </aside>
     </div>
   </div>

docs/_sass/main.sass

@@ -66,6 +66,44 @@ $main-spacing: 2.5rem
   right: 0
   top: 0
 
+.bd-category
+  a
+    &:hover
+      color: $link
+  &:not(:last-child)
+    margin-bottom: 0.5rem
+
+.bd-category-header
+  position: relative
+
+.bd-category-toggle
+  +overlay
+  align-items: center
+  color: $grey-light
+  display: flex
+  justify-content: flex-end
+  .icon
+    font-size: 0.75rem
+
+.bd-category-name
+  color: $text-strong
+  position: relative
+
+.bd-category-list
+  display: none
+  font-size: 0.875rem
+  padding: 0.5rem
+  li
+    &:not(:last-child)
+      margin-bottom: 0.5em
+    &.is-current
+      a
+        color: $link
+  a
+    color: $text-light
+  &.is-active
+    display: block
+
 +touch
   .bd-lead,
   .bd-side
@@ -77,7 +115,7 @@ $main-spacing: 2.5rem
   .bd-side-background
     display: none
 
-$sidebar-width: 16rem
+$sidebar-width: 14rem
 
 +tablet
   .bd-duo

docs/css/bulma-docs.css

@@ -130,7 +130,7 @@
   width: 1em;
 }
 
-.is-overlay, .image.is-square img, .image.is-1by1 img, .image.is-5by4 img, .image.is-4by3 img, .image.is-3by2 img, .image.is-5by3 img, .image.is-16by9 img, .image.is-2by1 img, .image.is-3by1 img, .image.is-4by5 img, .image.is-3by4 img, .image.is-2by3 img, .image.is-3by5 img, .image.is-9by16 img, .image.is-1by2 img, .image.is-1by3 img, .modal, .modal-background, .hero-video, .intro-spinner, .intro-shadow, .bd-article-overlay, .bd-article-icon,
+.is-overlay, .image.is-square img, .image.is-1by1 img, .image.is-5by4 img, .image.is-4by3 img, .image.is-3by2 img, .image.is-5by3 img, .image.is-16by9 img, .image.is-2by1 img, .image.is-3by1 img, .image.is-4by5 img, .image.is-3by4 img, .image.is-2by3 img, .image.is-3by5 img, .image.is-9by16 img, .image.is-1by2 img, .image.is-1by3 img, .modal, .modal-background, .hero-video, .bd-category-toggle, .intro-spinner, .intro-shadow, .bd-article-overlay, .bd-article-icon,
 .bd-article-info, .bd-structure-item::before, .bd-structure-item::after, .highlight .bd-show, .bd-banner-background, .bd-book-pattern::before,
 .bd-book-modal-column.bd-is-cover::before, .bd-book-pattern, .bd-book-modal-background {
   bottom: 0;
@@ -9570,6 +9570,56 @@ label.panel-block:hover {
   top: 0;
 }
 
+.bd-category a:hover {
+  color: #3273dc;
+}
+
+.bd-category:not(:last-child) {
+  margin-bottom: 0.5rem;
+}
+
+.bd-category-header {
+  position: relative;
+}
+
+.bd-category-toggle {
+  align-items: center;
+  color: #b5b5b5;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.bd-category-toggle .icon {
+  font-size: 0.75rem;
+}
+
+.bd-category-name {
+  color: #363636;
+  position: relative;
+}
+
+.bd-category-list {
+  display: none;
+  font-size: 0.875rem;
+  padding: 0.5rem;
+}
+
+.bd-category-list li:not(:last-child) {
+  margin-bottom: 0.5em;
+}
+
+.bd-category-list li.is-current a {
+  color: #3273dc;
+}
+
+.bd-category-list a {
+  color: #7a7a7a;
+}
+
+.bd-category-list.is-active {
+  display: block;
+}
+
 @media screen and (max-width: 1023px) {
   .bd-lead,
   .bd-side {
@@ -9600,7 +9650,7 @@ label.panel-block:hover {
     display: flex;
   }
   .bd-side {
-    flex: 0 0 calc(16rem + 1.5rem);
+    flex: 0 0 calc(14rem + 1.5rem);
   }
 }