Fauxton: Refactor sidebar nav for new design

11 files changed, 376 insertions, 309 deletions

diff --git a/src/fauxton/app/addons/documents/assets/less/documents.less b/src/fauxton/app/addons/documents/assets/less/documents.less
index 8b0ba2e61..4e87dd680 100644
--- a/src/fauxton/app/addons/documents/assets/less/documents.less
+++ b/src/fauxton/app/addons/documents/assets/less/documents.less
@@ -171,8 +171,9 @@ button.beautify {
         padding-left: 55px;
         font-size: 14px;
         &:hover {
+          background-color: #af2d24;
+          color: #fff;
           text-decoration: none;
-          color: #af2d24;
         }
       }
     }
@@ -194,30 +195,6 @@ button.beautify {
         -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/sidebarviews.js b/src/fauxton/app/addons/documents/sidebarviews.js
new file mode 100644
index 000000000..88233f682
--- /dev/null
+++ b/src/fauxton/app/addons/documents/sidebarviews.js
@@ -0,0 +1,252 @@
+// 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.
+
+define([
+       "app",
+
+       "api",
+       "addons/fauxton/components",
+
+       "addons/documents/resources",
+       "addons/databases/resources"
+],
+
+function(app, FauxtonAPI, Components, Documents, Databases) {
+  var Views = {};
+
+  Views.Sidebar = FauxtonAPI.View.extend({
+    template: "addons/documents/templates/sidebar",
+    className: "sidenav",
+    tagName: "nav",
+    events: {
+      "click button#delete-database": "showDeleteDatabaseModal"
+    },
+
+    initialize: function(options) {
+      this.database = options.database;
+      if (options.ddocInfo) {
+        this.ddocID = options.ddocInfo.id;
+        this.currView = options.ddocInfo.currView;
+      }
+    },
+    showDeleteDatabaseModal: function(event){
+      this.deleteDBModal.showModal();
+    },
+
+    serialize: function() {
+      var docLinks = FauxtonAPI.getExtensions('docLinks'),
+          newLinks = FauxtonAPI.getExtensions('sidebar:newLinks'),
+          addLinks = FauxtonAPI.getExtensions('sidebar:links'),
+          extensionList = FauxtonAPI.getExtensions('sidebar:list');
+      return {
+        changes_url: '#' + this.database.url('changes'),
+        permissions_url: '#' + this.database.url('app') + '/permissions',
+        db_url: '#' + this.database.url('index'),
+        database: this.collection.database,
+        database_url: '#' + this.database.url('app'),
+        docLinks: docLinks,
+        addLinks: addLinks,
+        newLinks: newLinks,
+        extensionList: extensionList > 0
+      };
+    },
+
+
+    beforeRender: function(manage) {
+      this.deleteDBModal = this.setView(
+        '#delete-db-modal',
+        new Views.DeleteDBModal({database: this.database})
+      );
+
+      var database = this.collection.database,
+          newurl = "#" + database.url('app') + '/new';
+
+      var newLinks = [{
+        title: 'Add new',
+        links: [{
+          title: 'New Doc',
+          url: newurl,
+          icon: 'fonticon-circle-plus'
+        },{
+          title: 'New Design Doc',
+          url: newurl,
+          icon: 'fonticon-circle-plus'
+        }]
+      }];
+
+      this.insertView("#new-all-docs-button", new Components.MenuDropDown({
+        links: newLinks,
+      }));
+
+      this.insertView("#new-design-docs-button", new Components.MenuDropDown({
+        links: newLinks,
+      }));
+
+      this.collection.each(function(design) {
+        if (design.has('doc')){
+          this.insertView(new Views.DdocSidenav({
+            model: design,
+            collection: this.collection
+          }));
+        }
+      },this);
+    },
+
+    afterRender: function () {
+      if (this.selectedTab) {
+        this.setSelectedTab(this.selectedTab);
+      }
+    },
+
+    setSelectedTab: function (selectedTab) {
+      this.selectedTab = selectedTab;
+      var $selectedTab = this.$('#' + selectedTab);
+
+      this.$('li').removeClass('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, ddocType){
+      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,
+          ddocType: ddocType,
+          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"),
+          ddocName = this.model.id.replace(/^_design\//,""),
+          sideBarMenuLinks = [];
+
+      var sidebarListTypes = FauxtonAPI.getExtensions('sidebar:list');
+          if (ddocDocs){
+            //Views
+            this.buildIndexList(ddocDocs, "views", "view");
+            //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);
+          }
+       
+     var docSafe = app.utils.safeURLName(ddocName), 
+         database = this.collection.database,
+         links = _.reduce(FauxtonAPI.getExtensions('sidebar:links'), function (menuLinks, link) {
+
+          menuLinks.push({
+            title: link.title,
+            url: "#" + database.url('app') + "/" + link.url + "/" + docSafe,
+            icon: 'fonticon-circle-plus'
+          });
+
+         return menuLinks; 
+     }, [{
+      title: 'Secondary View',
+      url: "#" + database.url('app') + "/new_view/" + docSafe,
+      icon: 'fonticon-circle-plus'
+     }]);
+
+     sideBarMenuLinks.push({
+       title: 'Add new',
+       links: links
+     });
+
+      this.insertView(".new-button", new Components.MenuDropDown({
+        links: sideBarMenuLinks,
+      }));
+    }
+  });
+
+  Views.IndexItem = FauxtonAPI.View.extend({
+    template: "addons/documents/templates/index_menu_item",
+    tagName: "li",
+
+    initialize: function(options){
+      this.index = options.index;
+      this.ddoc = options.ddoc;
+      this.database = options.database;
+      this.selected = !! options.selected;
+      this.selector = options.selector;
+      this.ddocType = options.ddocType || this.selector;
+    },
+
+    serialize: function() {
+      return {
+        icon: this.ddocType,
+        type:  this.ddocType,
+        index: this.index,
+        ddoc: this.ddoc,
+        database: this.database,
+        selected: this.selected
+      };
+    },
+
+    afterRender: function() {
+      if (this.selected) {
+        $(".sidenav ul.nav-list li").removeClass("active");
+        this.$el.addClass("active");
+      }
+    }
+  });
+
+  return Views;
+});
+
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
deleted file mode 100644
index 77323a970..000000000
--- a/src/fauxton/app/addons/documents/templates/add_new_ddoc_fn_dropdown.html
+++ /dev/null
@@ -1,31 +0,0 @@
-<!--
-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/design_doc_menu.html b/src/fauxton/app/addons/documents/templates/design_doc_menu.html
index c5bd3923b..63d601640 100644
--- a/src/fauxton/app/addons/documents/templates/design_doc_menu.html
+++ b/src/fauxton/app/addons/documents/templates/design_doc_menu.html
@@ -12,13 +12,13 @@ License for the specific language governing permissions and limitations under
 the License.
 -->
 <li class="nav-header">
+	<div class="new-button add-dropdown"></div>
 	<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">
+			<a id="<%= ddoc_clean %>_metadata" href="#/database/<%- database_encoded %>/_design/<%- ddoc_encoded %>/metadata" class="toggle-view">
 			  Design Doc Metadata
 			</a>
 		</li>
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 455f491b6..04995f3e8 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,9 @@ License for the specific language governing permissions and limitations under
 the License.
 -->
 
-<a id="<%= removeSpecialCharacters(ddoc) %>_<%= removeSpecialCharacters(index) %>" href="#database/<%= safeURL(database) %>/_design/<%= safeURL(ddoc)%>/_<%=type%>/<%= safeURL(index) %>" class="toggle-view">
-  <%= index %>
+<a id="<%- removeSpecialCharacters(ddoc) %>_<%- removeSpecialCharacters(index) %>" href="#/database/<%- safeURL(database) %>/_design/<%= safeURL(ddoc)%>/_<%=type%>/<%= safeURL(index) %>" class="toggle-view">
+  <% if (icon) { %>
+  <i class="fonticon-<%- icon %>"></i> 
+  <% } %>
+  <%- index %>
 </a>
diff --git a/src/fauxton/app/addons/documents/templates/sidebar.html b/src/fauxton/app/addons/documents/templates/sidebar.html
index 74c8605cc..b90a7b6cf 100644
--- a/src/fauxton/app/addons/documents/templates/sidebar.html
+++ b/src/fauxton/app/addons/documents/templates/sidebar.html
@@ -11,40 +11,21 @@ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 License for the specific language governing permissions and limitations under
 the License.
 -->
-<!--   <header class="row-fluid">
-    <div class="span12">
 
-      <div class="btn-group">
-        <button class="btn dropdown-toggle dropdown-toggle-btn" data-toggle="dropdown">
-          Create New
-          <span class="caret"></span>
-        </button>
-        <ul class="dropdown-menu">
-          <!-- dropdown menu links -->
-<!--           <li>
-          <a id="doc" href="#<%= database.url('app') %>/new">Document</a>
-          </li>
-          <li>
-          <a href="#<%= database.url('app') %>/new_view">Secondary Index</a>
-           <% _.each(newLinks, function (item) { %>
-           <a href="#<%= database.url('app') %>/<%=item.url%>"> <%= item.name %></a>
-           <% }); %>
-          </li>
-        </ul>
-      </div>
-        <button id="delete-database" class="btn pull-right"><i class="icon-trash"></i> Database</button>
-    </div>
-  </header> -->
+<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">
+      <div id="new-all-docs-button" class="add-dropdown"> </div> 
+      <a id="all-docs" href="#<%= database.url('index') %>" class="toggle-view"> All Documents</a> 
+   </li>
+  <li>
+      <div id="new-design-docs-button" class="add-dropdown"> </div> 
+      <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">
-      <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>
-
-  <div id="delete-db-modal"> </div>
+<div id="delete-db-modal"> </div>
diff --git a/src/fauxton/app/addons/documents/views.js b/src/fauxton/app/addons/documents/views.js
index ad69fb78d..6d739fc6a 100644
--- a/src/fauxton/app/addons/documents/views.js
+++ b/src/fauxton/app/addons/documents/views.js
@@ -17,6 +17,7 @@ define([
        "addons/fauxton/components",
 
        "addons/documents/resources",
+       "addons/documents/sidebarviews",
        "addons/databases/resources",
        "addons/pouchdb/base",
 
@@ -31,7 +32,7 @@ define([
        "plugins/zeroclipboard/ZeroClipboard"
 ],
 
-function(app, FauxtonAPI, Components, Documents, Databases, pouchdb,
+function(app, FauxtonAPI, Components, Documents, Views, Databases, pouchdb,
          resizeColumns, beautify, prettify, ZeroClipboard) {
 
   function showError (msg) {
@@ -42,7 +43,6 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb,
     });
   }
 
-  var Views = {};
 
   Views.SearchBox = FauxtonAPI.View.extend({
     template: "addons/documents/templates/search",
@@ -336,41 +336,7 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb,
     }
   });
 
-  Views.IndexItem = FauxtonAPI.View.extend({
-    template: "addons/documents/templates/index_menu_item",
-    tagName: "li",
-
-    initialize: function(options){
-      this.index = options.index;
-      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),
-        selected: this.selected
-      };
-    },
-
-    afterRender: function() {
-      if (this.selected) {
-        $(".sidenav ul.nav-list li").removeClass("active");
-        this.$el.addClass("active");
-      }
-    }
-  });
-
+  
   Views.AllDocsNumber = FauxtonAPI.View.extend({
     template: "addons/documents/templates/all_docs_number",
 
@@ -1812,156 +1778,9 @@ 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"
-    },
-
-    initialize: function(options) {
-      this.database = options.database;
-      if (options.ddocInfo) {
-        this.ddocID = options.ddocInfo.id;
-        this.currView = options.ddocInfo.currView;
-      }
-    },
-    showDeleteDatabaseModal: function(event){
-      this.deleteDBModal.showModal();
-    },
-
-    serialize: function() {
-      var docLinks = FauxtonAPI.getExtensions('docLinks'),
-          newLinks = FauxtonAPI.getExtensions('sidebar:newLinks'),
-          addLinks = FauxtonAPI.getExtensions('sidebar:links'),
-          extensionList = FauxtonAPI.getExtensions('sidebar:list');
-      return {
-        changes_url: '#' + this.database.url('changes'),
-        permissions_url: '#' + this.database.url('app') + '/permissions',
-        db_url: '#' + this.database.url('index'),
-        database: this.collection.database,
-        database_url: '#' + this.database.url('app'),
-        docLinks: docLinks,
-        addLinks: addLinks,
-        newLinks: newLinks,
-        extensionList: extensionList > 0
-      };
-    },
-
-
-    beforeRender: function(manage) {
-      this.deleteDBModal = this.setView(
-        '#delete-db-modal',
-        new Views.DeleteDBModal({database: this.database})
-      );
-
-      this.collection.each(function(design) {
-        if (design.has('doc')){
-          this.insertView(new Views.DdocSidenav({
-            model: design,
-            collection: this.collection
-          }));
-        }
-      },this);
-    },
-
-
-    afterRender: function () {
-      if (this.selectedTab) {
-        this.setSelectedTab(this.selectedTab);
-      }
-    },
-
-    setSelectedTab: function (selectedTab) {
-      this.selectedTab = selectedTab;
-      var $selectedTab = this.$('#' + selectedTab);
-
-      this.$('li').removeClass('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
-      }));
-
-    }
-  });
-
-  Views.Indexed = FauxtonAPI.View.extend({});
+  
 
