From 9e1bf694325a1a65f1a7073c2cf34074c74ab747 Mon Sep 17 00:00:00 2001
From: Lucien van Wouw <lucien.van.wouw@di.huc.knaw.nl>
Date: Tue, 22 Sep 2020 11:21:15 +0200
Subject: [PATCH] Add menu items for schedule and enrich.

---
 Open-ILS/src/templates/staff/navbar.tt2      |   26 -
 Open-ILS/src/templates_iish/staff/navbar.tt2 |  624 +++++++++
 Open-ILS/xul/staff_client/server/index.xhtml | 1183 +++++++++---------
 3 files changed, 1227 insertions(+), 606 deletions(-)
 create mode 100644 Open-ILS/src/templates_iish/staff/navbar.tt2

diff --git a/Open-ILS/src/templates/staff/navbar.tt2 b/Open-ILS/src/templates/staff/navbar.tt2
index 33dd5f7a46..220c3d1d1f 100644
--- a/Open-ILS/src/templates/staff/navbar.tt2
+++ b/Open-ILS/src/templates/staff/navbar.tt2
@@ -280,32 +280,6 @@
             </a>
           </li>
           <li class="divider"></li>
-          <li>
-            <a href="./schedule/legacy/main" target="_self">
-              <span class="glyphicon glyphicon-object-align-bottom"></span>
-              [% l('Batch schedule') %]
-            </a>
-          </li>
-          <li>
-            <a href="./enrich/legacy/main" target="_self">
-              <span class="glyphicon glyphicon-object-align-bottom"></span>
-              [% l('Enrich reports') %]
-            </a>
-          </li>
-          <li class="divider"></li>
-          <li>
-            <a href="./enrich/legacy/main" target="_self">
-              <span class="glyphicon glyphicon-object-align-bottom"></span>
-              [% l('Enrich') %]
-            </a>
-          </li>
-           <li>
-            <a href="./schedule/legacy/main" target="_self">
-              <span class="glyphicon glyphicon-object-align-bottom"></span>
-              [% l('Schedule') %]
-            </a>
-          </li>
-          <li class="divider"></li>
           <li>
             <a href="./cat/catalog/retrieve_by_id" target="_self">
               <span class="glyphicon glyphicon-file"></span>
