Update global nav to use hamburger icon (#87)

CHANGELOG.md

@@ -1,5 +1,9 @@
 # CHANGELOG
 
+## v6.3.5
+### Changed
+- Updated the global nav icon to be the hamburger icon and always have it aligned to the left.
+
 ## v6.3.4
 ### Fixed
 - Fix DatePicker + DateTimeField to return empty string and set value to empty when the value is removed

lib/components/Navigation/Navigation.module.scss

@@ -62,16 +62,6 @@
 
     &.expanded {
         width: $layout-nav-expanded-width;
-
-        .expand-icon {
-            width: 100%;
-            transform: rotate(180deg);
-            text-align: left;
-
-            @include rtl {
-                transform: none;
-            }
-        }
     }
 
     // don't show global-nav for small screens: it should be part of masthead instead.

lib/components/Navigation/Navigation.tsx

@@ -28,7 +28,7 @@ export function Navigation({ isExpanded, onClick, attr, children }: NavigationPr
                 onClick={onClick}
                 attr={attr && attr.navButton}
             >
-                <span className={cx('expand-icon', 'global-nav-item-icon', 'icon', 'icon-chevronRight')} />
+                <span className={cx('global-nav-item-icon', 'icon', 'icon-globalNavButton')} />
             </Attr.button>
             <div className={cx('scrollable')}>
                 {children}

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@microsoft/azure-iot-ux-fluent-controls",
-    "version": "6.3.4",
+    "version": "6.3.5",
     "description": "Azure IoT UX Fluent Controls",
     "main": "./lib/index.js",
     "types": "./lib/index.d.ts",