Use new app options template model

angularjs-portal-home/src/main/webapp/js/override.js

@@ -11,6 +11,10 @@ define(['angular'], function(angular) {
             'debug': true,
             'showUserSettingsPage': true,
           },
+          'APP_OPTIONS': {
+            'optionsTemplateURL':
+              'my-app/layout/partials/app-header-options.html',
+          },
           'SERVICE_LOC': {
             'aboutURL': '/portal/api/session.json',
             'sessionInfo': '/portal/api/session.json',

angularjs-portal-home/src/main/webapp/my-app/layout/partials/app-header-options.html

@@ -0,0 +1,43 @@
+<!-- MEDIUM AND LARGE SCREENS -->
+<div layout="row" layout-align="end center" hide-xs>
+  <md-button ng-href="apps" class="md-primary">
+    <span ng-if="GuestMode">
+      <md-icon>explore</md-icon> Browse {{ portal.theme.title }}
+    </span>
+    <span ng-if="!GuestMode">
+      <md-icon>add</md-icon> Add more to home
+    </span>
+  </md-button>
+  <md-switch class="md-accent app-header-toggle" ng-model="expandedMode" ng-controller="ToggleController"
+             aria-label="Toggle expanded widget layout" ng-change="toggleMode(expandedMode)"
+             style="margin-top:0;margin-bottom:0;color:#fff;">
+    <span>Expand widgets</span>
+  </md-switch>
+</div>
+
+<!-- SMALL SCREENS -->
+<md-menu md-position-mode="target-right bottom" hide-gt-xs>
+  <md-button aria-label="Open options menu" class="md-primary link-div" ng-click="$mdOpenMenu($event)">
+    <span layout="row" layout-align="center center"><md-icon>settings</md-icon></span>
+    <md-tooltip class="top-bar-tooltip" md-direction="bottom" md-delay="500">Options</md-tooltip>
+  </md-button>
+  <md-menu-content width="5">
+    <md-menu-item>
+      <md-button ng-href="apps" class="md-primary">
+        <span ng-if="GuestMode">
+          <md-icon>explore</md-icon> Browse {{ portal.theme.title }}
+        </span>
+        <span ng-if="!GuestMode">
+          <md-icon>add</md-icon> Add more to home
+        </span>
+      </md-button>
+    </md-menu-item>
+    <md-menu-item>
+      <md-switch class="md-accent app-header-toggle" ng-model="expandedMode" ng-controller="ToggleController"
+                 aria-label="Toggle expanded widget layout" ng-change="toggleMode(expandedMode)"
+                 style="margin-top:0;margin-bottom:0;color:#fff;">
+        <span>Expand widgets</span>
+      </md-switch>
+    </md-menu-item>
+  </md-menu-content>
+</md-menu>

angularjs-portal-home/src/main/webapp/my-app/layout/partials/home-header.html

@@ -1,17 +1,4 @@
-<script type="text/ng-template" id="toggle-modes.html">
-  <div ng-controller="ToggleController">
-    <md-switch class="md-accent app-header-toggle" ng-model="expandedMode"
-               aria-label="Toggle expanded widget layout" ng-change="toggleMode(expandedMode)"
-               style="margin-top:0;margin-bottom:0;">
-      <span>Expand widgets</span>
-    </md-switch>
-  </div>
-</script>
 <app-header-two-way-bind app-title="'Home'"
-                         app-icon="'fa-home'"
-                         app-action-link-url="'apps'"
-                         app-action-link-icon="GuestMode ? 'fa-globe' : 'fa-plus-square'"
-                         app-action-link-text="GuestMode ? 'Browse {{portal.theme.title}}' : 'Add more to home'"
-                         app-single-option="true"
-                         app-option-template="'toggle-modes.html'">
+                         app-icon="'home'"
+                         app-show-add-to-home="false">
 </app-header-two-way-bind>