Make table of contents collapse on mobile

styles/_layout.scss

@@ -385,7 +385,7 @@ $columns: 12; // Number of columns in the grid system
 
   #page-toc-wrapper {
     position: static;
-    display: block;
+    // display: block;
     clear: both;
     overflow-y: inherit;
     max-width: 100%;

styles/_side-nav.scss

@@ -111,6 +111,11 @@ aside .active-parent > a {
 .right-sidebar {
   padding: 44px 0 24px 48px;
 
+  @include media-breakpoint-down(md) {
+    padding: 1.5rem;
+    border: 1px solid $gray-600;
+  }
+
   .toc-header {
     font-weight: bold;
     font-size: 14px;

styles/_top-nav.scss

@@ -541,7 +541,8 @@ a {
     background-color: $blue-purple-400;
     transition: all .2s ease;
     border: none;
-
+  }
+  &:not(.expander) span {
     &:first-of-type {
       left: 0;
       transform: rotate(45deg);
@@ -562,7 +563,8 @@ a {
   }
 }
 
-.dropdown.show .chevron {
+.dropdown.show .chevron,
+.expander:not(.collapsed) .chevron {
   span:first-of-type {
     transform: rotate(-45deg);
   }

template/pagetype-doc.html.jinja

@@ -31,8 +31,12 @@
 {% endblock %}
 
 {% block right_sidebar %}
+  <a class="with-caret expander collapsed d-lg-none" id="toc-expander" role="button" data-toggle="collapse" data-target="#page-toc-wrapper" aria-expanded="false">
+    Page Toolbar
+    <span class="chevron"><span></span><span></span></span>
+  </a>
+  <div id="page-toc-wrapper" class="collapse d-lg-block">
     {% include 'component-github-edit.html.jinja' %}
-  <div id="page-toc-wrapper">
     {% include 'component-label-list.html.jinja' %}
     <div class="toc-header">
       <h4>{% trans %}In this document{% endtrans %}</h4>