diff --git a/Open-ILS/src/templates_iish/staff/navbar.tt2 b/Open-ILS/src/templates_iish/staff/navbar.tt2
new file mode 100644
index 0000000000..ab4da8bddf
--- /dev/null
+++ b/Open-ILS/src/templates_iish/staff/navbar.tt2
@@ -0,0 +1,624 @@
+<!-- 
+  main navigation bar
+    
+  note the use of target="_self" for navigation links.
+  this tells angular to treat the href as a new page 
+  and not an intra-app route.  This is necessary when
+  moving between applications.
+
+  For icons, see http://getbootstrap.com/components/#glyphicons
+-->
+
+<div id="top-navbar" role="navigation"
+  class="navbar navbar-default navbar-fixed-top" role="navigation">
+
+  <!-- navbar-header here needed for supporting angular-ui-bootstrap -->
+  <div class="navbar-header">
+    <button type="button" class="navbar-toggle" 
+        ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed">
+      <span class="sr-only">[% l('Toggle navigation') %]</span>
+      <span class="icon-bar"></span>
+      <span class="icon-bar"></span>
+      <span class="icon-bar"></span>
+    </button>
+  </div>
+
+  <div class="navbar-collapse collapse" ng-class="!navCollapsed && 'in'">
+    <ul class="nav navbar-nav">
+      <li><a href='./' title="[% l('Home') %]" target="_self"
+        class="glyphicon glyphicon-home"></a><li>
+
+      <!-- search -->
+      <li class="dropdown" uib-dropdown>
+        <a href uib-dropdown-toggle>[% l('Search') %]
+          <b class="caret"></b>
+        </a>
+        <ul uib-dropdown-menu>
+          <li>
+            <a href="./circ/patron/search" target="_self"
+              eg-accesskey="[% l('alt+s') %] [% l('f4') %]" 
+              eg-accesskey-desc="[% l('Patron search by name, address, etc.') %]">
+              <span class="glyphicon glyphicon-user"></span>
+              <span eg-accesskey-label>[% l('Search for Patrons') %]</span>
+            </a>
+          </li>
+          <li>
+            <a href="./cat/item/search" target="_self"
+              eg-accesskey="[% l('f5') %]" 
+              eg-accesskey-desc="[% l('Item Status') %]">
+              <span class="glyphicon glyphicon-barcode"></span>
+              <span>[% l('Search for Items by Barcode') %]</span>
+            </a>
+          </li>
+          <li>
+            <a href="./cat/catalog/index" target="_self"
+              eg-accesskey="[% l('f3') %]" 
+              eg-accesskey-desc="[% l('OPAC') %]">
+              <span class="glyphicon glyphicon-search"></span>
+              <span>[% l('Search the Catalog') %]</span>
+            </a>
+          </li>
+        </ul>
+      </li>
+
+
+      <!-- circulation -->
+      <li class="dropdown" uib-dropdown>
+        <a href uib-dropdown-toggle>[% l('Circulation') %]<b class="caret"></b>
+        </a>
+
+        <ul uib-dropdown-menu>
+          <li ng-if="username">
+            <a href="./circ/patron/bcsearch" target="_self"
+              eg-accesskey="[% l('f1') %]" 
+              eg-accesskey-desc="[% l('Check Out') %]">
+              <span class="glyphicon glyphicon-export"></span>
+              [% l('Check Out') %]
+            </a>
+          </li>
+          <li ng-if="!username">
+            <a href="" ng-click="rs.active_tab('checkout')" target="_self"
+              eg-accesskey="[% l('f1') %]" 
+              eg-accesskey-desc="[% l('Check Out') %]">
+              <span class="glyphicon glyphicon-export"></span>
+              [% l('Check Out') %]
+            </a>
+          </li>
+          <li ng-if="username">
+            <a href="./circ/checkin/checkin" target="_self"
+              eg-accesskey="[% l('f2') %]" 
+              eg-accesskey-desc="[% l('Check In') %]">
+              <span class="glyphicon glyphicon-import"></span>
+              [% l('Check In') %]
+            </a>
+          </li>
+          <li ng-if="!username">
+            <a href="" ng-click="rs.active_tab('checkin')" target="_self"
+              eg-accesskey="[% l('f2') %]" 
+              eg-accesskey-desc="[% l('Check In') %]">
+              <span class="glyphicon glyphicon-import"></span>
+              [% l('Check In') %]
+            </a>
+          </li>
+          <li>
+            <a href="./circ/checkin/capture" target="_self"
+              eg-accesskey="[% l('shift+f2') %]" 
+              eg-accesskey-desc="[% l('Capture Holds') %]">
+              <span class="glyphicon glyphicon-pushpin"></span>
+              [% l('Capture Holds') %]
+            </a>
+          </li>
+          <li>
+            <a href="./circ/holds/pull" target="_self">
+              <span class="glyphicon glyphicon-th-list"></span>
+              [% l('Pull List for Hold Requests') %]
+            </a>
+          </li>
+          <li ng-if="username">
+            <a href="./circ/renew/renew" target="_self"
+              eg-accesskey="[% l('ctrl+f2') %]" 
+              eg-accesskey-desc="[% l('Renew items') %]">
+              <span class="glyphicon glyphicon-refresh"></span>
+              [% l('Renew Items') %]
+            </a>
+          </li>
+          <li ng-if="!username">
+            <a href="" ng-click="rs.active_tab('renew')" target="_self"
+              eg-accesskey="[% l('ctrl+f2') %]" 
+              eg-accesskey-desc="[% l('Renew items') %]">
+              <span class="glyphicon glyphicon-refresh"></span>
+              [% l('Renew Items') %]
+            </a>
+          </li>
+          <li ng-if="username">
+            <a href="./circ/patron/register" target="_self"
+              eg-accesskey="[% l('shift+f1') %]" 
+              eg-accesskey-desc="[% l('Register Patron') %]">
+              <span class="glyphicon glyphicon-user"></span>
+              [% l('Register Patron') %]
+            </a>
+          </li>
+          <li ng-if="!username">
+            <a href="" ng-click="rs.active_tab('register')" target="_self"
+              eg-accesskey="[% l('shift+f1') %]" 
+              eg-accesskey-desc="[% l('Register Patron') %]">
+              <span class="glyphicon glyphicon-user"></span>
+              [% l('Register Patron') %]
+            </a>
+          </li>
+          <li ng-if="showRecentPatron">
+            <a href="./circ/patron/last" target="_self"
+              eg-accesskey="[% l('f8') %]" 
+              eg-accesskey-desc="[% l('Retrieve Last Patron') %]">
+              <span class="glyphicon glyphicon-share-alt"></span>
+              [% l('Retrieve Last Patron') %]
+            </a>
+          </li>
+          <li ng-if="showRecentPatrons">
+            <a href="./circ/patron/search?show_recent=1" target="_self"
+              eg-accesskey-desc="[% l('Retrieve Recent Patrons') %]">
+              <span class="glyphicon glyphicon-share-alt"></span>
+              [% l('Retrieve Recent Patrons') %]
+            </a>
+          </li>
+          <li>
+            <a href="./circ/patron/pending/list" target="_self">
+              <span class="glyphicon glyphicon-thumbs-up"></span>
+              [% l('Pending Patrons') %]
+            </a>
+          </li>
+          <li>
+            <a href="./circ/patron/bucket/view" target="_self">
+              <span class="glyphicon glyphicon-list-alt"></span>
+              [% l('User Buckets') %]
+            </a>
+          </li>
+          <li class="divider"></li>
+          <li>
+            <a href="./circ/patron/credentials" target="_self">
+              <span class="glyphicon glyphicon-ok"></span>
+              <span>[% l('Verify Credentials') %]</span>
+            </a>
+          </li>
+          <li ng-if="username">
+            <a href="./circ/in_house_use/index" target="_self"
+              eg-accesskey="[% l('f6') %]" 
+              eg-accesskey-desc="[% l('Record In-House Use') %]">
+              <span class="glyphicon glyphicon-pencil"></span>
+              <span>[% l('Record In-House Use') %]</span>
+            </a>
+          </li>
+          <li ng-if="!username">
+            <a href="" ng-click="rs.active_tab('in_house_use')" target="_self"
+              eg-accesskey="[% l('f6') %]" 
+              eg-accesskey-desc="[% l('Record In-House Use') %]">
+              <span class="glyphicon glyphicon-pencil"></span>
+              <span>[% l('Record In-House Use') %]</span>
+            </a>
+          </li>
+          <li>
+            <a href="./circ/holds/shelf" target="_self">
+              <span class="glyphicon glyphicon-tasks"></span>
+              <span>[% l('Holds Shelf') %]</span>
+            </a>
+          </li>
+          <li class="divider"></li>
+          <li>
+            <a href="./cat/item/replace_barcode/index" target="_self">
+              <span class="glyphicon glyphicon-barcode"></span>
+              <span>[% l('Replace Barcode') %]</span>
+            </a>
+          </li>
+          <li>
+            <a href="./cat/item/search" target="_self">
+              <span class="glyphicon glyphicon-saved"></span>
+              <span>[% l('Item Status') %]</span>
+            </a>
+          </li>
+          <li>
+            <a href="./cat/item/missing_pieces" target="_self">
+              <span class="glyphicon glyphicon-th"></span>
+              <span>[% l('Scan Item as Missing Pieces') %]</span>
+            </a>
+          </li>
+          <li class="divider"></li>
+          <li>
+            <a href="" ng-click="reprintLast($event)"
+              eg-accesskey="[% l('f9') %]" 
+              eg-accesskey-desc="[% l('Reprint Last Receipt') %]">
+              <span class="glyphicon glyphicon-print"></span>
+              <span>[% l('Reprint Last Receipt') %]</span>
+            </a>
+          </li>
+          <li class="divider"></li>
+          <li ng-class="{disabled : offlineDisabled()}">
+            <a href="./offline-interface" target="_self" ng-class="{disabled : offlineDisabled()}">
+              <span class="glyphicon glyphicon-alert"></span>
+              <span>[% l('Offline Circulation') %]</span>
+            </a>
+          </li>
+        </ul>
+      </li><!-- circ -->
+
+      <!-- cataloging -->
+      <li class="dropdown" uib-dropdown>
+        <a href uib-dropdown-toggle>[% l('Cataloging') %]<b class="caret"></b>
+        </a>
+        <ul uib-dropdown-menu>
+          <li>
+            <a href="./cat/catalog/index" target="_self">
+              <span class="glyphicon glyphicon-search"></span>
+              [% l('Search the Catalog') %]
+            </a>
+          </li>
+          <!--
+            Link to experimental Angular staff catalog.
+          -->
+          <li ng-if="showAngularCatalog">
+            <a href="/eg2/staff/catalog/search">
+              <span class="glyphicon glyphicon-search"></span>
+              <span>[% l('Staff Catalog (Experimental)') %]</span>
+            </a>
+          </li>
+          <li>
+            <a href="./cat/item/search" target="_self">
+              <span class="glyphicon glyphicon-saved"></span>
+              <span>[% l('Item Status') %]</span>
+            </a>
+          </li>
+          <li class="divider"></li>
+          <li>
+            <a href="./cat/bucket/record/view" target="_self">
+              <span class="glyphicon glyphicon-list-alt"></span>
+              [% l('Record Buckets') %]
+            </a>
+          </li>
+          <li>
+            <a href="./cat/bucket/copy/view" target="_self">
+              <span class="glyphicon glyphicon-list-alt"></span>
+              [% l('Item Buckets') %]
+            </a>
+          </li>
+          <li class="divider"></li>
+          <li>
+            <a href="/opac/extras/schedule/" target="_self">
+              <span class="glyphicon glyphicon-object-align-bottom"></span>
+              [% l('Batch schedule') %]
+            </a>
+          </li>
+          <li>
+            <a href="/opac/extras/enrich/" target="_self">
+              <span class="glyphicon glyphicon-object-align-bottom"></span>
+              [% l('Enrich reports') %]
+            </a>
+          </li>
+          <li class="divider"></li>
+          <li>
+            <a href="./cat/catalog/retrieve_by_id" target="_self">
+              <span class="glyphicon glyphicon-file"></span>
+              [% l('Retrieve Bib Record by ID') %]
+            </a>
+          </li>
+          <li>
+            <a href="./cat/catalog/retrieve_by_tcn" target="_self"
+              eg-accesskey="[% l('shift+f3') %]" 
+              eg-accesskey-desc="[% l('Retrieve Last Bib Record') %]">
+              <span class="glyphicon glyphicon-tag"></span>
+              [% l('Retrieve Bib Record by TCN') %]
+            </a>
+          </li>
+          <li>
+            <a href="" ng-click="retrieveLastRecord()" target="_self"
+              eg-accesskey="[% l('shift+f8') %]" 
+              eg-accesskey-desc="[% l('Retrieve Last Bib Record') %]">
+              <span class="glyphicon glyphicon-share-alt"></span>
+              [% l('Retrieve Last Bib Record') %]
+            </a>
+          </li>
+          <li class="divider"></li>
+          <li>
+            <a href="./cat/catalog/new_bib" target="_self">
+              <span class="glyphicon glyphicon-plus"></span>
+              [% l('Create New MARC Record') %]
+            </a>
+          </li>
+          <li>
+            <a href="./cat/z3950/index" target="_self">
+              <span class="glyphicon glyphicon-cloud-download"></span>
+              [% l('Import Record from Z39.50') %]
+            </a>
+          </li>
+          <li>
+            <a href="/eg2/staff/cat/vandelay/import">
+              <span class="glyphicon glyphicon-transfer"></span>
+              [% l('MARC Batch Import/Export') %]
+            </a>
+          </li>
+          <li>
+            <a href="./cat/catalog/batchEdit" target="_self">
+              <span class="glyphicon glyphicon-edit"></span>
+              [% l('MARC Batch Edit') %]
+            </a>
+          </li>
+          <li class="divider"></li>
+          <li>
+            <a href="./cat/catalog/verifyURLs" target="_self">
+              <span class="glyphicon glyphicon-link"></span>
+              [% l('Link Checker') %]
+            </a>
+          </li>
+          <li class="divider"></li>
+          <li>
+            <a href="./cat/catalog/manageAuthorities" target="_self">
+              <span class="glyphicon glyphicon-lock"></span>
+              [% l('Manage Authorities') %]
+            </a>
+          </li>
+          <li>
+            <a href="/eg2/staff/cat/authority/edit" target="_self">
+              <span class="glyphicon glyphicon-file"></span>
+              [% l('Retrieve Authority Record by ID') %]
+            </a>
+          </li>
+       </ul>
+      </li>
+
+      <!-- acquisitions -->
+      <li class="dropdown" uib-dropdown>
+        <a href uib-dropdown-toggle>[% l('Acquisitions') %]<b class="caret"></b>
+        </a>
+        <ul uib-dropdown-menu>
+          <li>
+            <a href="./acq/legacy/search/unified" target="_self">
+              <span class="glyphicon glyphicon-search"></span>
+              [% l('General Search') %]
+            </a>
+          </li>
+          <li class="divider"></li>
+          <li>
+            <a href="./acq/legacy/search/unified?ca=pl" target="_self">
+              <span class="glyphicon glyphicon-list"></span>
+              [% l('My Selection Lists') %]
+            </a>
+          </li>
+          <li>
+            <a href="./acq/legacy/picklist/brief_record" target="_self">
+              <span class="glyphicon glyphicon-pencil"></span>
+              [% l('New Brief Record') %]
+            </a>
+          </li>
+          <li>
+            <a href="./acq/requests/list" target="_self">
+              <span class="glyphicon glyphicon-thumbs-up"></span>
+              [% l('Patron Requests') %]
+            </a>
+          </li>
+          <li>
+            <a href="./acq/legacy/picklist/bib_search" target="_self">
+              <span class="glyphicon glyphicon-cloud-download"></span>
+              [% l('MARC Federated Search') %]
+            </a>
+          </li>
+          <li>
+            <a href="./acq/legacy/picklist/from_bib" target="_self">
+              <span class="glyphicon glyphicon-import"></span>
+              [% l('Load Catalog Record IDs') %]
+            </a>
+          </li>
+          <li class="divider"></li>
+          <li>
+            <a href="./acq/legacy/picklist/upload" target="_self">
+              <span class="glyphicon glyphicon-cloud-upload"></span>
+              [% l('Load MARC Order Records') %]
+            </a>
+          </li>
+          <li>
+            <a href="./acq/legacy/search/unified?ca=po" target="_self">
+              <span class="glyphicon glyphicon-shopping-cart"></span>
+              [% l('Purchase Orders') %]
+            </a>
+          </li>
+          <li>
+            <a href="./acq/legacy/po/create" target="_self">
+              <span class="glyphicon glyphicon-plus"></span>
+              [% l('Create Purchase Order') %]
+            </a>
+          </li>
+          <li class="divider"></li>
+          <li>
+            <a href="./acq/legacy/financial/claim_eligible" target="_self">
+              <span class="glyphicon glyphicon-question-sign"></span>
+              [% l('Claim-Ready Items') %]
+            </a>
+          </li>
+          <li>
+            <a href="./acq/legacy/search/unified?ca=inv" target="_self">
+              <span class="glyphicon glyphicon-usd"></span>
+              [% l('Open Invoices') %]
+            </a>
+          </li>
+          <li>
+            <a href="./acq/legacy/invoice/view?create=1" target="_self">
+              <span class="glyphicon glyphicon-credit-card"></span>
+              [% l('Create Invoice') %]
+            </a>
+          </li>
+       </ul>
+      </li>
+
+      <!-- booking -->
+      <li class="dropdown" uib-dropdown>
+        <a href uib-dropdown-toggle>[% l('Booking') %]<b class="caret"></b>
+        </a>
+        <ul uib-dropdown-menu>
+          <li>
+            <a href="/eg2/staff/booking/create_reservation" target="_self">
+              <span class="glyphicon glyphicon-plus"></span>
+              [% l('Create Reservations') %]
+            </a>
+          </li>
+          <li>
+            <a href="/eg2/staff/booking/pull_list" target="_self">
+              <span class="glyphicon glyphicon-th-list"></span>
+              [% l('Pull List') %]
+            </a>
+          </li>
+          <li>
+            <a href="./booking/legacy/booking/capture" target="_self">
+              <span class="glyphicon glyphicon-pushpin"></span>
+              [% l('Capture Resources') %]
+            </a>
+          </li>
+          <li>
+            <a href="/eg2/staff/booking/pickup" target="_self">
+              <span class="glyphicon glyphicon-export"></span>
+              [% l('Pick Up Reservations') %]
+            </a>
+          </li>
+          <li>
+            <a href="/eg2/staff/booking/return" target="_self">
+              <span class="glyphicon glyphicon-import"></span>
+              [% l('Return Reservations') %]
+            </a>
+          </li>
+          <li>
+            <a href="/eg2/staff/booking/manage_reservations" target="_self">
+              <span class="glyphicon glyphicon-wrench"></span>
+              [% l('Manage Reservations') %]
+            </a>
+          </li>
+        </ul>
+      </li>
+
+      <!-- admin -->
+      <li class="dropdown" uib-dropdown>
+        <a href uib-dropdown-toggle>[% l('Administration') %]<b class="caret"></b></a>
+        <ul uib-dropdown-menu>
+          <li>
+            <a href="./admin/workstation/index" target="_self">
+              <span class="glyphicon glyphicon-hdd"></span>
+              [% l('Workstation') %]
+            </a>
+          </li>
+          <li>
+            <a href="./admin/user_perms" target="_self">
+              <span class="glyphicon glyphicon-user"></span>
+              [% l('User Permission Editor') %]
+            </a>
+          </li>
+          <li>
+            <a href="/eg2/staff/admin/server/splash">
+              <span class="glyphicon glyphicon-briefcase"></span>
+              [% l('Server Administration') %]
+            </a>
+          </li>
+          <li>
+            <a href="/eg2/staff/admin/local/splash">
+              <span class="glyphicon glyphicon-picture"></span>
+              [% l('Local Administration') %]
+            </a>
+          </li>
+          <li>
+            <a href="/eg2/staff/admin/acq/splash">
+              <span class="glyphicon glyphicon-usd"></span>
+              [% l('Acquisitions Administration') %]
+            </a>
+          </li>
+          <li>
+            <a href="./admin/serials/index" target="_self">
+              <span class="glyphicon glyphicon-paperclip"></span>
+              [% l('Serials Administration') %]
+            </a>
+          </li>
+          <li>
+            <a href="/eg2/staff/admin/booking/splash" target="_self">
+              <span class="glyphicon glyphicon-calendar"></span>
+              [% l('Booking Administration') %]
+            </a>
+          </li>
+          <li>
+            <a href="./reporter/legacy/main" target="_self">
+              <span class="glyphicon glyphicon-object-align-bottom"></span>
+              [% l('Reports') %]
+            </a>
+          </li>
+        </ul> <!-- admin dropdown -->
+      </li>
+    </ul> <!-- end left side entries -->
+
+    <!-- entries along the right side of the navbar -->
+    <ul class="nav navbar-nav navbar-right" style='margin-right: 6px;'>
+      <li>
+        <a ng-cloak ng-show="username" title="{{currentToken()}}"
+          ng-init="workstation = '[% l('<no workstation>') %]'">
+            {{username}} @ {{workstation}}
+        </a>
+      </li>
+
+      <!-- locale selector.  
+        only shown if multiple locales are registered -->
+      [% IF ctx.locales.keys.size > 1 %]
+      <li class="dropdown" uib-dropdown>
+        <a href uib-dropdown-toggle>
+          [% lcl = ctx.locale;  ctx.locales.$lcl %]
+          <span class="glyphicon glyphicon-flag"></span>
+        </a>
+        <ul uib-dropdown-menu>
+        [% FOR locale IN ctx.locales.keys.sort %]
+          <!-- disable the selected locale -->
+          <li ng-class="{disabled : '[% ctx.locale %]'=='[% locale %]'}">
+            <a href="" ng-click="applyLocale('[% locale %]')">
+                [% ctx.locales.$locale %]
+            </a>
+          </li>
+        [% END %]
+        </ul>
+      </li>
+      [% END %]
+
+      <li class="dropdown" ng-show="username" uib-dropdown title="Logout and more...">
+        <a href class="glyphicon glyphicon-list" 
+          uib-dropdown-toggle></a>
+        <ul uib-dropdown-menu>
+          <li ng-if="!op_changed">
+            <a href="" ng-click="changeOperator()">
+              <span class="glyphicon glyphicon-random"></span>
+              [% l('Change Operator') %]
+            </a>
+          </li>
+          <li ng-if="op_changed">
+            <a href="" ng-click="changeOperatorUndo()">
+              <span class="glyphicon glyphicon-random"></span>
+              [% l('Restore Operator') %]
+            </a>
+          </li>
+          <li>
+            <a href="./login" ng-click="logout()" target="_self">
+              <span class="glyphicon glyphicon-log-out"></span>
+              [% l('Log Out') %]
+            </a>
+          </li>
+          <li>
+            <a href="./about" target="_self">
+              <span class="glyphicon glyphicon-question-sign"></span>
+              [% l('About') %]
+            </a>
+          </li>
+          <li class="divider"></li>
+          <li class="disabled">
+            <a href disabled="disabled">
+              <span
+                title="[% l('Hatch Connection Status') %]"
+                class="glyphicon glyphicon-transfer"
+                ng-class="{'connect-status-ok' : hatchConnected()}">
+              </span>
+              [% l('Hatch') %]
+            </a>
+          </li>
+        </ul>
+      </li>
+    </ul>
+  </div>
+</div>
+
+
diff --git a/Open-ILS/xul/staff_client/server/index.xhtml b/Open-ILS/xul/staff_client/server/index.xhtml
index 4b42e06be7..0eaf742909 100644
--- a/Open-ILS/xul/staff_client/server/index.xhtml
+++ b/Open-ILS/xul/staff_client/server/index.xhtml
@@ -1,588 +1,611 @@
-<?xml version="1.0" encoding="UTF-8"?>
-
-<!DOCTYPE html PUBLIC
-	"-//W3C//DTD XHTML 1.0 Transitional//EN" 
-	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" [
-	<!--#include virtual="/opac/locale/${locale}/lang.dtd"-->
-]>
-
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-  <meta name="generator" content=
-  "HTML Tidy for Linux/x86 (vers 11 February 2007), see www.w3.org" />
-
-  <title>&staff.client.portal.title;</title>
-  <script type="text/javascript">
-// <![CDATA[
-
-  function get_i18n_str(id) {
-     var e = document.getElementById(id);
-     if (e) return e.textContent;
-     return "Error: i18n string not present: " + id;
-  }
-
-  function SearchOnBlur() {
-        var textbox = document.getElementById("quicksearch");
-
-        if(textbox && textbox.value == "")
-                textbox.style.background = "#FFFFFF url(\"skin/media/images/portal/eg_tiny_logo.jpg\") center no-repeat";
-  }
-
-  function SearchOnFocus() {
-        var textbox = document.getElementById("quicksearch");
-        
-        if(textbox)
-                textbox.style.background = "#FFFFFF";
-  }
-
-  var home_ou_id = 1;
-
-  function SearchOnSubmit() {
-        var textbox = document.getElementById("quicksearch");
-        
-        //var home_ou_id = 1; // 1 = all org units. Should come from staff client scripts
-        // a quicksearch should probably just default to the whole system. Staff can narrow it down later if they want.
-        var search_depth = 0; // 0 = consortium, 1 = system, 2 = library, 3 = sub-library, etc.
-        
-        if(textbox && textbox.value != "") {
-                var opac_url =  xulG.url_prefix('opac_rresult') + "?rt=keyword&tp=keyword&l=" + home_ou_id + "&d=" + search_depth +"&f=&t=" + encodeURIComponent(textbox.value);
-                if (urls.opac_rresult.match(/\/eg\/opac\/results/)) {
-                    opac_url =  xulG.url_prefix('opac_rresult') + "?query=" + encodeURIComponent(textbox.value);
-                }
-                var params = {'tab_name': get_i18n_str('staff.client.portal.catalog.tab_name') };
-                var content_params = { 'session' : ses(), 'authtime' : ses('authtime'), 'opac_url' : opac_url };
-                xulG.set_tab(urls.XUL_OPAC_WRAPPER, params, content_params);
-        }
-        
-        return false;
-  }
-  // ]]> 
-  </script>
-  <script type="text/javascript" src="main/constants.js">
-</script>
-  <script type="text/javascript" src="/opac/common/js/utils.js">
-</script>
-  <script type="text/javascript" src="/opac/common/js/CGI.js">
-</script>
-  <script type="text/javascript" src="/opac/common/js/JSON_v1.js">
-</script>
-  <script type="text/javascript" src="/opac/common/js/md5.js">
-</script>
-  <script type="text/javascript" src="/opac/common/js/fmall.js">
-</script>
-  <script type="text/javascript" src="/opac/common/js/fmgen.js">
-</script>
-  <script type="text/javascript" src="/opac/common/js/RemoteRequest.js">
-</script>
-  <script type="text/javascript" src="/opac/common/js/<!--#echo var='locale'-->/OrgTree.js">
-</script>
-  <script type="text/javascript" src="/opac/common/js/org_utils.js">
-</script>
-  <script type="text/javascript" src="OpenILS/global_util.js">
-</script>
-  <script type="text/javascript" src="OpenILS/event_util.js">
-</script>
-  <script type="text/javascript" src="main/JSAN.js">
-</script>
-  <script type="text/javascript">
-      // <![CDATA[
-
-              function batch_schedule(newtab) {
-                  params = {'tab_name': 'Batch schedule' };
-                  if(newtab)
-                      xulG.new_tab('oils://remote/opac/extras/schedule/', params, {});
-                  else
-                      xulG.set_tab('oils://remote/opac/extras/schedule/', params, {});
-              }
-
-              function batch_enrich(newtab) {
-                  params = {'tab_name': 'Enrich report' };
-                  if(newtab)
-                      xulG.new_tab('oils://remote/opac/extras/enrich/', params, {});
-                  else
-                      xulG.set_tab('oils://remote/opac/extras/enrich/', params, {});
-              }
-
-                //this function will allow for the "Hello, Staff Member" messages
-                function init() { 
-                        document.getElementById('quicksearch').focus();
-                        SearchOnBlur();
-                        JSAN.use('OpenILS.data'); 
-                        var data = new OpenILS.data(); 
-                        data.stash_retrieve(); 
-                        document.getElementById('staffname').innerHTML = ", " + data.list.au[0].first_given_name(); 
-                        home_ou_id = data.list.au[0].ws_ou();
-                        xulG.set_tab_name(get_i18n_str('staff.client.portal.tab_name'));
-                }
-                function jb_open_eg_web_page(path, label) {
-                        var loc = urls.XUL_BROWSER + '?url=' + window.escape(xulG.url_prefix('EG_WEB_BASE') + '/' + path);
-
-                        xulG.set_tab( 
-                                loc, 
-                                {tab_name : label, browser : false }, 
-                                {no_xulG : false, show_print_button : false, show_nav_buttons : true }
-                        );
-                }
-                function jb_open_eg_web_page_newtab(path, label) {
-                        var loc = urls.XUL_BROWSER + '?url=' + window.escape(xulG.url_prefix('EG_WEB_BASE') + '/' + path);
-
-                        xulG.new_tab( 
-                                loc, 
-                                {tab_name : label, browser : false }, 
-                                {no_xulG : false, show_print_button : false, show_nav_buttons : true }
-                        );
-                }
-                
-                //Place your helpdesk link here
-                function helpdesk(newtab) {
-                        xulG.open_external("http://evergreen-ils.org/communicate/");
-                }
-                
-                //A good place for a Google map.  Evergreen Indiana uses GIS data to create a Google map to verify if a library is within district boundaries
-                //http://208.119.72.68/evergreen/evergreenmap.html
-                function address_map(newtab) {
-                        loc = "http://maps.google.com";
-                        var params = {'tab_name':get_i18n_str('staff.client.portal.address_map.tab_name')};
-                        
-                        if(newtab)
-                                xulG.new_tab(loc, params, {}); 
-                        else
-                                xulG.set_tab(loc, params, {}); 
-                }
-                function local_admin(newtab) {
-                        var loc = urls.XUL_REMOTE_BROWSER + '?url=' + window.escape(urls.XUL_LOCAL_ADMIN + '?ses=' + window.escape(ses()) + '&session=' + window.escape(ses())); 
-                        var params = {'tab_name': get_i18n_str('staff.client.portal.local_admin.tab_name') , 'browser' : true };
-                        var content_params = { 'no_xulG' : false, 'show_nav_buttons' : true, 'show_print_button' : true };
-                        
-                        if(newtab)
-                                xulG.new_tab(loc, params, content_params);
-                        else
-                                xulG.set_tab(loc, params, content_params);
-                }
-                function copy_status(newtab) {
-                        if(newtab)
-                                xulG.new_tab(urls.XUL_COPY_STATUS,{},{});
-                        else
-                                xulG.set_tab(urls.XUL_COPY_STATUS,{},{});
-                }
-                function hold_pull_list(newtab) {
-                        var loc = urls.XUL_REMOTE_BROWSER + '?url=' + window.escape(urls.XUL_HOLD_PULL_LIST + '?ses=' + window.escape(ses()));
-                        var params = {'tab_name': get_i18n_str('staff.client.portal.on_shelf_pull_list.tab_name') };
-                        
-                        if(newtab)
-                                xulG.new_tab(loc, params);
-                        else
-                                xulG.set_tab(loc, params);
-                }
-                function checkout(newtab) {
-                        if(newtab)
-                                xulG.new_tab(urls.XUL_PATRON_BARCODE_ENTRY,{},{});
-                        else
-                                xulG.set_tab(urls.XUL_PATRON_BARCODE_ENTRY,{},{});
-                }
-                function catalog(newtab) {
-                        var params = {'tab_name': get_i18n_str('staff.client.portal.catalog.tab_name') };
-                        var content_params = { 'session' : ses(), 'authtime' : ses('authtime') };
-                        
-                        if(newtab)
-                                xulG.new_tab(urls.XUL_OPAC_WRAPPER, params, content_params);
-                        else
-                                xulG.set_tab(urls.XUL_OPAC_WRAPPER, params, content_params);
-                }
-                function z39_50(newtab) {
-                        if(newtab)
-                                xulG.new_tab(urls.XUL_Z3950_IMPORT,{},{});
-                        else
-                                xulG.set_tab(urls.XUL_Z3950_IMPORT,{},{});
-                }
-                function copy_buckets(newtab) {
-                        params = {'tab_name': get_i18n_str('staff.client.portal.copybuckets.tab_name') };
-                        if(newtab)
-                                xulG.new_tab(urls.XUL_COPY_BUCKETS, params, {});
-                        else
-                                xulG.set_tab(urls.XUL_COPY_BUCKETS, params, {});
-                }
-                function record_buckets(newtab) {
-                        params = {'tab_name': get_i18n_str('staff.client.portal.recordbuckets.tab_name') };
-                        if(newtab)
-                                xulG.new_tab(urls.XUL_RECORD_BUCKETS, params, {});
-                        else
-                                xulG.set_tab(urls.XUL_RECORD_BUCKETS, params, {});
-                }
-                function receipt_editor(newtab) {
-                        if(newtab)
-                                xulG.new_tab(urls.XUL_PRINT_LIST_TEMPLATE_EDITOR, {}, {});
-                        else
-                                xulG.set_tab(urls.XUL_PRINT_LIST_TEMPLATE_EDITOR, {}, {});
-                }
-                function checkin(newtab) {
-                        if(newtab)
-                                xulG.new_tab(urls.XUL_CHECKIN,{},{});
-                        else
-                                xulG.set_tab(urls.XUL_CHECKIN,{},{});
-                }
-                function MARC_batch_import(newtab) {
-                	var tabstr = get_i18n_str('staff.client.portal.marcutil.tab_name');
-                        if(newtab)
-                                jb_open_eg_web_page_newtab('vandelay/vandelay', tabstr );
-                        else
-                                jb_open_eg_web_page('vandelay/vandelay', tabstr );
-                }
-                function local_admin_reports(newtab) {
-                        var loc = urls.XUL_BROWSER + '?url=' + window.escape( xulG.url_prefix('XUL_REPORTS') + '?ses=' + ses());
-                        params = {'tab_name' : get_i18n_str('staff.client.portal.reports.tab_name') , 'browser' : false }
-                        content_params = {'no_xulG' : false, 'show_print_button' : false, show_nav_buttons : true }
-                        if(newtab)
-                                xulG.new_tab(loc, params, content_params);
-                        else
-                                xulG.set_tab(loc, params, content_params);
-                }
-                function find_patron(newtab) {
-                        if(newtab)
-                                xulG.new_patron_tab({},{});
-                        else
-                                xulG.set_patron_tab({},{});
-                }
-                
-                function spawn_search(s) {
-                        xulG.new_patron_tab( {}, { 'doit' : 1, 'query' : js2JSON(s) } );
-                }
-                function register_patron(newtab) {
-                        function spawn_editor(p) {
-                                var url = urls.XUL_PATRON_EDIT;
-                                var param_count = 0;
-                                for (var i in p) {
-                                        if (param_count++ == 0) url += '?'; else url += '&amp;';
-                                        url += i + '=' + window.escape(p[i]);
-                                }
-                                var loc = urls.XUL_REMOTE_BROWSER + '?url=' + window.escape( url );
-                                xulG.new_tab(loc, {}, { 'show_print_button' : true , 'tab_name' : get_i18n_str('staff.client.portal.patronreg_edit.tab_name') , 'passthru_content_params' : {'spawn_search' : function(s) { spawn_search(s); }, 'spawn_editor' : spawn_editor }});
-                        }
-                        
-                        var loc = urls.XUL_REMOTE_BROWSER  + '?url=' + window.escape( urls.XUL_PATRON_EDIT + '?ses=' + window.escape( ses() ) );
-                        var content_params = { 
-                                                     'show_print_button' : true , 
-                                                     'tab_name' : get_i18n_str('staff.client.portal.patronreg.tab_name') ,
-                                                     'passthru_content_params' : { 'spawn_search' : function(s) { spawn_search(s); },
-                                                                                    'spawn_editor' : spawn_editor }
-                                                 }
-                        if(newtab)
-                                xulG.new_tab(loc, {}, content_params);
-                        else
-                                xulG.set_tab(loc, {}, content_params);
-                }
-                // ]]>
-  </script>
-  <style type="text/css">
-/*<![CDATA[*/
-  body {
-  font-family: "Trebuchet MS", Helvetica, Verdana, Arial, sans-serif;
-  }
-
-  hr {
-  border-style: solid;
-  border-color: black;
-  width: 180px;
-  }
-
-  #alignment {
-        border-collapse: collapse;
-        border-style: none;
-        width: 100%;
-  }
-
-  #alignment td {
-        vertical-align: top;
-        font-size: 85%;
-	font-weight: bold;
-	color: black;
-	text-decoration: none;
-  }
-
-  .functionlist {
-        border-style: none;
-        margin-left: auto;
-        margin-right: auto;
-        border-collapse:collapse;
-  }
-
-  .functionlist tr.clickable {
-        cursor:pointer;
-  }
-
-  .functionlist tr.clickable:hover {
-        background-color:#e0e0e0;
-  }
-
-  .functionlist td {
-  text-align: left;
-        margin: 2px;
-        padding: 3px;
-  }
-
-  .functionalgroup {
-        text-align: center;
-  }
-
-  a img {
-        border-style: none;
-  }
-
-  .attribution {
-        font-size: 75%;
-  }
-
-  form {
-        margin: 0px;
-        padding: 0px;
-  }
-
-  .newtabimg {
-        float: right;
-        padding-left:4px;
-  }
-
-  .newtabimg:hover {
-        background-color: lightgreen;
-  }
-
-  .funcimg {
-        width: 48px;
-        height: 48px;
-  }
-
-  /*]]>*/
-  </style>
-  <style type="text/css">
-/*<![CDATA[*/
-  body.c4 {margin-top: 0px; padding-top: 0px; background-image: url(skin/media/images/portal/background.png);}
-  td.c3 {border: 1px solid black; border-top: 0px; border-bottom: 0px;}
-  span.c2 {font-size:75%;}
-  div.c1 {text-align: center}
-  /*]]>*/
-  </style>
-</head>
-
-<body class="c4" onload="init();">
-  <div class="c1">
-    <img src="skin/media/images/portal/logo.png" height="121" width="396" alt="Evergreen logo" /><br />
-    &staff.client.portal.welcome;<span id="staffname"></span><br />
-    <br />
-  </div>
-
-  <table id="alignment">
-    <tr>
-      <td>
-        <div class="functionalgroup">
-          &staff.client.portal.circpatron;
-          <hr />
-
-          <table class="functionlist">
-            <tr class="clickable" onclick="try { checkout(false); } catch(E) { alert(E); }">
-              <td height="50"><img src="skin/media/images/portal/forward.png" height="48" width="48"
-              alt="&staff.client.portal.checkout.description;" /></td>
-
-              <td><img class="newtabimg" src="skin/media/images/portal/newtab2.PNG" alt="&staff.client.portal.open_new_tab.description;"
-              title="&staff.client.portal.open_new_tab.description;"
-              onclick="try { checkout(true); } catch(E) { alert(E); }" /> &staff.client.portal.checkout;<br />
-              <span class="c2">&staff.client.portal.retrievebc;</span></td>
-            </tr>
-
-            <tr class="clickable" onclick="try { checkin(false); } catch(E) { alert(E); }">
-              <td height="50"><img src="skin/media/images/portal/back.png" height="48" width="48"
-	      alt="&staff.client.portal.checkin.description;" /></td>
-
-              <td><img class="newtabimg" src="skin/media/images/portal/newtab2.PNG" alt="&staff.client.portal.open_new_tab.description;"
-              title="&staff.client.portal.open_new_tab.description;"
-              onclick="try { checkin(true); } catch(E) { alert(E); }" />&staff.client.portal.checkin;<br /></td>
-            </tr>
-
-            <tr class="clickable" onclick="try { register_patron(false); } catch(E) { alert(E); }">
-              <td height="50"><img src="skin/media/images/portal/registerpatron.png" height="48" width="48"
-              alt="&staff.client.portal.patronreg.description;" /></td>
-
-              <td><img class="newtabimg" src="skin/media/images/portal/newtab2.PNG" alt="&staff.client.portal.open_new_tab.description;"
-              title="&staff.client.portal.open_new_tab.description;"
-              onclick="try { register_patron(true); } catch(E) { alert(E); }" /> &staff.client.portal.patronreg;</td>
-            </tr>
-
-            <tr class="clickable" onclick="try { find_patron(false); } catch(E) { alert(E); }">
-              <td height="50"><img src="skin/media/images/portal/retreivepatron.png" height="48" width="48"
-              alt="&staff.client.portal.patronsearch.description;" /></td>
-
-              <td><img class="newtabimg" src="skin/media/images/portal/newtab2.PNG" alt="&staff.client.portal.open_new_tab.description;"
-              title="&staff.client.portal.open_new_tab.description;"
-              onclick="try { find_patron(true); } catch(E) { alert(E); }" /> &staff.client.portal.patronsearch;</td>
-            </tr>
-
-            <tr class="clickable" onclick="try { hold_pull_list(false); } catch(E) { alert(E); }">
-              <td height="50"><img class="funcimg" src="skin/media/images/portal/holds.png" height="48" width="48"
-              alt="&staff.client.portal.holdlist.description;" /></td>
-
-              <td><img class="newtabimg" src="skin/media/images/portal/newtab2.PNG" alt="&staff.client.portal.open_new_tab.description;"
-              title="&staff.client.portal.open_new_tab.description;"
-              onclick="try { hold_pull_list(true); } catch(E) { alert(E); }" /> &staff.client.portal.holdlist;</td>
-            </tr>
 <!--
