Add root pane.

assets/javascripts/controllers/library.controller.js

@@ -4,4 +4,25 @@ mpdClient.controller('library', function ($scope, api) {
   $scope.$on('library:show', function () { $scope.show = true })
 
   $scope.hide = function () { $scope.show = false }
+
+  var rootPane = {
+    title: 'Library',
+    entries: [
+      { label: 'Artists', path: '/artists' },
+      { label: 'Albums', path: '/albums' },
+      { label: 'Songs', path: '/songs' }
+    ]
+  }
+
+  $scope.panes = [rootPane]
+
+  $scope.currentPaneIndex = 0
+
+  $scope.currentPane = function () {
+    return $scope.panes[$scope.currentPaneIndex]
+  }
+
+  $scope.newPane = function (path, params) {
+    console.log(path)
+  }
 })

assets/javascripts/controllers/mpd-client.controller.js

@@ -1,3 +1,5 @@
 mpdClient.controller('mpd-client', function ($rootScope, $scope) {
   $scope.showLibrary = function () { $scope.$broadcast('library:show') }
+
+  $scope.currentPanelTemplate = 'panels/root.html'
 })

assets/javascripts/views/library.html

@@ -3,4 +3,5 @@
     <a class="close" href="#" ng-click="hide()">Close</a>
     <h1>Library</h1>
   </header>
+  <ng-include src="currentPanelTemplate"></ng-include>
 </div>

assets/stylesheets/library.css.sass

@@ -1,6 +1,7 @@
 #library
   background: white
   position: absolute
+  padding: 2.5rem 0 0
   top: 100%
   bottom: 0
   left: 0
@@ -30,10 +31,6 @@
     top: 0
     header
       top: 0
-  .browser
-    position: absolute
-    height: 100%
-    @include transition(left 0.25s ease-in-out)
   ul.root, ol.artists, ol.albums
     @extend .list
   ol.songs

public/panels/root.html

@@ -0,0 +1,5 @@
+<ul class="root">
+  <li ng-repeat="entry in currentPane().entries">
+    <a href="#" ng-click="newPane(entry.path, {})">{{ entry.label }}</a>
+  </li>
+</ul>