Fix: Add nav drawer icon override support (fixes #417) (#498)

* Set up nav drawer btn icon override

* Removed drawer css icon, converted label margin css

* Added new sidebar icons

Author: guywillis

fonts/selection.json

@@ -272,3 +272,7 @@
 .icon-youku                       { &:before { content: "\e9eb"; } }
 .icon-youtube-2                   { &:before { content: "\e9ec"; } }
 .icon-youtube                     { &:before { content: "\e9ed"; } }
+.icon-sidebar-01                  { &:before { content: "\e9ee"; } }
+.icon-sidebar-02                  { &:before { content: "\e9ef"; } }
+.icon-sidebar-03                  { &:before { content: "\e9f0"; } }
+.icon-sidebar-04                  { &:before { content: "\e9f1"; } }

fonts/vanilla.woff

@@ -78,11 +78,11 @@ html.is-nav-bottom #wrapper {
     order: -1;
   }
 
-  &.has-label-left &__btn-label {
+  &.has-label-left .icon ~ .nav__btn-label {
     margin-inline-end: @icon-padding / 2;
   }
 
-  &.has-label-auto .nav__btn-label {
+  &.has-label-auto .icon ~ .nav__btn-label {
     margin-inline-start: @icon-padding / 2;
   }
 
@@ -111,10 +111,6 @@ html.is-nav-bottom #wrapper {
   &__back-btn .icon {
     .icon-controls-small-left;
   }
-
-  &__drawer-btn .icon {
-    .icon-list;
-  }
 }
 
 // Show nav label at breakpoints

fonts/vanilla.woff2

@@ -349,6 +349,15 @@
               "right"
             ]
           }
+        },
+        "_iconClass": {
+          "type": "string",
+          "required": false,
+          "default": "icon-list",
+          "title": "Drawer icon class",
+          "inputType": "Text",
+          "validators": [],
+          "help": "CSS class name to be applied to the drawer sidebar icon."
         }
       }
     },

less/_defaults/icons.less

@@ -305,6 +305,12 @@
             "left",
             "right"
           ]
+        },
+        "_iconClass": {
+          "type": "string",
+          "title": "Drawer icon class",
+          "description": "CSS class name to be applied to the drawer sidebar icon.",
+          "default": "icon-list"
         }
       },
       "_adapt": {

less/core/nav.less

@@ -1,5 +1,6 @@
 {{! make the _globals object in course.json available to this template}}
 {{import_globals}}
+{{import_adapt}}
 
 {{! All links in the nav bar should have an attribute of data-event, navigationView uses this to fire a global event}}
 <div class="nav__inner">
@@ -20,8 +21,12 @@
   {{/each}}
 
   <button name="drawer" class="btn-icon nav__btn nav__drawer-btn js-nav-drawer-btn is-position-{{_config._drawer._position}}" data-event="toggleDrawer" aria-expanded="false" aria-label="{{_globals._accessibility._ariaLabels.navigationDrawer}}" data-order="{{_globals._extensions._drawer._navOrder}}" data-tooltip-id="drawer">
-    <span class="icon" aria-hidden="true"></span>
+    {{#if _config._drawer._iconClass}}
+    <span class="icon {{_config._drawer._iconClass}}" aria-hidden="true"></span>
+    {{/if}}
+    {{#if Adapt.course._navigation._showLabel}}
     <span class='nav__btn-label' aria-hidden="true">{{_globals._accessibility._ariaLabels.navigationDrawer}}</span>
+    {{/if}}
   </button>
 
 </div>