-            <tr class="clickable" onclick="try { address_map(false); } catch(E) { alert(E); }">
-              <td height="50"><img src="skin/media/images/portal/map.PNG" alt="Locate Address In Map"
-              onclick="try { address_map(false); } catch(E) { alert(E); }" /></td>
-
-              <td><img class="newtabimg" src="skin/media/images/portal/newtab2.PNG" alt="&staff.client.portal.open_new_tab.description;"
-              title="&staff.client.portal.open_new_tab.description;"
-              onclick="try { address_map(true); } catch(E) { alert(E); }" /> <a href="#"
-              onclick=
-              "try { address_map(false); } catch(E) { alert(E); }; return false;">&staff.client.portal.addrmap;</a></td>
-            </tr>
--->
-          </table>
-        </div>
-      </td>
-
-      <td class="c3">
-        <div class="functionalgroup">
-          &staff.client.portal.itemcataloging;
-          <hr />
-
-          <table class="functionlist">
-            <tr>
-              <td colspan="2" rowspan="1">
-                <form action="#" onsubmit="return SearchOnSubmit();">
-                  <input id="quicksearch" onfocus="SearchOnFocus();" onblur=
-                  "SearchOnBlur();" onkeydown="SearchOnFocus();" /> <input value="&staff.client.portal.search.button;" type="submit" />
-                </form>
-              </td>
-            </tr>
-
-            <tr class="clickable" onclick="try { catalog(false); } catch(E) { alert(E); }">
-              <td height="50"><img src="skin/media/images/portal/book.png" height="48" width="48"
-	      alt="&staff.client.portal.advsearch.description;" /></td>
-
-              <td><img class="newtabimg" src="skin/media/images/portal/newtab2.PNG" alt="&staff.client.portal.open_new_tab.description;"
-              title="&staff.client.portal.open_new_tab.description;"
-              onclick="try { catalog(true); } catch(E) { alert(E); }" /> &staff.client.portal.advsearch;</td>
-            </tr>
-
-            <tr class="clickable" onclick="try { copy_status(false); } catch(E) { alert(E); }">
-              <td height="50"><img src="skin/media/images/portal/book.png" height="48" width="48" 
-	      alt="&staff.client.portal.itemstatus.description;" /></td>
-
-              <td><img class="newtabimg" src="skin/media/images/portal/newtab2.PNG" alt="&staff.client.portal.open_new_tab.description;"
-              title="&staff.client.portal.open_new_tab.description;"
-              onclick="try { copy_status(true); } catch(E) { alert(E); }" /> &staff.client.portal.itemstatus;</td>
-            </tr>
-
-            <tr class="clickable" onclick="try { MARC_batch_import(false); } catch(E) { alert(E); }">
-              <td height="50"><img src="skin/media/images/portal/batchimport.png" height="48" width="48"
-              alt="&staff.client.portal.marcutil.description;" /></td>
-
-              <td><img class="newtabimg" src="skin/media/images/portal/newtab2.PNG" alt="&staff.client.portal.open_new_tab.description;"
-              title="&staff.client.portal.open_new_tab.description;"
-              onclick="try { MARC_batch_import(true); } catch(E) { alert(E); }" /> &staff.client.portal.marcutil;</td>
-            </tr>
-
-            <tr class="clickable" onclick="try { z39_50(false); } catch(E) { alert(E); }">
-              <td height="50"><img src="skin/media/images/portal/z3950.png" height="48" width="48"
-	      alt="&staff.client.portal.z3950.description;" /></td>
+  main navigation bar
 
