Sidebar UI - design doc oriented

21 files changed, 474 insertions, 191 deletions

diff --git a/src/fauxton/app/addons/activetasks/templates/tabs.html b/src/fauxton/app/addons/activetasks/templates/tabs.html
index 58697480d..624c3868f 100644
--- a/src/fauxton/app/addons/activetasks/templates/tabs.html
+++ b/src/fauxton/app/addons/activetasks/templates/tabs.html
@@ -14,14 +14,6 @@ the License.
 
 
 
-
-
-<div id="sidenav">
-  <header class="row-fluid">
-    <h3>Filter by: </h3>
-  </header>
-
-  <nav>
 		<ul class="task-tabs nav nav-list">
 		  <% for (var filter in filters) { %>
 		      <li data-type="<%=filter%>">
@@ -42,5 +34,4 @@ the License.
 				<label for="pollingRange"><span>5</span> second(s)</label>
 			</li>
 		</ul>
-  </nav>
-</div>
+
diff --git a/src/fauxton/app/addons/activetasks/views.js b/src/fauxton/app/addons/activetasks/views.js
index 87d56e252..54d82156c 100644
--- a/src/fauxton/app/addons/activetasks/views.js
+++ b/src/fauxton/app/addons/activetasks/views.js
@@ -109,6 +109,8 @@ function (app, FauxtonAPI, ActiveTasks) {
   });
 
   Views.TabMenu = FauxtonAPI.View.extend({
+    tagName: "nav",
+    className: "sidenav",
     template: "addons/activetasks/templates/tabs",
 
     events: {
diff --git a/src/fauxton/app/addons/documents/assets/less/documents.less b/src/fauxton/app/addons/documents/assets/less/documents.less
index e62be3017..8b0ba2e61 100644
--- a/src/fauxton/app/addons/documents/assets/less/documents.less
+++ b/src/fauxton/app/addons/documents/assets/less/documents.less
@@ -84,9 +84,13 @@ button.beautify {
 .change-box {
   margin: 0 20px 20px 20px;
 }
+.searchbox-container {
+  position: fixed;
+  right: 15px;
+}
 
 .change-wrapper {
-  margin-top: 57px;
+  margin-top: 20px;
   border-bottom: 1px solid #dddddd;
   &:last-child {
     border-bottom: none;
@@ -132,6 +136,7 @@ button.beautify {
   word-wrap: break-word;
 }
 
+
 #dashboard-upper-content{
   .js-query-keys-wrapper{
     padding-top: 0;
@@ -152,4 +157,67 @@ button.beautify {
   }
 }
 
+.sidenav{
+  margin-bottom: 40px;
+  li.nav-header {
+    position: relative;
+    .accordion-body{
+      &.in {
+        border-bottom: 1px solid #d3d7db;
+      }
+      color: #eee;
+      margin-left: 0;
+      li a{
+        padding-left: 55px;
+        font-size: 14px;
+        &:hover {
+          text-decoration: none;
+          color: #af2d24;
+        }
+      }
+    }
+    > span{
+      display: block;
+      padding: 10px 13px 10px 30px;
+      color: #333333;
+      border-bottom: 1px solid #d3d7db;
+      &:before{
+        vertical-align: bottom;
+        font-size: 12px;
+        padding-right: 10px;
+        margin-bottom: 2px;
+      }
+      &.down:before {
+        margin-bottom: -2px;
+        transform:rotate(90deg);
+        -ms-transform:rotate(90deg); /* IE 9 */
+        -webkit-transform:rotate(90deg); /* Opera, Chrome, and Safari */
+      }
+    }
+    div.new-button {
+      position: absolute;
+      top: 2px;
+      right: 15px;
+      .dropdown-menu{
+        left: -82px;
+        padding-bottom: 0;
+        width: auto;
+        min-width: 0;
+        li a {
+          padding: 10px 15px 10px 12px;
+        }
+      }
+      .dropdown-toggle{
+        text-decoration: none;
+      }
+      > a {
+        border-bottom: none;
+        text-decoration: none;
+        font-size: 16px;
+
+      }
+    }
+  }
+}
+
 
diff --git a/src/fauxton/app/addons/documents/routes.js b/src/fauxton/app/addons/documents/routes.js
index a21bdaa25..df58de491 100644
--- a/src/fauxton/app/addons/documents/routes.js
+++ b/src/fauxton/app/addons/documents/routes.js
@@ -17,10 +17,11 @@ define([
 
        // Modules
        "addons/documents/views",
-       "addons/databases/base"
+       "addons/databases/base",
+       "addons/documents/resources"
 ],
 
-function(app, FauxtonAPI, Documents, Databases) {
+function(app, FauxtonAPI, Documents, Databases, Resources) {
 
   var DocEditorRouteObject = FauxtonAPI.RouteObject.extend({
     layout: "one_pane",
@@ -131,7 +132,25 @@ function(app, FauxtonAPI, Documents, Databases) {
         route: "viewFn",
         roles: ['_admin']
       },
-      "database/:database/new_view": "newViewEditor"
+      "database/:database/_design/:ddoc/_lists/:fn": {
+        route: "tempFn",
+        roles: ['_admin']
+      },
+      "database/:database/_design/:ddoc/_filters/:fn": {
+        route: "tempFn",
+        roles: ['_admin']
+      },
+      "database/:database/_design/:ddoc/_show/:fn": {
+        route: "tempFn",
+        roles: ['_admin']
+      },
+      "database/:database/_design/:ddoc/metadata": {
+        route: "designDocMetadata",
+        roles: ['_admin']
+      },
+      "database/:database/new_view": "newViewEditor",
+      "database/:database/new_view/:designDoc": "newViewEditor",
+      "database/:database/_changes(:params)": "changes"
     },
 
     events: {
@@ -167,6 +186,35 @@ function(app, FauxtonAPI, Documents, Databases) {
         database: this.data.database
       }));
     },
+    designDocMetadata:  function(database, ddoc){
+      this.toolsView && this.toolsView.remove();
+      this.viewEditor && this.viewEditor.remove();
+
+      var DesignDocInfo = new Resources.DdocInfo({_id: "_design/"+ddoc},{database: this.data.database });
+
+      this.setView("#dashboard-lower-content", new Documents.Views.DdocInfo({
+        ddocName: ddoc,
+        model: DesignDocInfo
+      }));
+
+      this.sidebar.setSelectedTab(app.utils.removeSpecialCharacters(ddoc)+"_metadata");
+
+      this.crumbs = function () {
+        return [
+          {"name": this.data.database.id, "link": Databases.databaseUrl(this.data.database)},
+        ];
+      };
+
+    },
+    tempFn:  function(databaseName, ddoc, fn){
+      this.setView("#dashboard-upper-content", new Documents.Views.temp({}));
+      this.crumbs = function () {
+        return [
+          {"name": this.data.database.id, "link": Databases.databaseUrl(this.data.database)},
+        ];
+      };
+
+    },
 
     establish: function () {
       return this.data.designDocs.fetch({reset: true});
@@ -205,16 +253,11 @@ function(app, FauxtonAPI, Documents, Databases) {
         this.sidebar.setSelectedTab('all-docs');
       }
 
-      if (this.viewEditor) { this.viewEditor.remove(); }
-
-      this.toolsView = this.setView("#dashboard-upper-menu", new Documents.Views.JumpToDoc({
-        database: this.data.database,
-        collection: this.data.database.allDocs
-      }));
+      this.viewEditor && this.viewEditor.remove();
 
       this.data.database.allDocs.paging.pageSize = this.getDocPerPageLimit(urlParams, parseInt(docParams.limit, 10));
 
-      this.setView("#dashboard-upper-content", new Documents.Views.AllDocsLayout({
+      this.viewEditor = this.setView("#dashboard-upper-content", new Documents.Views.AllDocsLayout({
         database: this.data.database,
         collection: this.data.database.allDocs,
         params: urlParams,
@@ -264,7 +307,7 @@ function(app, FauxtonAPI, Documents, Databases) {
         ddocInfo: this.ddocInfo(decodeDdoc, this.data.designDocs, view)
       }));
 
-      if (this.toolsView) { this.toolsView.remove(); }
+      this.toolsView && this.toolsView.remove();
 
       this.documentsView = this.createViewDocumentsView({
         designDoc: decodeDdoc,
@@ -308,13 +351,14 @@ function(app, FauxtonAPI, Documents, Databases) {
       }));
     },
 
-    newViewEditor: function () {
+    newViewEditor: function (database, designDoc) {
       var params = app.getParams();
 
       this.toolsView && this.toolsView.remove();
       this.documentsView && this.documentsView.remove();
 
       this.viewEditor = this.setView("#dashboard-upper-content", new Documents.Views.ViewEditor({
+        currentddoc: "_design/"+designDoc || "",
         ddocs: this.data.designDocs,
         params: params,
         database: this.data.database,
@@ -447,46 +491,36 @@ function(app, FauxtonAPI, Documents, Databases) {
       } else {
         return parseInt(urlParams.limit, 10);
       }
-    }
-
-  });
-
-  var ChangesRouteObject = FauxtonAPI.RouteObject.extend({
-    layout: "with_tabs",
-    selectedHeader: "Databases",
-    crumbs: function () {
-      return [
-        {"name": this.database.id, "link": Databases.databaseUrl(this.database)},
-        {"name": "_changes", "link": "/_changes"}
-      ];
     },
 
-    routes: {
-      "database/:database/_changes(:params)": "changes"
-    },
+    changes: function (event) {
+      var docParams = app.getParams();
+      this.data.database.buildChanges(docParams);
 
-    initialize: function (route, masterLayout, options) {
-      this.databaseName = options[0];
-      this.database = new Databases.Model({id: this.databaseName});
+      this.documentsView = this.setView("#dashboard-lower-content", new Documents.Views.Changes({
+        model: this.data.database
+      }));
 
-      var docParams = app.getParams();
+      this.toolsView && this.toolsView.remove();
+      this.viewEditor && this.viewEditor.remove();
 
-      this.database.buildChanges(docParams);
-    },
+      this.sidebar.setSelectedTab('changes');
 
-    changes: function (event) {
-      this.setView("#dashboard-content", new Documents.Views.Changes({
-        model: this.database
-      }));
-    },
+      this.crumbs = function () {
+        return [
+          {"name": this.data.database.id, "link": Databases.databaseUrl(this.data.database)},
+          {"name": "_changes", "link": "/_changes"}
+        ];
+      };
 
-    apiUrl: function() {
-      return [this.database.url("apiurl"), this.database.documentation()];
+      this.apiUrl = function() {
+        return [this.data.database.url("apiurl"), this.data.database.documentation()];
+      };
     }
 
   });
 
-  Documents.RouteObjects = [DocEditorRouteObject, NewDocEditorRouteObject, DocumentsRouteObject, ChangesRouteObject];
+  Documents.RouteObjects = [DocEditorRouteObject, NewDocEditorRouteObject, DocumentsRouteObject];
 
   return Documents;
 });
diff --git a/src/fauxton/app/addons/documents/templates/add_new_ddoc_fn_dropdown.html b/src/fauxton/app/addons/documents/templates/add_new_ddoc_fn_dropdown.html
new file mode 100644
index 000000000..77323a970
--- /dev/null
+++ b/src/fauxton/app/addons/documents/templates/add_new_ddoc_fn_dropdown.html
@@ -0,0 +1,31 @@
+<!--
+Licensed under the Apache License, Version 2.0 (the "License"); you may not
+use this file except in compliance with the License. You may obtain a copy of
+the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+License for the specific language governing permissions and limitations under
+the License.
+-->
+
+<div class="dropdown">
+	<a class="dropdown-toggle icon fonticon-circle-plus" data-toggle="dropdown" href="#" data-bypass="true"></a>
+	<ul class="dropdown-menu arrow" role="menu" aria-labelledby="dLabel">
+		<% if (full){ %>
+			<li><a class="icon fonticon-replication" href="#replicate/<%=database.id%>">Replicate</a><li>
+			<li><a class="icon fonticon-trash" href="#" data-bypass="true">Delete</a><li>
+		<%}%>
+		<li class="header-label">Add new</li>
+		<li><a class="icon fonticon-circle-plus" href="#<%= database.url('app') %>/new_view/<%=ddocSafe%>">Secondary View</a><li>
+<!-- 	  <li><a class="icon fonticon-circle-plus" href="#<%= database.url('app') %>/new_filter/<%=ddocSafe%>">Filter Function</a><li>
+	  <li><a class="icon fonticon-circle-plus" href="#<%= database.url('app') %>/new_show/<%=ddocSafe%>">Show Function</a><li>
+	  <li><a class="icon fonticon-circle-plus" href="#<%= database.url('app') %>/new_list/<%=ddocSafe%>">List function</a><li> -->
+	  <% _.each(extensionLinks, function(link) { %>
+			<li><a class="icon fonticon-circle-plus" href="#<%= database.url('app') %>/<%=link.url%>/<%=ddocSafe%>"><%=link.title%></a><li>
+    <%});%>
+	</ul>
+</div>
diff --git a/src/fauxton/app/addons/documents/templates/all_docs_layout.html b/src/fauxton/app/addons/documents/templates/all_docs_layout.html
index 2862e169c..e2c247984 100644
--- a/src/fauxton/app/addons/documents/templates/all_docs_layout.html
+++ b/src/fauxton/app/addons/documents/templates/all_docs_layout.html
@@ -11,10 +11,14 @@ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 License for the specific language governing permissions and limitations under
 the License.
 -->
-<ul class="nav nav-tabs window-resizeable" id="db-views-tabs-nav">
-  <li><a id="toggle-query" href="#query" data-bypass="true" data-toggle="tab">
-    <i class="fonticon fonticon-plus"></i> Query Options</a></li>
-</ul>
+<div class="dashboard-upper-menu">
+	<ul class="nav nav-tabs window-resizeable" id="db-views-tabs-nav">
+	  <li><a id="toggle-query" href="#query" data-bypass="true" data-toggle="tab">
+	    <i class="fonticon fonticon-plus"></i> Query Options</a></li>
+	</ul>
+	<div class="js-search searchbox-container"></div>
+</div>
+
 <div class="tab-content">
   <div class="tab-pane" id="query">
   </div>
diff --git a/src/fauxton/app/addons/documents/templates/attachments_footer.html b/src/fauxton/app/addons/documents/templates/attachments_footer.html
new file mode 100644
index 000000000..31bd5a575
--- /dev/null
+++ b/src/fauxton/app/addons/documents/templates/attachments_footer.html
@@ -0,0 +1,20 @@
+<!--
+Licensed under the Apache License, Version 2.0 (the "License"); you may not
+use this file except in compliance with the License. You may obtain a copy of
+the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+License for the specific language governing permissions and limitations under
+the License.
+-->
+
+<ul>
+	<li> attachment 1</li>
+	<li> attachment 2 </li>
+	<li> attachment 3</li>
+	<li> attachment 4</li>
+</ul>
diff --git a/src/fauxton/app/addons/documents/templates/ddoc_info.html b/src/fauxton/app/addons/documents/templates/ddoc_info.html
index b33e49b1a..3f8f80f16 100644
--- a/src/fauxton/app/addons/documents/templates/ddoc_info.html
+++ b/src/fauxton/app/addons/documents/templates/ddoc_info.html
@@ -12,7 +12,7 @@ License for the specific language governing permissions and limitations under
 the License.
 -->
 <div>
-  <h2> Design Doc MetaData </h2>
+  <h2>Design Doc MetaData:  _design/<%=Ddoc%> </h2>
   <div class="row-fluid">
 	<% i=0; _.map(view_index, function (val, key) { %>
 		<% if(i%2==0){%>
diff --git a/src/fauxton/app/addons/documents/templates/design_doc_menu.html b/src/fauxton/app/addons/documents/templates/design_doc_menu.html
new file mode 100644
index 000000000..c5bd3923b
--- /dev/null
+++ b/src/fauxton/app/addons/documents/templates/design_doc_menu.html
@@ -0,0 +1,27 @@
+<!--
+Licensed under the Apache License, Version 2.0 (the "License"); you may not
+use this file except in compliance with the License. You may obtain a copy of
+the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+License for the specific language governing permissions and limitations under
+the License.
+-->
+<li class="nav-header">
+	<span  class="fonticon-play js-collapse-toggle" data-toggle="collapse" data-target="#<%= ddoc_clean %>">
+		<%= designDoc%>
+	</span>
+	<div class="new-button"></div>
+	<ul class="accordion-body collapse" id="<%= ddoc_clean %>">
+		<li>
+			<a id="<%= ddoc_clean %>_metadata" href="#database/<%= database_encoded %>/_design/<%= ddoc_encoded %>/metadata" class="toggle-view">
+			  Design Doc Metadata
+			</a>
+		</li>
+
+	</ul>
+</li>
diff --git a/src/fauxton/app/addons/documents/templates/design_doc_selector.html b/src/fauxton/app/addons/documents/templates/design_doc_selector.html
index 769ca3bdd..828b5a506 100644
--- a/src/fauxton/app/addons/documents/templates/design_doc_selector.html
+++ b/src/fauxton/app/addons/documents/templates/design_doc_selector.html
@@ -16,7 +16,10 @@ the License.
   <select id="ddoc">
     <optgroup label="Select a document">
       <option value="new-doc">New document</option>
+
       <% ddocs.each(function(ddoc) { %>
+      <%= ddoc.id %>
+      <%= ddocName %>
       <% if (ddoc.id === ddocName) { %>
       <option selected="selected" value="<%- ddoc.id %>"><%- ddoc.id %></option>
       <% } else { %>
diff --git a/src/fauxton/app/addons/documents/templates/index_menu_item.html b/src/fauxton/app/addons/documents/templates/index_menu_item.html
index 7ca9012e6..455f491b6 100644
--- a/src/fauxton/app/addons/documents/templates/index_menu_item.html
+++ b/src/fauxton/app/addons/documents/templates/index_menu_item.html
@@ -12,6 +12,6 @@ License for the specific language governing permissions and limitations under
 the License.
 -->
 
-<a id="<%= ddoc_clean %>_<%= index_clean %>" href="#database/<%= database_encoded %>/_design/<%= ddoc_encoded %>/_view/<%= index_encoded %>" class="toggle-view">
-  <%= ddoc %><span class="divider">/</span><%= index %>
+<a id="<%= removeSpecialCharacters(ddoc) %>_<%= removeSpecialCharacters(index) %>" href="#database/<%= safeURL(database) %>/_design/<%= safeURL(ddoc)%>/_<%=type%>/<%= safeURL(index) %>" class="toggle-view">
+  <%= index %>
 </a>
diff --git a/src/fauxton/app/addons/documents/templates/sidebar.html b/src/fauxton/app/addons/documents/templates/sidebar.html
index 750cd3004..74c8605cc 100644
--- a/src/fauxton/app/addons/documents/templates/sidebar.html
+++ b/src/fauxton/app/addons/documents/templates/sidebar.html
@@ -11,34 +11,17 @@ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 License for the specific language governing permissions and limitations under
 the License.
 -->
-
-<div id="sidenav">
-  <header class="row-fluid">
+<!--   <header class="row-fluid">
     <div class="span12">
-      <div class="btn-group">
-        <button class="btn dropdown-toggle dropdown-toggle-btn" data-toggle="dropdown">
-          Docs
-          <span class="caret"></span>
-        </button>
-        <ul class="dropdown-menu">
-          <!-- dropdown menu links -->
-          <li><a href="<%= db_url %>"><i class="icon icon-file"></i> Docs</a></li>
-          <li><a href="<%= permissions_url %>"><i class="icon icon-lock"></i> Permissions</a></li>
-          <li><a href="<%= changes_url %>"><i class="icon icon-forward"></i> Changes</a></li>
-          <% _.each(docLinks, function (link) { %>
-          <li><a href="<%= database_url + '/' + link.url %>"><i class="icon <%= link.icon %>"></i> <%= link.title %></a></li>
-          <% }); %>
-        </ul>
-      </div>
 
       <div class="btn-group">
         <button class="btn dropdown-toggle dropdown-toggle-btn" data-toggle="dropdown">
-          New
+          Create New
           <span class="caret"></span>
         </button>
         <ul class="dropdown-menu">
           <!-- dropdown menu links -->
-          <li>
+<!--           <li>
           <a id="doc" href="#<%= database.url('app') %>/new">Document</a>
           </li>
           <li>
@@ -51,18 +34,17 @@ the License.
       </div>
         <button id="delete-database" class="btn pull-right"><i class="icon-trash"></i> Database</button>
     </div>
-  </header>
+  </header> -->
+
 
-  <nav>
     <ul class="nav nav-list">
+      <li><a id="permissions" href="<%= permissions_url %>">Permissions</a><li>
+      <li><a id="changes" href="<%= changes_url %>">Changes</a><li>
+      <% _.each(docLinks, function (link) { %>
+        <li><a href="<%= database_url + '/' + link.url %>"><%= link.title %></a></li>
+      <% }); %>
       <li class="active"><a id="all-docs" href="#<%= database.url('index') %>" class="toggle-view"> All documents</a></li>
       <li><a id="design-docs" href='#<%= database.url("index") %>?startkey="_design"&endkey="_e"'  class="toggle-view"> All design docs</a></li>
     </ul>
-    <ul class="nav nav-list views">
-      <li class="nav-header">Secondary Indexes</li>
-      <li><a id="new-view" href="#<%= database.url('app') %>/new_view" class="new"><i class="icon-plus"></i> New</a></li>
-    </ul>
-    <div id="extension-navs"></div>
-  </nav>
+
   <div id="delete-db-modal"> </div>
-</div>
diff --git a/src/fauxton/app/addons/documents/templates/view_editor.html b/src/fauxton/app/addons/documents/templates/view_editor.html
index 1a10ff5fb..5a1013bb1 100644
--- a/src/fauxton/app/addons/documents/templates/view_editor.html
+++ b/src/fauxton/app/addons/documents/templates/view_editor.html
@@ -11,6 +11,7 @@ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 License for the specific language governing permissions and limitations under
 the License.
 -->
+<div class="dashboard-upper-menu">
   <ul class="nav nav-tabs" id="db-views-tabs-nav">
     <li class="active"> <a data-bypass="true" id="index-nav" data-toggle="tab" href="#index">
       <i class="fonticon-wrench fonticon"></i>
@@ -19,9 +20,9 @@ the License.
     <li><a data-bypass="true" id="query-nav" href="#query" data-toggle="tab">
       <i class="fonticon-plus fonticon"></i> Query Options</a>
     </li>
-    <li><a data-bypass="true" id="meta-nav" href="#metadata" data-toggle="tab">Design Doc Metadata</a></li>
     <% } %>
   </ul>
+</div>
   <div class="all-docs-list errors-container"></div>
   <div class="tab-content">
 	 <div id="query-options-wrapper"></div>
diff --git a/src/fauxton/app/addons/documents/views.js b/src/fauxton/app/addons/documents/views.js
index 97f82b454..ad69fb78d 100644
--- a/src/fauxton/app/addons/documents/views.js
+++ b/src/fauxton/app/addons/documents/views.js
@@ -345,25 +345,27 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb,
       this.ddoc = options.ddoc;
       this.database = options.database;
       this.selected = !! options.selected;
+      this.selector = options.selector;
     },
 
     serialize: function() {
       return {
+        type:  this.selector,
         index: this.index,
         ddoc: this.ddoc,
         database: this.database,
-        index_clean: app.utils.removeSpecialCharacters(this.index),
-        ddoc_clean: app.utils.removeSpecialCharacters(this.ddoc),
-        index_encoded: app.utils.safeURLName(this.index),
-        ddoc_encoded: app.utils.safeURLName(this.ddoc),
-        database_encoded: app.utils.safeURLName(this.database),
+        // index_clean: app.utils.removeSpecialCharacters(this.index),
+        // ddoc_clean: app.utils.removeSpecialCharacters(this.ddoc),
+        // index_encoded: app.utils.safeURLName(this.index),
+        // ddoc_encoded: app.utils.safeURLName(this.ddoc),
+        // database_encoded: app.utils.safeURLName(this.database),
         selected: this.selected
       };
     },
 
     afterRender: function() {
       if (this.selected) {
-        $("#sidenav ul.nav-list li").removeClass("active");
+        $(".sidenav ul.nav-list li").removeClass("active");
         this.$el.addClass("active");
       }
     }
@@ -455,6 +457,11 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb,
         showPreview: false,
         database: this.database,
       }));
+
+      this.toolsView = this.setView(".js-search", new Views.JumpToDoc({
+        database: this.database,
+        collection: this.database.allDocs
+      }));
     },
 
     afterRender: function () {
@@ -1348,6 +1355,7 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb,
       this.ddocs = options.ddocs;
       this.params = options.params;
       this.database = options.database;
+      this.currentDdoc = options.currentddoc;
       if (this.newView) {
         this.viewName = 'newView';
       } else {
@@ -1635,8 +1643,6 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb,
       if ($targetTab.attr('id') !== $previousTab.attr('id')) {
         $previousTab.removeAttr('style');
       }
-      //stop polling
-      this.ddocInfoView.stopRefreshInterval();
 
       if ($targetId === 'index-nav') {
         if (this.newView) { return; }
@@ -1645,11 +1651,6 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb,
         $targetTab.toggle('slow', function(){
            that.showEditors();
         });
-      } else if ($targetId === "meta-nav"){
-        if (!$("#ddoc-info").is(":visible")){
-          this.ddocInfoView.startRefreshInterval();
-        }
-        $targetTab.toggle('slow');
       } else {
         $targetTab.toggle('slow');
       }
@@ -1693,16 +1694,6 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb,
         $('.beautify-tooltip').tooltip();
       }
     },
-    renderDdocInfo: function(){
-      if(this.ddocInfoView){
-        this.ddocInfoView.remove();
-      }
-
-      if (this.newView) { return; }
-      this.ddocInfoView = this.setView('#ddoc-info', new Views.DdocInfo({model: this.ddocInfo }));
-      this.ddocInfoView.render();
-
-    },
     beforeRender: function () {
 
       if (this.newView) {
@@ -1721,7 +1712,7 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb,
 
       this.designDocSelector = this.setView('.design-doc-group', new Views.DesignDocSelector({
         collection: this.ddocs,
-        ddocName: this.model.id,
+        ddocName: this.currentDdoc || this.model.id,
         database: this.database
       }));
 
@@ -1742,7 +1733,6 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb,
     },
 
     afterRender: function() {
-      this.renderDdocInfo();
 
       if (this.params && !this.newView) {
         this.advancedOptions.updateFromParams(this.params);
@@ -1824,6 +1814,8 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb,
 
   Views.Sidebar = FauxtonAPI.View.extend({
     template: "addons/documents/templates/sidebar",
+    className: "sidenav",
+    tagName: "nav",
     events: {
       "click button#delete-database": "showDeleteDatabaseModal"
     },
@@ -1857,17 +1849,6 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb,
       };
     },
 
-    buildIndexList: function(collection, selector, design){
-      _.each(_.keys(collection), function(key){
-        var selected = this.ddocID == "_design/"+design;
-        this.insertView("ul.nav." + selector, new Views.IndexItem({
-          ddoc: design,
-          index: key,
-          database: this.collection.database.id,
-          selected: selected && key == this.currView
-        }));
-      }, this);
-    },
 
     beforeRender: function(manage) {
       this.deleteDBModal = this.setView(
@@ -1875,21 +1856,14 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb,
         new Views.DeleteDBModal({database: this.database})
       );
 
-      var sidebarListViews = FauxtonAPI.getExtensions('sidebar:list');
-      _.each(sidebarListViews, function (view) {
-        var extension = this.insertView('#extension-navs', view);
-        extension.update(this.database, this.collection, this.viewName);
-        extension.render();
-      }, this);
-
       this.collection.each(function(design) {
         if (design.has('doc')){
-          var ddoc = design.id.replace(/^_design\//,"");
-          if (design.get('doc').views){
-            this.buildIndexList(design.get('doc').views, "views", ddoc);
-          }
+          this.insertView(new Views.DdocSidenav({
+            model: design,
+            collection: this.collection
+          }));
         }
-      }, this);
+      },this);
     },
 
 
@@ -1901,8 +1875,88 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb,
 
     setSelectedTab: function (selectedTab) {
       this.selectedTab = selectedTab;
+      var $selectedTab = this.$('#' + selectedTab);
+
       this.$('li').removeClass('active');
-      this.$('#' + selectedTab).parent().addClass('active');
+      $selectedTab.parent().addClass('active');
+
+      if ($selectedTab.parents(".accordion-body").length !== 0){
+        $selectedTab
+        .parents(".accordion-body")
+        .addClass("in")
+        .parents(".nav-header")
+        .find(".js-collapse-toggle").addClass("down");
+      }
+
+    }
+  });
+
+
+  Views.DdocSidenav = FauxtonAPI.View.extend({
+    tagName: "ul",
+    className:  "nav nav-list",
+    template: "addons/documents/templates/design_doc_menu",
+    events: {
+      "click button": "no",
+      "click .js-collapse-toggle": "toggleArrow"
+    },
+    initialize: function(){
+
+    },
+    toggleArrow:  function(e){
+      this.$(e.currentTarget).toggleClass("down");
+    },
+    no: function(event){
+      event.preventDefault();
+      alert("no");
+    },
+    buildIndexList: function(collection, selector){
+      var design = this.model.id.replace(/^_design\//,"");
+      _.each(_.keys(collection[selector]), function(key){
+        this.insertView(".accordion-body", new Views.IndexItem({
+          selector: selector,
+          ddoc: design,
+          index: key,
+          database: this.model.collection.database.id
+        }));
+      }, this);
+    },
+
+    serialize: function(){
+      var ddocName = this.model.id.replace(/^_design\//,"");
+      return{
+        database: this.collection.database,
+        designDoc: ddocName,
+        ddoc_clean: app.utils.removeSpecialCharacters(ddocName),
+        ddoc_encoded: app.utils.safeURLName(ddocName),
+        database_encoded: app.utils.safeURLName(this.model.collection.database.id),
+      };
+    },
+    beforeRender: function(manage) {
+      var ddocDocs = this.model.get("doc");
+      var ddocName = this.model.id.replace(/^_design\//,"");
+
+      var sidebarListTypes = FauxtonAPI.getExtensions('sidebar:list');
+          if (ddocDocs){
+            //Views
+            this.buildIndexList(ddocDocs, "views");
+            //lists
+            // this.buildIndexList(ddocDocs, "lists");
+            // //show
+            // this.buildIndexList(ddocDocs, "show");
+            // //filters
+            // this.buildIndexList(ddocDocs, "filters");
+            //extensions
+            _.each(sidebarListTypes, function (type) {
+              this.buildIndexList(ddocDocs, type);
+            },this);
+          }
+      this.insertView(".new-button", new Views.newMenuDropdown({
+        database: this.collection.database,
+        ddocSafeName: app.utils.safeURLName(ddocName),
+        fullMenu: false
+      }));
+
     }
   });
 
@@ -1958,16 +2012,51 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb,
     }
   });
 
+
+  Views.newMenuDropdown = FauxtonAPI.View.extend({
+    template: "addons/documents/templates/add_new_ddoc_fn_dropdown",
+    tagName: "div",
+    className: "dropdown",
+    initialize: function(options){
+      this.database = options.database;
+      this.fullMenu = options.fullMenu;
+      this.ddocSafeName = options.ddocSafeName || "";
+    },
+    serialize: function(){
+      var sidebarItem = FauxtonAPI.getExtensions('sidebar:links');
+      return {
+        extensionLinks: sidebarItem,
+        database: this.database,
+        ddocSafe: this.ddocSafeName,
+        full:  this.fullMenu
+      };
+    }
+  });
+
+
+  Views.temp = FauxtonAPI.View.extend({
+  });
+
   Views.DdocInfo = FauxtonAPI.View.extend({
     template: "addons/documents/templates/ddoc_info",
 
     initialize: function (options) {
+      this.ddocName = options.ddocName;
       this.refreshTime = options.refreshTime || 5000;
       this.listenTo(this.model, 'change', this.render);
     },
 
+    establish: function () {
+      return this.model.fetch();
+    },
+
+    afterRender: function(){
+      this.startRefreshInterval();
+    },
+
     serialize: function () {
       return {
+        Ddoc: this.ddocName,
         view_index: this.model.get('view_index')
       };
     },
diff --git a/src/fauxton/app/templates/layouts/two_pane.html b/src/fauxton/app/templates/layouts/two_pane.html
index 0c3165e45..031ad1214 100644
--- a/src/fauxton/app/templates/layouts/two_pane.html
+++ b/src/fauxton/app/templates/layouts/two_pane.html
@@ -22,7 +22,6 @@ the License.
 
 
   <div class="row-fluid content-area">
-  	<div id="tabs" class="row"></div>
     <div id="left-content" class="span6"></div>
     <div id="right-content" class="span6"></div>
   </div>
diff --git a/src/fauxton/app/templates/layouts/with_tabs_sidebar.html b/src/fauxton/app/templates/layouts/with_tabs_sidebar.html
index c808ac9e0..a0ed03d41 100644
--- a/src/fauxton/app/templates/layouts/with_tabs_sidebar.html
+++ b/src/fauxton/app/templates/layouts/with_tabs_sidebar.html
@@ -28,8 +28,10 @@ the License.
 
     <section id="dashboard-content" class="list pull-right window-resizeable">
       <div class="inner">
-        <div id="dashboard-upper-menu" class="window-resizeable"></div>
-        <div id="dashboard-upper-content"></div>
+        <!-- <div id="dashboard-upper-menu" class="window-resizeable"></div> -->
+        <div id="dashboard-upper-content">
+
+        </div>
 
         <div id="dashboard-lower-content"></div>
       </div>
diff --git a/src/fauxton/assets/less/bootstrap/dropdowns.less b/src/fauxton/assets/less/bootstrap/dropdowns.less
index 9e47b4715..5b3ca77a4 100644
--- a/src/fauxton/assets/less/bootstrap/dropdowns.less
+++ b/src/fauxton/assets/less/bootstrap/dropdowns.less
@@ -39,6 +39,7 @@
 // The dropdown menu (ul)
 // ----------------------
 .dropdown-menu {
+
   position: absolute;
   top: 100%;
   left: 0;
@@ -46,7 +47,6 @@
   display: none; // none by default, but block on "open" of the menu
   float: left;
   min-width: 160px;
-  padding: 5px 0;
   margin: 2px 0 0; // override default ul
   list-style: none;
   background-color: @dropdownBackground;
@@ -54,8 +54,6 @@
   border: 1px solid @dropdownBorder;
   *border-right-width: 2px;
   *border-bottom-width: 2px;
-  .border-radius(6px);
-  .box-shadow(0 5px 10px rgba(0,0,0,.2));
   -webkit-background-clip: padding-box;
      -moz-background-clip: padding;
           background-clip: padding-box;
@@ -65,7 +63,29 @@
     right: 0;
     left: auto;
   }
-
+  li.header-label{
+    background-color: #1A1A1A;
+    color: #676767;
+    padding: 3px 20px;
+    font-size: 13px;
+  }
+  &.arrow {
+    &:before{
+      content: "";
+      display: block;
+      position: absolute;
+      border-style: solid;
+      top: -20px;
+      right: 10%;
+      width: 0;
+      height: 0;
+      margin-left: -10px;
+      border-left: 10px solid transparent;
+      border-right: 10px solid transparent;
+      border-bottom: 10px solid #2b2f33;
+      border-top: 10px solid transparent;
+    }
+  }
   // Dividers (basically an hr) within the dropdown
   .divider {
     .nav-divider(@dropdownDividerTop, @dropdownDividerBottom);
@@ -73,6 +93,10 @@
 
   // Links within the dropdown menu
   > li > a {
+    &.icon:before{
+      padding-right: 5px;
+    }
+    font-size: 12px;
     display: block;
     padding: 3px 20px;
     clear: both;
@@ -80,6 +104,7 @@
     line-height: @baseLineHeight;
     color: @dropdownLinkColor;
     white-space: nowrap;
+    border-bottom: 1px solid #1A1A1A;
   }
 }
 
diff --git a/src/fauxton/assets/less/bootstrap/navs.less b/src/fauxton/assets/less/bootstrap/navs.less
index 01cd805bd..0013179a6 100644
--- a/src/fauxton/assets/less/bootstrap/navs.less
+++ b/src/fauxton/assets/less/bootstrap/navs.less
@@ -37,12 +37,9 @@
 .nav-header {
   display: block;
   padding: 3px 15px;
-  font-size: 11px;
-  font-weight: bold;
   line-height: @baseLineHeight;
   color: @grayLight;
   text-shadow: 0 1px 0 rgba(255,255,255,.5);
-  text-transform: uppercase;
 }
 // Space them out when they follow another list item (link)
 .nav li + .nav-header {
diff --git a/src/fauxton/assets/less/bootstrap/variables.less b/src/fauxton/assets/less/bootstrap/variables.less
index 31c131b1e..f52b2cbfc 100644
--- a/src/fauxton/assets/less/bootstrap/variables.less
+++ b/src/fauxton/assets/less/bootstrap/variables.less
@@ -119,12 +119,12 @@
 
 // Dropdowns
 // -------------------------
-@dropdownBackground:            @white;
+@dropdownBackground:            #2B2F33;
 @dropdownBorder:                rgba(0,0,0,.2);
-@dropdownDividerTop:            #e5e5e5;
-@dropdownDividerBottom:         @white;
+@dropdownDividerTop:            #1A1A1A;
+@dropdownDividerBottom:         #1A1A1A;
 
-@dropdownLinkColor:             @grayDark;
+@dropdownLinkColor:             #D9D9D9;
 @dropdownLinkColorHover:        @white;
 @dropdownLinkColorActive:       @white;
 
diff --git a/src/fauxton/assets/less/fauxton.less b/src/fauxton/assets/less/fauxton.less
index fc9290967..28bd9541f 100644
--- a/src/fauxton/assets/less/fauxton.less
+++ b/src/fauxton/assets/less/fauxton.less
@@ -568,12 +568,15 @@ table.databases {
     padding: 0px;
     bottom: 0px;
     top: 60px;
-    position: absolute;
+    position: fixed;
     overflow-x: hidden;
     overflow-y: auto;
-    left: @sidebarWidth;
+    left: @sidebarWidth+@navWidth;
     right: 0;
     .box-sizing(border-box);
+    .closeMenu & {
+      left: @sidebarWidth+@collapsedNavWidth;
+    }
   }
   > div.inner {
     display: block;
@@ -650,15 +653,20 @@ table.databases {
 .topmenu-defaults {
   height: 70px;
   padding: 12px 10px 0;
-  border-bottom: 1px solid @darkRed;
   .box-sizing(border-box);
 }
 
-#dashboard-upper-menu{
+.dashboard-upper-menu{
+  right: 0;
+  left: @sidebarWidth+@navWidth;
   position: fixed;
   z-index: 11;
+  display: block;
   .topmenu-defaults;
   background-color: #CBCBCB;
+  .closeMenu & {
+    left: @sidebarWidth+@collapsedNavWidth;
+  }
 }
 
 #dashboard-lower-content{
@@ -677,54 +685,53 @@ table.databases {
   }
 }
 
-#sidenav{
+.sidenav {
   padding: 0;
   header {
     width: @sidebarWidth;
-    .box-shadow(inset -7px 0 15px -6px #000);
-    background: transparent url('../img/linen.png') repeat 0 0;
-    .topmenu-defaults;
   }
-  nav {
-    .nav-list{
-      .divider {
-        border: none;
-      }
-      li.active a {
-        background-color: @darkRed;
-        color: #fff;
-      }
-      a{
-        display: block;
-        padding: 10px 5px 10px 15px;
-        color: #333333;
-        border-bottom: 1px solid #989898;
-        .divider {
-          background: none;
-          color: #ccc;
-          padding: 0 2px;
-        }
-      }
-      .nav-header{
-        background-color: #B2B2B2;
-        padding: 5px;
-        text-shadow: none;
-        color: #333333;
-        border-bottom: 1px solid #989898;
+  .nav-list{
+    .divider {
+      border: none;
+    }
+    li.active a {
+      background-color: @darkRed;
+      color: #fff;
+    }
+    > li > a{
+      padding: 10px 13px 10px 30px;
+      border-bottom: 1px solid #d3d7db;
+    }
+    .dropdown-menu {
+      a {
+        color: #d9d9d9;
       }
+    }
+    a{
+      display: block;
+      padding: 10px 5px 10px 15px;
+      color: #333333;
 
+      .divider {
+        background: none;
+        color: #ccc;
+        padding: 0 2px;
+      }
+    }
+    .nav-header{
+      padding: 0px;
+      text-shadow: none;
+      color: #333333;
+      margin-bottom: -4px;
     }
   }
 }
+
 #sidebar-content {
-.box-shadow(-7px 0 15px -6px #000);
   position: absolute;
-  bottom: 0px;
   top: 60px;
   width: @sidebarWidth;
   left: 0;
-  overflow-x: hidden;
-  overflow-y: auto;
   background-color: @secondarySidebar;
   > div.inner {
     display: block;
@@ -747,7 +754,7 @@ table.databases {
 #db-views-tabs-nav{
   position: fixed;
   z-index: 12;
-  margin-top: 31px;
+  margin-top: 19px;
   margin-bottom: 0;
   /*background-color: #f4f4f4;*/
   padding: 0 20px;
diff --git a/src/fauxton/assets/less/variables.less b/src/fauxton/assets/less/variables.less
index 4876013dd..2377e6b74 100644
--- a/src/fauxton/assets/less/variables.less
+++ b/src/fauxton/assets/less/variables.less
@@ -54,6 +54,7 @@
 @sidebarBG: #F2F2F2;
 @sidebarWidth: 330px;
 
+
 @NavIconActive: #ffffff;
 @NavIcon: @brown;