Remove the list of document from left nav bar.

Of course, the link is still there.

OfficeJS/component/left_nav_bar.html

 <div class="container-fluid">
   <div class="well">
-    <ul class="nav nav-list">
+    <ul class="nav nav-list" id="left-nav-bar">
       <li class="nav-header">Nav</li>
       <li>
         <a href="#/login"
@@ -12,55 +12,56 @@
           Login
         </a>
       </li>
-      <li class="nav-header">Tools</li>
-      <li class="texteditor">
-        <a href="#/texteditor"
-           onclick="javascript:
-                    OfficeJS.open({app:'textEditor'});
-                    return false;">
-          <i class="icon-font"></i>
-          New Text Document
-        </a>
-      </li>
-      <li class="imgeditor">
-        <a href="#/imgeditor"
-           onclick="javascript:
-                    OfficeJS.open({app:'imgEditor'});
-                    return false;">
-          <i class="icon-pencil"></i>
-          New Image
-        </a>
-      </li>
-      <li class="spreadsheet">
-        <a href="#/spreadsheet"
-           onclick="javascript:
-                    OfficeJS.open({app:'speadsheet'});
-                    return false;">
-          <i class="icon-signal"></i>
-          New Spreadsheet
-        </a>
-      </li>
-      <li class="editpreferences">
-        <a href="#/editpreferences"
-           onclick="javascript:
-                    OfficeJS.open({app:'editpreferences'});
-                    return false;">
-          <i class="icon-check"></i>
-          Edit Preferences
-        </a>
-      </li>
-      <li id="nav_document_list_header"
-          style="display:none">
-        <a href="#/doclist"
-           onclick="javascript:
-                    OfficeJS.open({app:'documentLister'});
-                    return false;">
-          <!-- <i class="icon-list"></i> -->
-          Document List
-        </a>
-        <div id="nav_document_list">
-        </div>
-      </li>
     </ul>
   </div>
 </div>
+<script type="text/html" id="left-nav-tools">
+  <li class="nav-header left-nav-tools">Tools</li>
+  <li class="texteditor left-nav-tools">
+    <a href="#/texteditor"
+       onclick="javascript:
+                OfficeJS.open({app:'textEditor'});
+                return false;">
+      <i class="icon-font"></i>
+      New Text Document
+    </a>
+  </li>
+  <li class="imgeditor left-nav-tools">
+    <a href="#/imgeditor"
+       onclick="javascript:
+                OfficeJS.open({app:'imgEditor'});
+                return false;">
+      <i class="icon-pencil"></i>
+      New Image
+    </a>
+  </li>
+  <li class="spreadsheet left-nav-tools">
+    <a href="#/spreadsheet"
+       onclick="javascript:
+                OfficeJS.open({app:'speadsheet'});
+                return false;">
+      <i class="icon-signal"></i>
+      New Spreadsheet
+    </a>
+  </li>
+  <li class="editpreferences left-nav-tools">
+    <a href="#/editpreferences"
+       onclick="javascript:
+                OfficeJS.open({app:'editpreferences'});
+                return false;">
+      <i class="icon-check"></i>
+      Edit Preferences
+    </a>
+  </li>
+  <li id="nav_document_list_header left-nav-tools">
+    <a href="#/doclist"
+       onclick="javascript:
+                OfficeJS.open({app:'documentLister'});
+                return false;">
+      <i class="icon-list"></i>
+      Document List
+    </a>
+    <div id="nav_document_list">
+    </div>
+  </li>
+</script>

OfficeJS/js/officejs.js

@@ -30,7 +30,18 @@
             leftnavbar: {
                 type:'nav',
                 path:'component/left_nav_bar.html',
-                gadgetid:'page-left_nav_bar'
+                gadgetid:'page-left_nav_bar',
+                bar_tools: false,
+                update: function () {
+                    var elmt;
+                    if (priv.isJioSet() && !this.bar_tools) {
+                        // add tools to nav bar
+                        elmt = document.querySelector ('script#left-nav-tools');
+                        document.querySelector ('#left-nav-bar').innerHTML +=
+                        elmt.innerHTML;
+                        this.bar_tools = true;
+                    }
+                }
             },
             login: {
                 type:'loader',
@@ -163,26 +174,6 @@
          * @method showDocumentListInsideLeftNavBar
          */
         priv.showDocumentListInsideLeftNavBar = function () {
-            var i, html_string = '<ul>';
-            for (i = 0; i < priv.data_object.documentList.length; i += 1) {
-                html_string += '<li>' +
-                    '<a href="#/texteditor:' +
-                    priv.data_object.documentList[i].fileName + '"'+
-                    ' onclick="javascript:'+
-                    'OfficeJS.open({app:\'textEditor\',fileName:\''+
-                    priv.data_object.documentList[i].fileName + '\'});'+
-                    'return false;">'+
-                    priv.data_object.documentList[i].fileName +
-                    '</a>' +
-                    '</li>';
-            }
-            html_string += '</ul>';
-            if (html_string === '<ul></ul>') {
-                // if there's no document
-                html_string = '<ul><li>No document</li></ul>';
-            }
-            // show list in the left nav bar
-            $('#nav_document_list').html(html_string);
             $('#nav_document_list_header').show();
         };
 
@@ -305,12 +296,18 @@
          * @param {object} applicant The applicant informations
          */
         that.setJio = function (storage,applicant) {
+            var leftnavbar;
             if (priv.isJioSet()) {
                 alert ('Jio already set.');
                 return;
             }
             // if there is not any jio created
             priv.jio = JIO.createNew (storage,applicant);
+            // update left nav bar
+            leftnavbar = priv.getRealApplication ('leftnavbar');
+            if (typeof leftnavbar.update !== 'undefined') {
+                leftnavbar.update();
+            }
             that.getList();
         };