-              <td><img class="newtabimg" src="skin/media/images/portal/newtab2.PNG" alt="&staff.client.portal.open_new_tab.description;"
-              title="&staff.client.portal.open_new_tab.description;"
-              onclick="try { z39_50(true); } catch(E) { alert(E); }" /> &staff.client.portal.z3950;</td>
-            </tr>
+  note the use of target="_self" for navigation links.
+  this tells angular to treat the href as a new page
+  and not an intra-app route.  This is necessary when
+  moving between applications.
 
-            <tr class="clickable" onclick="try { copy_buckets(false); } catch(E) { alert(E); }">
-              <td height="50"><img src="skin/media/images/portal/bucket.png" height="48" width="48" 
-	      alt="&staff.client.portal.copybuckets.description;" /></td>
-
-              <td><img class="newtabimg" src="skin/media/images/portal/newtab2.PNG" alt="&staff.client.portal.open_new_tab.description;"
-              title="&staff.client.portal.open_new_tab.description;"
-              onclick="try { copy_buckets(true); } catch(E) { alert(E); }" /> &staff.client.portal.copybuckets;</td>
-            </tr>
-
-            <tr class="clickable" onclick="try { record_buckets(false); } catch(E) { alert(E); }">
-              <td height="50"><img src="skin/media/images/portal/bucket.png" height="48" width="48"
-	      alt="&staff.client.portal.recordbuckets.description;" /></td>
-
-              <td><img class="newtabimg" src="skin/media/images/portal/newtab2.PNG" alt="&staff.client.portal.open_new_tab.description;"
-              title="&staff.client.portal.open_new_tab.description;"
-              onclick="try { record_buckets(true); } catch(E) { alert(E); }" /> &staff.client.portal.recordbuckets;</td>
-            </tr>
-
-              <tr class="clickable" onclick="try { batch_schedule(false); } catch(E) { alert(E); }">
-              <td height="50"><img src="skin/media/images/portal/bucket.png" height="48" width="48"
-	      alt="batch schedule" /></td>
-
-              <td><img class="newtabimg" src="skin/media/images/portal/newtab2.PNG" alt="batch schedule"
-              title="batch schedule"
-              onclick="try { batch_schedule(true); } catch(E) { alert(E); }" /> Batch schedule</td>
-            </tr>
-
-              <tr class="clickable" onclick="try { batch_enrich(false); } catch(E) { alert(E); }">
-              <td height="50"><img src="skin/media/images/portal/bucket.png" height="48" width="48"
-	      alt="enrich report" /></td>
-
-              <td><img class="newtabimg" src="skin/media/images/portal/newtab2.PNG" alt="enrich report"
-              title="batch schedule"
-              onclick="try { batch_enrich(true); } catch(E) { alert(E); }" /> Enrich report</td>
-            </tr>
-          </table><br />
-        </div>
-      </td>
-
-      <td>
-        <div class="functionalgroup">
-          &staff.client.portal.admin;
-          <hr />
-
-          <table class="functionlist">
-            <tr class="clickable" onclick="try { helpdesk(false); } catch(E) { alert(E); }">
-              <td height="50"><img src="skin/media/images/portal/helpdesk.png" height="48" width="48"
-              alt="&staff.client.portal.helpdesk.description;" /></td>
-
-              <td>&staff.client.portal.helpdesk;</td>
-            </tr>
-
-            <tr class="clickable" onclick="try { local_admin_reports(false); } catch(E) { alert(E); }">
-              <td height="50"><img src="skin/media/images/portal/reports.png" height="48" width="48"
-              alt="&staff.client.portal.reports.description;" /></td>
-
-              <td><img class="newtabimg" src="skin/media/images/portal/newtab2.PNG" alt="&staff.client.portal.open_new_tab.description;"
-              title="&staff.client.portal.open_new_tab.description;"
-              onclick="try { local_admin_reports(true); } catch(E) { alert(E); }" /> &staff.client.portal.reports;</td>
-            </tr>
-
-            <tr class="clickable" onclick="try { receipt_editor(false); } catch(E) { alert(E); }">
-              <td height="50"><img src="skin/media/images/portal/receipt_editor.png" height="48" width="48"
-	      alt="&staff.client.portal.receipts.description;" /></td>
-
-              <td><img class="newtabimg" src="skin/media/images/portal/newtab2.PNG" alt="&staff.client.portal.open_new_tab.description;"
-              title="&staff.client.portal.open_new_tab.description;"
-              onclick="try { receipt_editor(true); } catch(E) { alert(E); }" /> &staff.client.portal.receipts;</td>
-            </tr>
-          </table>
-        </div>
-      </td>
-    </tr>
-  </table>
+  For icons, see http://getbootstrap.com/components/#glyphicons
+-->
 
