From ebcc3ff9af096ab95e473328159d6c6dc2843d67 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Tue, 16 Jul 2019 16:00:46 -0700
Subject: [PATCH] Move sidebar icon to CSS

---
 site/layouts/partials/docs-sidebar.html       |  5 ++--
 site/layouts/partials/icons/arrow.svg         |  1 -
 .../static/docs/4.3/assets/scss/_sidebar.scss | 25 +++++++++++++------
 3 files changed, 21 insertions(+), 10 deletions(-)
 delete mode 100644 site/layouts/partials/icons/arrow.svg

diff --git a/site/layouts/partials/docs-sidebar.html b/site/layouts/partials/docs-sidebar.html
index 200f8cd417..7f6f1eb205 100644
--- a/site/layouts/partials/docs-sidebar.html
+++ b/site/layouts/partials/docs-sidebar.html
@@ -17,7 +17,6 @@
 
       <li class="bd-sidenav-group my-1{{ if $active_group }} active{{ end }} js-sidenav-group">
         <a class="d-inline-flex align-items-center bd-sidenav-group-link" href="/docs/{{ $.Site.Params.docs_version }}/{{ $group_slug }}/{{ if $group.pages }}{{ $link_slug }}/{{ end }}">
-          {{- partial "icons/arrow.svg" (dict "class" "bd-sidenav-group-link-icon" "width" "16" "height" "16") -}}
           <div>{{- $group.title -}}</div>
         </a>
 
@@ -38,7 +37,9 @@
 
     <li class="my-3 mx-4 border-top"></li>
     <li class="bd-sidenav-group pl-3">
-      <a class="d-inline-flex bd-sidenav-group-link" href="/docs/{{ $.Site.Params.docs_version }}/migration/">Migration</a>
+      <a class="d-inline-flex align-items-center bd-sidenav-group-link" href="/docs/{{ $.Site.Params.docs_version }}/migration/">
+        <div>Migration</div>
+      </a>
     </li>
   </ul>
 </nav>
diff --git a/site/layouts/partials/icons/arrow.svg b/site/layouts/partials/icons/arrow.svg
deleted file mode 100644
index 097c1a2d54..0000000000
--- a/site/layouts/partials/icons/arrow.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg"{{ with .width }} width="{{ . }}"{{ end }}{{ with .height }} height="{{ . }}"{{ end }}{{ with .class }} class="{{ . }}"{{ end }} viewBox="0 0 16 16"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 14l6-6-6-6"/></svg>
diff --git a/site/static/docs/4.3/assets/scss/_sidebar.scss b/site/static/docs/4.3/assets/scss/_sidebar.scss
index c18a42053b..834300057f 100644
--- a/site/static/docs/4.3/assets/scss/_sidebar.scss
+++ b/site/static/docs/4.3/assets/scss/_sidebar.scss
@@ -43,6 +43,18 @@
   color: rgba(0, 0, 0, .65);
   @include border-radius(.25rem);
 
+  &::before {
+    display: inline-block;
+    width: .875rem;
+    height: .875rem;
+    margin-right: .25rem;
+    content: "";
+    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" role="img"><path stroke="currentColor" stroke-width="2" d="M5 14l6-6-6-6" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/></svg>');
+    background-repeat: no-repeat;
+    background-position: center center;
+    opacity: .5;
+  }
+
   > * { pointer-events: none; }
 
   &:hover {
@@ -52,15 +64,9 @@
   }
 }
 
-.bd-sidenav-group-link-icon {
-  width: .875rem;
-  margin-right: .25rem;
-  opacity: .5;
-}
-
 .bd-sidenav-group {
   &.active {
-    .bd-sidenav-group-link-icon {
+    .bd-sidenav-group-link::before {
       transform: rotate(90deg);
     }
 
@@ -74,6 +80,11 @@
   }
 }
 
+// Hide icon on last item
+.bd-sidenav-group:last-child .bd-sidenav-group-link::before {
+  display: none;
+}
+
 // All levels of nav
 .bd-sidebar .nav {
   padding-left: 1.25rem;