+  
   Views.Changes = FauxtonAPI.View.extend({
     template: "addons/documents/templates/changes",
 
@@ -2012,31 +1831,6 @@ 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",
 
diff --git a/src/fauxton/app/addons/fauxton/components.js b/src/fauxton/app/addons/fauxton/components.js
index 79a932043..6450240ca 100644
--- a/src/fauxton/app/addons/fauxton/components.js
+++ b/src/fauxton/app/addons/fauxton/components.js
@@ -533,6 +533,32 @@ function(app, FauxtonAPI, ace, spin) {
 
   });
 
+
+  //Menu Drop down component. It takes links in this format and renders the Dropdown:
+  // [{
+  //  title: 'Section Title (optional)',
+  //  links: [{
+  //    icon: 'icon-class (optional)',
+  //    url: 'clickalble-url',
+  //    title: 'name of link'
+  //  }]
+  // }]
+  Components.MenuDropDown = FauxtonAPI.View.extend({
+    template: "addons/fauxton/templates/menu_dropdown",
+    className: "dropdown",
+    initialize: function(options){
+      this.links = options.links;
+    },
+    serialize: function(){
+      var sidebarItem = FauxtonAPI.getExtensions('sidebar:links');
+      console.log('linls', this.links);
+      return {
+        links: this.links
+      };
+    }
+  });
+
+
   //need to make this into a backbone view...
   var routeObjectSpinner;
   FauxtonAPI.RouteObject.on('beforeEstablish', function (routeObject) {
diff --git a/src/fauxton/app/addons/fauxton/templates/menu_dropdown.html b/src/fauxton/app/addons/fauxton/templates/menu_dropdown.html
new file mode 100644
index 000000000..f662e608a
--- /dev/null
+++ b/src/fauxton/app/addons/fauxton/templates/menu_dropdown.html
@@ -0,0 +1,33 @@
+<!--
+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.
+-->
+
+<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">
+  <% _.each(links, function (linkSection) { %>
+    <% if (linkSection.title) { %>
+    <li class="header-label"> <%- linkSection.title %> </li>
+    <% } %>
+    <% _.each(linkSection.links, function (link) { %>
+      <li>
+        <a 
+          <% if (link.icon) { %>
+          class="icon <%- link.icon %>" 
+          <% } %>
+          href="<%- link.url %>">
+          <%- link.title %>
+        </a>
+      <li>
+    <%});%>
+  <%});%>
+ </ul>
diff --git a/src/fauxton/assets/less/bootstrap/dropdowns.less b/src/fauxton/assets/less/bootstrap/dropdowns.less
index 5b3ca77a4..f510b1793 100644
--- a/src/fauxton/assets/less/bootstrap/dropdowns.less
+++ b/src/fauxton/assets/less/bootstrap/dropdowns.less
@@ -115,8 +115,8 @@
 .dropdown-submenu:hover > a,
 .dropdown-submenu:focus > a {
   text-decoration: none;
-  color: @dropdownLinkColorHover;
-  #gradient > .vertical(@dropdownLinkBackgroundHover, darken(@dropdownLinkBackgroundHover, 5%));
+  color: #fff;
+  //#gradient > .vertical(@dropdownLinkBackgroundHover, darken(@dropdownLinkBackgroundHover, 5%));
 }
 
 // Active state
diff --git a/src/fauxton/assets/less/fauxton.less b/src/fauxton/assets/less/fauxton.less
index 28bd9541f..a8ddbace6 100644
--- a/src/fauxton/assets/less/fauxton.less
+++ b/src/fauxton/assets/less/fauxton.less
@@ -694,10 +694,15 @@ table.databases {
     .divider {
       border: none;
     }
-    li.active a {
+    > li > a:hover,
+    > li > a:focus{
       background-color: @darkRed;
       color: #fff;
     }
+
+    li.active > a {
+      color: @darkRed;
+    }
     > li > a{
       padding: 10px 13px 10px 30px;
       border-bottom: 1px solid #d3d7db;
@@ -723,6 +728,10 @@ table.databases {
       text-shadow: none;
       color: #333333;
       margin-bottom: -4px;
+
+      & > span:hover {
+        color: @red;
+      }
     }
   }
 }
@@ -920,3 +929,26 @@ div.spinner {
     list-style-type: none;
   }
 }
+
+div.add-dropdown { 
+
+ position: absolute;
+  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;
+  }
+}