-  <div class="attribution c1">&staff.client.portal.copyright;<br />
-  &staff.client.portal.poweredby; <img src="skin/media/images/portal/eg_tiny_logo.jpg" alt="Evergreen logo" /></div>
+<div id="top-navbar" role="navigation"
+     class="navbar navbar-default navbar-fixed-top" role="navigation">
+
+  <!-- navbar-header here needed for supporting angular-ui-bootstrap -->
+  <div class="navbar-header">
+    <button type="button" class="navbar-toggle"
+            ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed">
+      <span class="sr-only">[% l('Toggle navigation') %]</span>
+      <span class="icon-bar"></span>
+      <span class="icon-bar"></span>
+      <span class="icon-bar"></span>
+    </button>
+  </div>
 
-<div style="display:none">
-  <span id="staff.client.portal.catalog.tab_name">&staff.client.portal.catalog.tab_name;</span>
-  <span id="staff.client.portal.tab_name">&staff.client.portal.tab_name;</span>
-  <span id="staff.client.portal.address_map.tab_name">&staff.client.portal.address_map.tab_name;</span>
-  <span id="staff.client.portal.local_admin.tab_name">&staff.client.portal.local_admin.tab_name;</span>
-  <span id="staff.client.portal.on_shelf_pull_list.tab_name">&staff.client.portal.on_shelf_pull_list.tab_name;</span>
-  <span id="staff.client.portal.catalog.tab_name">&staff.client.portal.catalog.tab_name;</span>
-  <span id="staff.client.portal.copybuckets.tab_name">&staff.client.portal.copybuckets.tab_name;</span>
-  <span id="staff.client.portal.recordbuckets.tab_name">&staff.client.portal.recordbuckets.tab_name;</span>
-  <span id="staff.client.portal.marcutil.tab_name">&staff.client.portal.marcutil.tab_name;</span>
-  <span id="staff.client.portal.reports.tab_name">&staff.client.portal.reports.tab_name;</span>
-  <span id="staff.client.portal.patronreg_edit.tab_name">&staff.client.portal.patronreg_edit.tab_name;</span>
-  <span id="staff.client.portal.patronreg.tab_name">&staff.client.portal.patronreg.tab_name;</span>
+  <div class="navbar-collapse collapse" ng-class="!navCollapsed && 'in'">
+    <ul class="nav navbar-nav">
+      <li><a href='./' title="[% l('Home') %]" target="_self"
+             class="glyphicon glyphicon-home"></a><li>
+
+      <!-- search -->
+      <li class="dropdown" uib-dropdown>
+        <a href uib-dropdown-toggle>[% l('Search') %]
+          <b class="caret"></b>
+        </a>
+        <ul uib-dropdown-menu>
+          <li>
+            <a href="./circ/patron/search" target="_self"
+               eg-accesskey="[% l('alt+s') %] [% l('f4') %]"
+               eg-accesskey-desc="[% l('Patron search by name, address, etc.') %]">
+              <span class="glyphicon glyphicon-user"></span>
+              <span eg-accesskey-label>[% l('Search for Patrons') %]</span>
+            </a>
+          </li>
+          <li>
+            <a href="./cat/item/search" target="_self"
+               eg-accesskey="[% l('f5') %]"
+               eg-accesskey-desc="[% l('Item Status') %]">
+              <span class="glyphicon glyphicon-barcode"></span>
+              <span>[% l('Search for Items by Barcode') %]</span>
+            </a>
+          </li>
+          <li>
+            <a href="./cat/catalog/index" target="_self"
+               eg-accesskey="[% l('f3') %]"
+               eg-accesskey-desc="[% l('OPAC') %]">
+              <span class="glyphicon glyphicon-search"></span>
+              <span>[% l('Search the Catalog') %]</span>
+            </a>
+          </li>
+        </ul>
+      </li>
+
+
+      <!-- circulation -->
+      <li class="dropdown" uib-dropdown>
+        <a href uib-dropdown-toggle>[% l('Circulation') %]<b class="caret"></b>
+        </a>
+
+        <ul uib-dropdown-menu>
+          <li ng-if="username">
+            <a href="./circ/patron/bcsearch" target="_self"
+               eg-accesskey="[% l('f1') %]"
+               eg-accesskey-desc="[% l('Check Out') %]">
+              <span class="glyphicon glyphicon-export"></span>
+              [% l('Check Out') %]
+            </a>
+          </li>
+          <li ng-if="!username">
+            <a href="" ng-click="rs.active_tab('checkout')" target="_self"
+               eg-accesskey="[% l('f1') %]"
+               eg-accesskey-desc="[% l('Check Out') %]">
+              <span class="glyphicon glyphicon-export"></span>
+              [% l('Check Out') %]
+            </a>
+          </li>
+          <li ng-if="username">
+            <a href="./circ/checkin/checkin" target="_self"
+               eg-accesskey="[% l('f2') %]"
+               eg-accesskey-desc="[% l('Check In') %]">
+              <span class="glyphicon glyphicon-import"></span>
+              [% l('Check In') %]
+            </a>
+          </li>
+          <li ng-if="!username">
+            <a href="" ng-click="rs.active_tab('checkin')" target="_self"
+               eg-accesskey="[% l('f2') %]"
+               eg-accesskey-desc="[% l('Check In') %]">
+              <span class="glyphicon glyphicon-import"></span>
+              [% l('Check In') %]
+            </a>
+          </li>
+          <li>
+            <a href="./circ/checkin/capture" target="_self"
+               eg-accesskey="[% l('shift+f2') %]"
+               eg-accesskey-desc="[% l('Capture Holds') %]">
+              <span class="glyphicon glyphicon-pushpin"></span>
+              [% l('Capture Holds') %]
+            </a>
+          </li>
+          <li>
+            <a href="./circ/holds/pull" target="_self">
+              <span class="glyphicon glyphicon-th-list"></span>
+              [% l('Pull List for Hold Requests') %]
+            </a>
+          </li>
+          <li ng-if="username">
+            <a href="./circ/renew/renew" target="_self"
+               eg-accesskey="[% l('ctrl+f2') %]"
+               eg-accesskey-desc="[% l('Renew items') %]">
+              <span class="glyphicon glyphicon-refresh"></span>
+              [% l('Renew Items') %]
+            </a>
+          </li>
+          <li ng-if="!username">
+            <a href="" ng-click="rs.active_tab('renew')" target="_self"
+               eg-accesskey="[% l('ctrl+f2') %]"
+               eg-accesskey-desc="[% l('Renew items') %]">
+              <span class="glyphicon glyphicon-refresh"></span>
+              [% l('Renew Items') %]
+            </a>
+          </li>
+          <li ng-if="username">
+            <a href="./circ/patron/register" target="_self"
+               eg-accesskey="[% l('shift+f1') %]"
+               eg-accesskey-desc="[% l('Register Patron') %]">
+              <span class="glyphicon glyphicon-user"></span>
+              [% l('Register Patron') %]
+            </a>
+          </li>
+          <li ng-if="!username">
+            <a href="" ng-click="rs.active_tab('register')" target="_self"
+               eg-accesskey="[% l('shift+f1') %]"
+               eg-accesskey-desc="[% l('Register Patron') %]">
+              <span class="glyphicon glyphicon-user"></span>
+              [% l('Register Patron') %]
+            </a>
+          </li>
+          <li ng-if="showRecentPatron">
+            <a href="./circ/patron/last" target="_self"
+               eg-accesskey="[% l('f8') %]"
+               eg-accesskey-desc="[% l('Retrieve Last Patron') %]">
+              <span class="glyphicon glyphicon-share-alt"></span>
+              [% l('Retrieve Last Patron') %]
+            </a>
+          </li>
+          <li ng-if="showRecentPatrons">
+            <a href="./circ/patron/search?show_recent=1" target="_self"
+               eg-accesskey-desc="[% l('Retrieve Recent Patrons') %]">
+              <span class="glyphicon glyphicon-share-alt"></span>
+              [% l('Retrieve Recent Patrons') %]
+            </a>
+          </li>
+          <li>
+            <a href="./circ/patron/pending/list" target="_self">
+              <span class="glyphicon glyphicon-thumbs-up"></span>
+              [% l('Pending Patrons') %]
+            </a>
+          </li>
+          <li>
+            <a href="./circ/patron/bucket/view" target="_self">
+              <span class="glyphicon glyphicon-list-alt"></span>
+              [% l('User Buckets') %]
+            </a>
+          </li>
+          <li class="divider"></li>
+          <li>
+            <a href="./circ/patron/credentials" target="_self">
+              <span class="glyphicon glyphicon-ok"></span>
+              <span>[% l('Verify Credentials') %]</span>
+            </a>
+          </li>
+          <li ng-if="username">
+            <a href="./circ/in_house_use/index" target="_self"
+               eg-accesskey="[% l('f6') %]"
+               eg-accesskey-desc="[% l('Record In-House Use') %]">
+              <span class="glyphicon glyphicon-pencil"></span>
+              <span>[% l('Record In-House Use') %]</span>
+            </a>
+          </li>
+          <li ng-if="!username">
+            <a href="" ng-click="rs.active_tab('in_house_use')" target="_self"
+               eg-accesskey="[% l('f6') %]"
+               eg-accesskey-desc="[% l('Record In-House Use') %]">
+              <span class="glyphicon glyphicon-pencil"></span>
+              <span>[% l('Record In-House Use') %]</span>
+            </a>
+          </li>
+          <li>
+            <a href="./circ/holds/shelf" target="_self">
+              <span class="glyphicon glyphicon-tasks"></span>
+              <span>[% l('Holds Shelf') %]</span>
+            </a>
+          </li>
+          <li class="divider"></li>
+          <li>
+            <a href="./cat/item/replace_barcode/index" target="_self">
+              <span class="glyphicon glyphicon-barcode"></span>
+              <span>[% l('Replace Barcode') %]</span>
+            </a>
+          </li>
+          <li>
+            <a href="./cat/item/search" target="_self">
+              <span class="glyphicon glyphicon-saved"></span>
+              <span>[% l('Item Status') %]</span>
+            </a>
+          </li>
+          <li>
+            <a href="./cat/item/missing_pieces" target="_self">
+              <span class="glyphicon glyphicon-th"></span>
+              <span>[% l('Scan Item as Missing Pieces') %]</span>
+            </a>
+          </li>
+          <li class="divider"></li>
+          <li>
+            <a href="" ng-click="reprintLast($event)"
+               eg-accesskey="[% l('f9') %]"
+               eg-accesskey-desc="[% l('Reprint Last Receipt') %]">
+              <span class="glyphicon glyphicon-print"></span>
+              <span>[% l('Reprint Last Receipt') %]</span>
+            </a>
+          </li>
+          <li class="divider"></li>
+          <li ng-class="{disabled : offlineDisabled()}">
+            <a href="./offline-interface" target="_self" ng-class="{disabled : offlineDisabled()}">
+              <span class="glyphicon glyphicon-alert"></span>
+              <span>[% l('Offline Circulation') %]</span>
+            </a>
+          </li>
+        </ul>
+      </li><!-- circ -->
+
+      <!-- cataloging -->
+      <li class="dropdown" uib-dropdown>
+        <a href uib-dropdown-toggle>[% l('Cataloging') %]<b class="caret"></b>
+        </a>
+        <ul uib-dropdown-menu>
+          <li>
+            <a href="./cat/catalog/index" target="_self">
+              <span class="glyphicon glyphicon-search"></span>
+              [% l('Search the Catalog') %]
+            </a>
+          </li>
+          <!--
+            Link to experimental Angular staff catalog.
+          -->
+          <li ng-if="showAngularCatalog">
+            <a href="/eg2/staff/catalog/search">
+              <span class="glyphicon glyphicon-search"></span>
+              <span>[% l('Staff Catalog (Experimental)') %]</span>
+            </a>
+          </li>
+          <li>
+            <a href="./cat/item/search" target="_self">
+              <span class="glyphicon glyphicon-saved"></span>
+              <span>[% l('Item Status') %]</span>
+            </a>
+          </li>
+          <li class="divider"></li>
+          <li>
+            <a href="./cat/bucket/record/view" target="_self">
+              <span class="glyphicon glyphicon-list-alt"></span>
+              [% l('Record Buckets') %]
+            </a>
+          </li>
+          <li>
+            <a href="./cat/bucket/copy/view" target="_self">
+              <span class="glyphicon glyphicon-list-alt"></span>
+              [% l('Item Buckets') %]
+            </a>
+          </li>
+          <li class="divider"></li>
+          <li>
+            <a href="./cat/catalog/retrieve_by_id" target="_self">
+              <span class="glyphicon glyphicon-file"></span>
+              [% l('Retrieve Bib Record by ID') %]
+            </a>
+          </li>
+          <li>
+            <a href="./cat/catalog/retrieve_by_tcn" target="_self"
+               eg-accesskey="[% l('shift+f3') %]"
+               eg-accesskey-desc="[% l('Retrieve Last Bib Record') %]">
+              <span class="glyphicon glyphicon-tag"></span>
+              [% l('Retrieve Bib Record by TCN') %]
+            </a>
+          </li>
+          <li>
+            <a href="" ng-click="retrieveLastRecord()" target="_self"
+               eg-accesskey="[% l('shift+f8') %]"
+               eg-accesskey-desc="[% l('Retrieve Last Bib Record') %]">
+              <span class="glyphicon glyphicon-share-alt"></span>
+              [% l('Retrieve Last Bib Record') %]
+            </a>
+          </li>
+          <li class="divider"></li>
+          <li>
+            <a href="./cat/catalog/new_bib" target="_self">
+              <span class="glyphicon glyphicon-plus"></span>
+              [% l('Create New MARC Record') %]
+            </a>
+          </li>
+          <li>
+            <a href="./cat/z3950/index" target="_self">
+              <span class="glyphicon glyphicon-cloud-download"></span>
+              [% l('Import Record from Z39.50') %]
+            </a>
+          </li>
+          <li>
+            <a href="/eg2/staff/cat/vandelay/import">
+              <span class="glyphicon glyphicon-transfer"></span>
+              [% l('MARC Batch Import/Export') %]
+            </a>
+          </li>
+          <li>
+            <a href="./cat/catalog/batchEdit" target="_self">
+              <span class="glyphicon glyphicon-edit"></span>
+              [% l('MARC Batch Edit') %]
+            </a>
+          </li>
+          <li class="divider"></li>
+          <li>
+            <a href="./cat/catalog/verifyURLs" target="_self">
+              <span class="glyphicon glyphicon-link"></span>
+              [% l('Link Checker') %]
+            </a>
+          </li>
+          <li class="divider"></li>
+          <li>
+            <a href="./cat/catalog/manageAuthorities" target="_self">
+              <span class="glyphicon glyphicon-lock"></span>
+              [% l('Manage Authorities') %]
+            </a>
+          </li>
+          <li>
+            <a href="/eg2/staff/cat/authority/edit" target="_self">
+              <span class="glyphicon glyphicon-file"></span>
+              [% l('Retrieve Authority Record by ID') %]
+            </a>
+          </li>
+        </ul>
+      </li>
+
+      <!-- acquisitions -->
+      <li class="dropdown" uib-dropdown>
+        <a href uib-dropdown-toggle>[% l('Acquisitions') %]<b class="caret"></b>
+        </a>
+        <ul uib-dropdown-menu>
+          <li>
+            <a href="./acq/legacy/search/unified" target="_self">
+              <span class="glyphicon glyphicon-search"></span>
+              [% l('General Search') %]
+            </a>
+          </li>
+          <li class="divider"></li>
+          <li>
+            <a href="./acq/legacy/search/unified?ca=pl" target="_self">
+              <span class="glyphicon glyphicon-list"></span>
+              [% l('My Selection Lists') %]
+            </a>
+          </li>
+          <li>
+            <a href="./acq/legacy/picklist/brief_record" target="_self">
+              <span class="glyphicon glyphicon-pencil"></span>
+              [% l('New Brief Record') %]
+            </a>
+          </li>
+          <li>
+            <a href="./acq/requests/list" target="_self">
+              <span class="glyphicon glyphicon-thumbs-up"></span>
+              [% l('Patron Requests') %]
+            </a>
+          </li>
+          <li>
+            <a href="./acq/legacy/picklist/bib_search" target="_self">
+              <span class="glyphicon glyphicon-cloud-download"></span>
+              [% l('MARC Federated Search') %]
+            </a>
+          </li>
+          <li>
+            <a href="./acq/legacy/picklist/from_bib" target="_self">
+              <span class="glyphicon glyphicon-import"></span>
+              [% l('Load Catalog Record IDs') %]
+            </a>
+          </li>
+          <li class="divider"></li>
+          <li>
+            <a href="./acq/legacy/picklist/upload" target="_self">
+              <span class="glyphicon glyphicon-cloud-upload"></span>
+              [% l('Load MARC Order Records') %]
+            </a>
+          </li>
+          <li>
+            <a href="./acq/legacy/search/unified?ca=po" target="_self">
+              <span class="glyphicon glyphicon-shopping-cart"></span>
+              [% l('Purchase Orders') %]
+            </a>
+          </li>
+          <li>
+            <a href="./acq/legacy/po/create" target="_self">
+              <span class="glyphicon glyphicon-plus"></span>
+              [% l('Create Purchase Order') %]
+            </a>
+          </li>
+          <li class="divider"></li>
+          <li>
+            <a href="./acq/legacy/financial/claim_eligible" target="_self">
+              <span class="glyphicon glyphicon-question-sign"></span>
+              [% l('Claim-Ready Items') %]
+            </a>
+          </li>
+          <li>
+            <a href="./acq/legacy/search/unified?ca=inv" target="_self">
+              <span class="glyphicon glyphicon-usd"></span>
+              [% l('Open Invoices') %]
+            </a>
+          </li>
+          <li>
+            <a href="./acq/legacy/invoice/view?create=1" target="_self">
+              <span class="glyphicon glyphicon-credit-card"></span>
+              [% l('Create Invoice') %]
+            </a>
+          </li>
+        </ul>
+      </li>
+
+      <!-- booking -->
+      <li class="dropdown" uib-dropdown>
+        <a href uib-dropdown-toggle>[% l('Booking') %]<b class="caret"></b>
+        </a>
+        <ul uib-dropdown-menu>
+          <li>
+            <a href="/eg2/staff/booking/create_reservation" target="_self">
+              <span class="glyphicon glyphicon-plus"></span>
+              [% l('Create Reservations') %]
+            </a>
+          </li>
+          <li>
+            <a href="/eg2/staff/booking/pull_list" target="_self">
+              <span class="glyphicon glyphicon-th-list"></span>
+              [% l('Pull List') %]
+            </a>
+          </li>
+          <li>
+            <a href="./booking/legacy/booking/capture" target="_self">
+              <span class="glyphicon glyphicon-pushpin"></span>
+              [% l('Capture Resources') %]
+            </a>
+          </li>
+          <li>
+            <a href="/eg2/staff/booking/pickup" target="_self">
+              <span class="glyphicon glyphicon-export"></span>
+              [% l('Pick Up Reservations') %]
+            </a>
+          </li>
+          <li>
+            <a href="/eg2/staff/booking/return" target="_self">
+              <span class="glyphicon glyphicon-import"></span>
+              [% l('Return Reservations') %]
+            </a>
+          </li>
+          <li>
+            <a href="/eg2/staff/booking/manage_reservations" target="_self">
+              <span class="glyphicon glyphicon-wrench"></span>
+              [% l('Manage Reservations') %]
+            </a>
+          </li>
+        </ul>
+      </li>
+
+      <!-- admin -->
+      <li class="dropdown" uib-dropdown>
+        <a href uib-dropdown-toggle>[% l('Administration') %]<b class="caret"></b></a>
+        <ul uib-dropdown-menu>
+          <li>
+            <a href="./admin/workstation/index" target="_self">
+              <span class="glyphicon glyphicon-hdd"></span>
+              [% l('Workstation') %]
+            </a>
+          </li>
+          <li>
+            <a href="./admin/user_perms" target="_self">
+              <span class="glyphicon glyphicon-user"></span>
+              [% l('User Permission Editor') %]
+            </a>
+          </li>
+          <li>
+            <a href="/eg2/staff/admin/server/splash">
+              <span class="glyphicon glyphicon-briefcase"></span>
+              [% l('Server Administration') %]
+            </a>
+          </li>
+          <li>
+            <a href="/eg2/staff/admin/local/splash">
+              <span class="glyphicon glyphicon-picture"></span>
+              [% l('Local Administration') %]
+            </a>
+          </li>
+          <li>
+            <a href="/eg2/staff/admin/acq/splash">
+              <span class="glyphicon glyphicon-usd"></span>
+              [% l('Acquisitions Administration') %]
+            </a>
+          </li>
+          <li>
+            <a href="./admin/serials/index" target="_self">
+              <span class="glyphicon glyphicon-paperclip"></span>
+              [% l('Serials Administration') %]
+            </a>
+          </li>
+          <li>
+            <a href="/eg2/staff/admin/booking/splash" target="_self">
+              <span class="glyphicon glyphicon-calendar"></span>
+              [% l('Booking Administration') %]
+            </a>
+          </li>
+          <li>
+            <a href="./reporter/legacy/main" target="_self">
+              <span class="glyphicon glyphicon-object-align-bottom"></span>
+              [% l('Reports') %]
+            </a>
+          </li>
+        </ul> <!-- admin dropdown -->
+      </li>
+    </ul> <!-- end left side entries -->
+
+    <!-- entries along the right side of the navbar -->
+    <ul class="nav navbar-nav navbar-right" style='margin-right: 6px;'>
+      <li>
+        <a ng-cloak ng-show="username" title="{{currentToken()}}"
+           ng-init="workstation = '[% l('<no workstation>') %]'">
+          {{username}} @ {{workstation}}
+        </a>
+      </li>
+
+      <!-- locale selector.
+        only shown if multiple locales are registered -->
+      [% IF ctx.locales.keys.size > 1 %]
+      <li class="dropdown" uib-dropdown>
+        <a href uib-dropdown-toggle>
+          [% lcl = ctx.locale;  ctx.locales.$lcl %]
+          <span class="glyphicon glyphicon-flag"></span>
+        </a>
+        <ul uib-dropdown-menu>
+          [% FOR locale IN ctx.locales.keys.sort %]
+          <!-- disable the selected locale -->
+          <li ng-class="{disabled : '[% ctx.locale %]'=='[% locale %]'}">
+            <a href="" ng-click="applyLocale('[% locale %]')">
+              [% ctx.locales.$locale %]
+            </a>
+          </li>
+          [% END %]
+        </ul>
+      </li>
+      [% END %]
+
+      <li class="dropdown" ng-show="username" uib-dropdown title="Logout and more...">
+        <a href class="glyphicon glyphicon-list"
+           uib-dropdown-toggle></a>
+        <ul uib-dropdown-menu>
+          <li ng-if="!op_changed">
+            <a href="" ng-click="changeOperator()">
+              <span class="glyphicon glyphicon-random"></span>
+              [% l('Change Operator') %]
+            </a>
+          </li>
+          <li ng-if="op_changed">
+            <a href="" ng-click="changeOperatorUndo()">
+              <span class="glyphicon glyphicon-random"></span>
+              [% l('Restore Operator') %]
+            </a>
+          </li>
+          <li>
+            <a href="./login" ng-click="logout()" target="_self">
+              <span class="glyphicon glyphicon-log-out"></span>
+              [% l('Log Out') %]
+            </a>
+          </li>
+          <li>
+            <a href="./about" target="_self">
+              <span class="glyphicon glyphicon-question-sign"></span>
+              [% l('About') %]
+            </a>
+          </li>
+          <li class="divider"></li>
+          <li class="disabled">
+            <a href disabled="disabled">
+              <span
+                      title="[% l('Hatch Connection Status') %]"
+                      class="glyphicon glyphicon-transfer"
+                      ng-class="{'connect-status-ok' : hatchConnected()}">
+              </span>
+              [% l('Hatch') %]
+            </a>
+          </li>
+        </ul>
+      </li>
+    </ul>
+  </div>
 </div>
-</body>
-</html>