added a sidenav toggle button when the sidenav is hidden.

Signed-off-by: Ken Fukuyama <kenfdev@gmail.com>

added a sidenav toggle button when the sidenav is hidden.
ac3e91cb · Ken Fukuyama · Alex Ellis · 296b173c · ac3e91cb · ac3e91cb
Commit ac3e91cb authored 7 years ago by Ken Fukuyama Committed by Alex Ellis 7 years ago
--- a/gateway/assets/img/icons/ic_arrow_back_white.svg
+++ b/gateway/assets/img/icons/ic_arrow_back_white.svg
+<svg fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0 0h24v24H0z" fill="none"/>
+    <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/>
+</svg>
\ No newline at end of file
--- a/gateway/assets/img/icons/ic_menu_white.svg
+++ b/gateway/assets/img/icons/ic_menu_white.svg
+<svg fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0 0h24v24H0z" fill="none"/>
+    <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
+</svg>
\ No newline at end of file
--- a/gateway/assets/index.html
+++ b/gateway/assets/index.html
@@ -19,11 +19,24 @@
 <body ng-controller="home">
    <div layout="column" ng-cloak>

+        <md-toolbar class="md-theme-indigo" hide-gt-sm>
+            <div class="md-toolbar-tools">
+              <md-button ng-click="toggleSideNav()" class="md-icon-button" aria-label="Menu">
+                <md-icon md-svg-icon="img/icons/ic_menu_white.svg"></md-icon>
+              </md-button>
+            </div>
+        </md-toolbar>
        <section id="popupContainer" layout="row" flex>
            <md-sidenav class="md-sidenav-left" md-component-id="left" md-is-locked-open="$mdMedia('gt-sm')" md-whiteframe="4" layout="column">

                <md-toolbar class="md-theme-indigo">
-                    <h1 class="md-toolbar-tools"><img src="icon.png" alt="OpenFaaS Icon" width="60px" height="60px" class="md-avatar"/>&nbsp; OpenFaaS Portal</h1>
+                    <div class="md-toolbar-tools">
+                      <img src="icon.png" alt="OpenFaaS Icon" width="60px" height="60px" class="md-avatar"/>
+                      <h1 style="flex: 1 1 auto;">&nbsp; OpenFaaS Portal</h1>
+                      <md-button ng-click="toggleSideNav()" class="md-icon-button" aria-label="Back" hide-gt-sm>
+                        <md-icon md-svg-icon="img/icons/ic_arrow_back_white.svg"></md-icon>
+                      </md-button>
+                    </div>
                </md-toolbar>

                <md-content layout-padding>

--- a/gateway/assets/script/bootstrap.js
+++ b/gateway/assets/script/bootstrap.js
@@ -4,8 +4,8 @@

 var app = angular.module('faasGateway', ['ngMaterial']);

-app.controller("home", ['$scope', '$log', '$http', '$location', '$timeout', '$mdDialog', '$mdToast',
-        function($scope, $log, $http, $location, $timeout, $mdDialog, $mdToast) {
+app.controller("home", ['$scope', '$log', '$http', '$location', '$timeout', '$mdDialog', '$mdToast', '$mdSidenav',
+        function($scope, $log, $http, $location, $timeout, $mdDialog, $mdToast, $mdSidenav) {
    $scope.functions = [];
    $scope.invocationRequest = "";
    $scope.invocationResponse = "";
@@ -14,6 +14,10 @@ app.controller("home", ['$scope', '$log', '$http', '$location', '$timeout', '$md
        contentType: "text"
    };

+    $scope.toggleSideNav = function() {
+        $mdSidenav('left').toggle();
+    };
+
    $scope.functionTemplate = {
        image: "",
        envProcess: "",