Use separate icon for toolbar hide/show

h/static/scripts/annotator/plugin/toolbar.coffee

@@ -29,7 +29,7 @@ class Annotator.Plugin.Toolbar extends Annotator.Plugin
 
     items = [
       "title": "Toggle Sidebar"
-      "class": "annotator-toolbar-toggle h-icon-arrow-back"
+      "class": "annotator-toolbar-toggle"
       "on":
         "click": (event) =>
           event.preventDefault()

h/static/scripts/host.coffee

@@ -64,11 +64,22 @@ module.exports = class Annotator.Host extends Annotator.Guest
       @frame.addClass 'annotator-no-transition'
     @frame.removeClass 'annotator-collapsed'
 
+    if @toolbar?
+      @toolbar.find('.annotator-toolbar-toggle')
+      .removeClass('h-icon-arrow-back')
+      .addClass('h-icon-arrow-forward')
+
   hideFrame: ->
       @frame.css 'margin-left': ''
       @frame.removeClass 'annotator-no-transition'
       @frame.addClass 'annotator-collapsed'
 
+      if @toolbar?
+        @toolbar.find('.annotator-toolbar-toggle')
+        .removeClass('h-icon-arrow-forward')
+        .addClass('h-icon-arrow-back')
+
+
   _addCrossFrameListeners: ->
     @crossframe.on('showFrame', this.showFrame.bind(this, null))
     @crossframe.on('hideFrame', this.hideFrame.bind(this, null))

h/static/styles/inject.scss

@@ -106,17 +106,8 @@ $base-font-size: 14px;
   z-index: 2147483638;
   -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
 
-  .h-icon-arrow-back {
-    transform: rotate(180deg);
-    font-weight: 600;
-  }
-
   &.annotator-collapsed {
     margin-left: 0;
-
-    .h-icon-arrow-back {
-      transform: rotate(0deg);
-    }
   }
 
   * {