Sidebar arrows

Dropdown chevron and right chevron to bootstrap5 icons

Author: smithdc1

rest_framework/static/rest_framework/docs/css/base.css

@@ -115,7 +115,7 @@ pre.highlight code {
   padding-top: 10px;
   padding-bottom: 10px;
   padding-right: 10px;
-  padding-left: 25px;
+  padding-left: 10px;
 }
 
 .sidebar .menu-list ul .sub-menu li:hover,
@@ -129,19 +129,6 @@ pre.highlight code {
   display: block;
 }
 
-.sidebar .menu-list ul .sub-menu li a:before,
-.sidebar .menu-list li .sub-menu li a:before {
-  font-family: FontAwesome;
-  font-size: 14px;
-  font-weight: bold;
-  content: "\f105";
-  display: inline;
-  vertical-align: middle;
-  padding-left: 0;
-  padding-right: 7px;
-  margin-left: -12px;
-}
-
 .sidebar .menu-list li {
   padding-left: 0px;
   border-left: 3px solid #2e353d;

rest_framework/templates/rest_framework/docs/sidebar.html

@@ -8,17 +8,29 @@ <h3 class="brand"><a href="#">{{ document.title }}</a></h3>
             {% if document|data %}
             {% for section_key, section in document|data|items %}
             <li data-toggle="collapse" data-target="#{{ section_key }}-dropdown" class="collapsed">
-                <a>
-                  <svg width="1.5em" height="1.5em" viewBox="0 0 16 16" class="mb-1 mr-2 ml-2 bi bi-bullseye" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                <a class="d-flex align-items-center">
+                  <svg width="1.5em" height="1.5em" viewBox="0 0 16 16" class="mr-2 ml-2 bi bi-bullseye" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                     <path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
                     <path fill-rule="evenodd" d="M8 13A5 5 0 1 0 8 3a5 5 0 0 0 0 10zm0 1A6 6 0 1 0 8 2a6 6 0 0 0 0 12z"/>
                     <path fill-rule="evenodd" d="M8 11a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 1a4 4 0 1 0 0-8 4 4 0 0 0 0 8z"/>
                     <path d="M9.5 8a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/>
                   </svg>
-                  {% if section_key %}{{ section_key }}{% else %}API Endpoints{% endif %} <span class="arrow"></span></a>
+                  {% if section_key %}{{ section_key }}{% else %}API Endpoints{% endif %}
+                  <svg width="1em" height="1em" viewBox="0 0 16 16" class="ml-auto mr-3 bi bi-chevron-down" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                    <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/>
+                  </svg>
+
+                </a>
                 <ul class="sub-menu {% if section_key %}collapse{% endif %}" id="{{ section_key }}-dropdown">
                 {% for link_key, link in section|schema_links|items %}
-                    <li><a href="#{{ section_key }}-{{ link_key|slugify }}">{{ link.title|default:link_key }}</a></li>
+                    <li>
+                      <a href="#{{ section_key }}-{{ link_key|slugify }}">
+                        <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-chevron-right" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                          <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
+                        </svg>
+                        {{ link.title|default:link_key }}
+                      </a>
+                    </li>
                 {% endfor %}
                 </ul>
             </li>