Library has single panel.

assets/css/library.css.sass

@@ -29,11 +29,6 @@ mpd-library
     top: 0
     header
       top: 0
-  .browser
-    position: absolute
-    height: 100%
-    width: 100%
-    @include transition(left 0.25s ease-in-out)
   ul, ol
     width: 100%
   ul.root, ol.artists, ol.albums

assets/js/components/library.js

@@ -4,6 +4,10 @@ can.Component.extend({
 
   template: can.view('views/library.mustache'),
 
+  scope: {
+    currentPane: 0
+  },
+
   events: {
     show: function() {
       $(this.element).addClass('show');
@@ -13,15 +17,17 @@ can.Component.extend({
       $(this.element).removeClass('show');
     },
 
-    'a.close click': 'hide',
+    'route': function(data) {
+      this.hide();
+    },
 
     ':type route': function(data) {
       if (data.type == 'library') {
         this.show();
-        if (data.pane > this.browser.currentPane) {
+        if (data.pane > this.currentPane) {
           this.addPane(data);
         }
-        else if (data.pane < this.browser.currentPane) {
+        else if (data.pane < this.currentPane) {
           this.removePane(data);
         }
       }

assets/js/components/panel.js

@@ -10,22 +10,30 @@ can.Component.extend({
     artist: '@',
     album: '@',
     title: function() {
-      if (this.show == 'root')
-        return 'Library';
+      if (this.show == 'root') return 'Library';
     },
     fetchItems: {
-      root: new can.Map,
+      root: new can.List(['Artists', 'Albums', 'Songs']),
       artists: function() { return Artist.findAll({}) },
       albums: function() { Album.findAll({ artist: this.artist }) },
       songs: function() { Song.findAll({ artist: this.artist, album: this.album }) }
     }
   },
 
-  events: {},
+  events: {
+  },
 
   helpers: {
     renderItems: function() {
-      return can.view.render('views/library/' + this.show, {});
+      return can.view.render('views/library/' + this.show, {
+        items: this.fetchItems.root
+      });
+    },
+
+    rootLink: function(label, show) {
+      return can.route.link(label, {
+        type: 'library', show: show
+      });
     }
   }
 

public/views/library/root.mustache

@@ -1,5 +1,3 @@
 <ul class="root">
-  <li>{{can.route.link('Artists', { page: 'library', show: 'artists', pane: pane + 1 })}}</li>
-  <li>{{can.route.link('Albums', { page: 'library', show: 'albums', pane: pane + 1 })}}</li>
-  <li>{{can.route.link('Songs', { page: 'library', show: 'songs', pane: pane + 1 })}}</li>
+  <li>{{{rootLink 'Artists', 'artists'}}}</li>
 </ul>